作成者別アーカイブ: lowedge

StyleNote 5.22 をリリースしました。

StyleNote 5.22をリリースしました（5.21は非公開バージョンです）。

1年ぶりのバージョンアップを実施しました。色々と修正＆機能改善に手をつけていたら、収拾がつかなくなり遅くなってしまいました。今回のバージョンアップの主な変更点は、高解像度モニターへの対応（一部）、検索文字のハイライト、ソースのオートフォーマット機能の実装、ドキュメントの改行コード変更への対応です。また、UIのブラッシュアップを全体的に行っていますし、バグの修正も多数含まれます。

詳しい更新内容は下記をご覧ください。

—————————————————————–
変更箇所 ★…新機能 ●…改良/変更 ▲…バグ修正 ×…廃止
—————————————————————–
★【高解像度モニター】高DPIモニターに対応しました(カスタム編集ツールバー、カスタムHTMLツールバーのアイコンは未対応です。また、その他一部、対応できていない部分もあります)　※Per-Moniter DPIには対応していません　/user
★【ツール – ソースのオートフォーマット】HTMLタグの構成を自動的に整えます。/user
★【ホイールインプット】ユニットが付かない数値に対しても動作するようになりました。単純に半角の数字を選択してShift＋マウスホイールで増減できます。
★【StyleNoteの設定 – 保存と読込」「改行コード」の設定項目を追加しました。新しいファイルを保存するときの改行コードを規定できます。/user
★【ステータスバー】編集中のファイルの改行コード欄を新設しました。クリックで適用する改行コードを変更できます。
★【ステータスバー】カレントフォルダ欄のフォルダーアイコンのクリック、もしくはフォルダーパスをCtrlキーを押しながらクリックして、フォルダーパスを手動で変更できるようになりました。
★【検索ハイライト】検索実行時に、ヒットした検索キーワードを強調表示する機能を導入しました。
★【テーマの設定】設定項目に「検索ヒット」「コメント3」を追加しました。「コメント1～コメント3」については適用されるコメントの対象が変更されています。ご利用の方は必要に応じて修正下さい。
★【ファイルログ】GUIによるファイル復元ツールの実装を進めています。現時点では、ファイルメニューの「過去のファイルの復元と確認」から保存されているファイルの閲覧が可能です。ファイル数が多いとウインドウが表示されるまでに時間がかかる可能性があります。また動作は実装途中ですので最終的な実装はまだ先の予定です。
★【スウォッチ】ツールバーのカラー選択ボタンの横にスウォッチボタンを追加しました。旧お気に入りの色と、最近挿入したカラーの履歴を表示します。

●【StyleNoteの設定 – コーディング – HTML】前バージョンで「フォーマットの設定」が意図せず非表示になっていましたので、今バージョンから復活させました。
●【ファイルログ】不要ファイルの削除タイミングをStyleNote終了時に変更しました。ファイル保存時の動作遅延を回避するためです。
●【カラー選択ダイアログ】HSV形式のカラーパレットの動作を修正しました。
●【お気に入りの色】名称を「スウォッチ」へ変更しました。
●【関連ファイルバー】ファイルパスに「?」が含まれる場合、「?」以降を無視してファイルの存在確認を行えるようにした。
●【エディター描画】エディタのシンタックスハイライトの対象CSSプロパティを大量に追加しました。
●【クリップボード】クリップボードの取得処理を AddClipboardFormatListener に変更しました。これによりWindows XPでStyleNoteが動作しなくなった可能性があります。
●【スマートエディット】ファイルパスの補完候補の対象拡張子制限を解除しました。
●【ステータスバー】フォルダパス欄のシングルクリックでフォルダーが開くように変更しました（前バージョンまではダブルクリック）
●【ステータスバー】描画のチラツキを抑える処理を加えました。
●【設定 – ファイルバーの設定】当該項目は「StyleNoteの設定」に移動しました。
●【ファイルセレクター】項目サイズの変更について「大きい表示・小さい表示」の2段階表示を廃止し、「ファイルセレクターの設定」オプションに「項目のサイズ」欄を追加しました。多段階でサイズを変更できます。
●その他細かい改良多数。

▲【Zen-Coding】動作不具合を修正しました。
▲【スマートエディット】一部のカラーネームのプレビュー描画が正しく表示されない不具合を修正しました。
▲【ファイルバー】描画更新されず、異なるタブがアクティブタグとして描画される不具合を修正しました。
▲【ステータスバー】無関係な内容が描画される不具合を修正しました。

×【ファイルバーの設定】機能の統廃合に伴い、「関連ファイルバー」のカラーオプションの設定は廃止されました。
×【テーマの設定】機能の統廃合に伴い、ファイルタブのグラデーション描画の設定は廃止されました。
×【エレメントオーダービュー】機能の統廃合に伴い、カラーオプションの設定は廃止されました。
×【StyleNoteの設定】相対パスの取得警告の表示機能は廃止されました。通知機能に出力されるようになります。
×【StyleNoteの設定 – メルアド】機能の統廃合に伴い、当該機能は廃止されました。それにともないメルアド機能を呼び出している関連箇所から項目が撤去されています。
×【サイトアドレスの取得】機能の統廃合に伴い、当該ダイアログは廃止されました。
×【ステータスバー】「編集」欄は廃止されました。
×【StyleNoteの設定 – コーディング – CSS】属性値の前にスペースを挿入するオプションは廃止されました。
×【ヘルプ – 公式サイトからのお知らせ】廃止されました。
×【StyleNoteの設定 – コーディング – TABLE要素の自動生成書式】出力されるTABLEタグは「ソースのオートフォーマット」機能に従ってフォーマットされるようになったため、本機能は廃止されました。。

StyleNote 5.20 をリリースしました。

StyleNote 5.20をリリースしました（5.18, 5.19は非公開バージョンです）。

クリップボードエラーの問題について、サポート掲示板にて症状を改善したと報告しておりましたが、その後の調査で改善していないことがわかりました。すみませんm(__)m そのため本バージョンでも同様の症状が発生する可能性がありますので、ご了承ください。引き続き、改善に努めます。

本バージョンは前回のバージョンアップから時間が経過していることもあり、それなりに多くの修正や変更が含まれています。また現在、UIの簡略化や機能の取捨選択を行っています。本バージョンもこの流れにそった変更を行っております。

新機能、修正箇所、バグ修正内容等は下記をご覧ください。

—————————————————————–
変更箇所 ★…新機能 ●…改良/変更 ▲…バグ修正 ×…廃止
—————————————————————–
★【HTMLタグの整合性の検証】HTMLタグが正しい順序で閉じられているか確認できるようになりました。[拡張機能]/user
★【ハイパーリンクの検証】ローカルサーバープレビューが有効のときはルートパスも検証されるようになりました。
★【内蔵ブラウザー】リアルタイムプレビューが新規作成ファイルでも動作するようになりました。起動直後の新規ファイルの状態からリアルタイムプレビューが有効になります。
★【内蔵ブラウザー】SHIFT＋マウスクリックでクリックした位置のタグの開始タグから終了タグまで全体を選択するようにしました。

●開発環境がWindows10になりました。今後は、Windows10ベースで調整していきます。
●【テーマの設定】ファイルバー（タブ）のカラー設定を「テーマの設定」に移設しました。今後、カラー関連の設定は「テーマの設定」に移設して参ります。
●StyleNoteで開くことができるファイルをテキスト(ASCII)ファイルのみに制限しました。誤って画像ファイル等（バイナリファイル）を指定した場合は読込がキャンセルされます。
●【HTMLタグの整合性の検証】scriptタグおよびstyleタグ内に記述されている不等号による動作不具合を修正しました。/user
●【関連ファイルバー】「JS」「CSS」「LINK」切り替えボタンを廃止しました。JSとCSSファイルが常に列挙されるようになりました。リンクファイルはドロップダウンメニューにのみ表示されます。
●【スニペットの編集】スニペット編集画面の右に設置していた命令パネルを、エディター上の右クリックメニューに移動しました。
●【外部アプリ/外部ブラウザー】旧バージョンまでの「外部アプリ」は本バージョンで廃止され、旧バージョンまでの「外部ブラウザー」が「外部アプリ」に改称されました。これまで旧「外部アプリ」に登録されていたアプリは【プレビュー – プレビューの設定 – アプリ登録】より再登録をお願いいたします。
●【Susie Plugin】Susieプラグインの読込フォルダを固定フォルダに変更させていただきました。読込先フォルダおよび認識しているプラグインファイルの詳細は【設定 – StyleNoteの設定 – その他】からご確認頂けます。
●【内蔵ブラウザー】マウスクリックによるキャレット移動機能で、特定の条件下で選択するタグがズレる不具合を修正しました。
●【クラスファインダー】ファイル切替時に、クラスファインダーを自動更新しないように変更しました。ファイル読み込み時（タブ切り替え時）の速度改善が目的です。
●その他内部データの更新および細かい変更・調整を行いました。全体的に動作速度が改善しているかと思います。。

▲【タグアナライザー】「履歴にコピー」機能が機能していなかった不具合を修正しました。
▲【お気に入りの整理】インデックスエラーが表示される不具合を修正しました。
▲【Zen-coding】展開時の不具合を修正しました。度々失礼致しましたm(__)m/user
▲【クラスファインダー】右クリックメニュー「定義箇所に移動」コマンドが利用できなかった不具合を修正しました/user
▲【クリップボード】クリップボード取得処理を見直しました/user
▲【ショートカットキーの設定】プレビューメニュー内の項目に対してショートカットキーが設定できない不具合を修正しました/user
▲【ローカルサーバープレビュー】プレビューパスのフォルダ区切りが / に変換されずに出力され、プレビューが実行できない不具合を修正しました
▲【プレビュー設定 – ユーザーエージェント】デバイスの追加に失敗する不具合を修正しました

×【ファイルバーの設定】「関連ファイルバー」のカラーオプションの設定は廃止されました。
×【テーマの設定】ファイルタブのグラデーション描画の設定は廃止されました。
×【エレメントオーダービュー】カラーオプションの設定は廃止されました。
×【外部アプリ】旧バージョンまでの「外部アプリ」と「内蔵ブラウザー」は本バージョンで「内蔵ブラウザー」に統合され、その名称を「外部アプリ」に変更しました。

StyleNote 5.17 をリリースしました。

本日5.17をリリースしました。

いろいろとご報告を頂いておりますが、とりあえず現状の内容でバージョンアップさせて頂きました。修正・更新箇所は下記の通りです。

—————————————————————–
変更箇所 ★…新機能 ●…改良/変更 ▲…バグ修正 ×…廃止
—————————————————————–
★【ピクチャーブラウザー】ファイル選択リストにサムネイルを表示するようにしました。
★【ピクチャーブラウザー】ファイルの並び順を変更できるようにしました。選択リストの右クリックメニューから変更できます。/user

●【スマートエディット】box-sizingに対応しました。
●【ピクチャーブラウザー】ファイル取得処理を見直しました。従来よりもリストアップ処理が早くなりました。
●【ファイルセレクター】詳細表示時のサムネイル画像の描画位置をセンタリング表示するようにしました。
●【クラスファインダー】メディアクエリーの検出に対応しました。オリジナルモード時のみ、メディアクエリーに所属するセレクターは、そのクエリーにぶら下がる形で分類されて表示されます。
●【クラスファインダー】各セレクターの行番号を表示するようにしました。
●【選択 – タグとタグの間のテキストを選択】対象範囲の前後にある半角空白と改行文字を除いた範囲を選択するようにしました。/user
●【ショートカットキーの設定】選択可能なボタンリストから「F11」と「F12」が漏れていたため、追加しました。/user
●ファイルセレクター、ライブラリーの検索窓でCtrl+V, Ctrol+C, Ctrl+Xのショートカットが動作するようにしました。/user
●スプラッシュスクリーンに表示する情報を変更。起動時の不具合の常用を確認するために、進捗情報として表示する内容を変更しました。
●各種微調整。

▲【ピクチャーブラウザー】ファイルリストの右クリックメニューで一部の項目が動作していなかった不具合を修正。

StyleNote 5.16 をリリースしました。

StyleNote 5.16をリリースしました。

スマートエディット（入力補完機能）がインラインスタイルに対応しました。また、本バージョンより、エクスプローラー上でフォルダ/ファイルが変更されたときにファイルセレクターが自動的に更新されるようになりました。

また、新機能として【ファイルログ】機能の実装を一部完了しました。この機能により、編集したファイルの変更履歴が一定数保存されるようになります。そのため、誤って上書きしたファイルを古いバージョンのデータに戻すことも可能になりました。（ただし、本バージョンではGUIによる履歴の呼び戻しにはまだ対応していないため、データの回復にはExplorerにて手動で行って頂く必要があります）

その他、ユーザーの方からいただいた不具合の修正も行っています。
ぜひバージョンアップをお願い致します。

—————————————————————–
変更箇所 ★…新機能 ●…改良/変更 ▲…バグ修正 ×…廃止
—————————————————————–
★【ファイルセレクター】他のアプリによってファイル/フォルダの内容が変更された場合に、ファイルセレクターが自動的に更新されるようになりました。
★【スマートエディット】STYLE属性内のCSS補完に対応しました STYLE=”” 内では、。CSSセレクター内の補完時と同様の補完候補が表示されるようになります。
★【StyleNoteの設定 – バックアップ – ファイルログ】編集中のファイルの変更履歴を一定数、自動バックアップをとる機能です。古いバージョンのファイル内容が一定数保存されるため、誤って上書きしてしまったファイル等を復元できる可能性があります。現在はGUIによる復元機能はサポートされていません（近いバージョンで実装予定です）。自動保存されたファイルはマイドキュメントのStyleNoteフォルダ内の「Temp」フォルダに保存されていますので、必要に応じてご確認下さい。また、バックアップされたファイル名の実際のファイルの場所は、backup.datに保存されています。
★【選択】選択メニューに「タグとタグの間のテキストを選択する」を追加しました。/user

●【ファイルセレクター】画像サムネイルの作成処理をGDI+に変更しました。より精細なサムネイルを表示できるようになりました。
●【各種ダイアログ】「お気に入りの登録」ダイアログ等、各種ダイアログのサイズを見やすく調整いたしました。/user
●【ファイルセレクター】ファイルセレクターからエディター領域にファイルをD&Dしたときに挿入されるタグを変更しました。これまで常に<A>タグが挿入されていましたが、jsファイルは<script>タグを、cssファイルは<link>タグを挿入するように変更しました。
●【標準ツールバー – スポイトでカラーコードを取得する】カラーコード取得時の通知メッセージを非表示に変更しました。
●【アクティブコードヒント】画像プレビューの表示時に、画像サイズを併記するようにしました。

▲【コマンドラインパラメータ】コマンドラインパラメータで起動中のStyleNoteにファイルを渡す際に、ウインドウの最大化が強制的に解除されてしまう不具合を修正しました。/user
▲【コーディング – 最近挿入したタグ】動作していなかった不具合を修正しました。/user
▲【ファイルセレクター】右クリックメニューの整理。
▲【ZenCoding】特定の条件下で、展開対象の文字列が消えてしまう不具合を修正。
▲【内蔵ブラウザー】内蔵ブラウザーの要素調査でボックスの高さの値が正しく取得できていなかった不具合を修正しました。
▲各種UIの調整＆細かい調整。

×【オートコンプリート – CSSキーワード補完】本バージョンで、スマートエディットによるSTYLE属性内のCSS補完に対応したため、オートコンプリートによるCSSキーワードの補完機能は廃止されました。

StyleNote 5.15 をリリースしました。

StyleNote 5.15をリリースしました。

ユーザーの方から頂いた不具合の修正を1件と、要望に2件対応しました。また、前回のバージョンアップで比較的目立つバグを作ってしまったので、そちらを2件修正しました。とりあえず、動作安定していますので、バージョンアップして頂ければと思います。

—————————————————————–
変更箇所 ★…新機能 ●…改良/変更 ▲…バグ修正 ×…廃止
—————————————————————–
★【ブラウザーの設定 – ローカルサーバー】「ローカルサーバーによるプレビュー」で、ポート番号を指定できるようになりました。80番ポート以外でサーバーを稼働している場合もプレビューを実行できるようになります。また、指定されたポートが空いている場合は、自動的に通常プレビューに切り替わるようになりました。これにより、サーバーが稼働している環境では自動的に localhost によるプレビューを行い、サーバーが停止している環境では通常のファイルプレビューを行えるようになります。 ※StyleNoteを複数のPCで利用されており、実行環境により本機能のON/OFFを切り替えてご利用頂いていた場合は、これの切替が自動的に行われるようになります。
★【ブラウザーの設定 – ルートフォルダー】ルートフォルダーを登録する際に、そのルートフォルダーで適用するプレビューパスを個別に設定できるようになりました。「サブドメイン」と「ユーザーディレクトリ」の設定を新設していますので、サーバーの設定に合わせてご利用下さい。本機能の実装に伴い、ルートフォルダーの設定データが変更されました。従来の設定がリセットされている可能性がありますので、再設定をお願いいたします。/user
★【スマートエディット】CSS3のフレックスボックス関連プロパティを追加しました。
★【スタイルインスペクター】CSS3のフレックスボックス関連プロパティを追加しました。
★【標準ツールバー】内蔵ブラウザーのUAを変更できるボタンを新設しました。

●【内蔵ブラウザー】StyleNote起動直後の内蔵ブラウザーで画像が表示されない不具合を修正しました。

▲【スマートエディット/タグアナライザー】HTMLの新規属性挿入で、挿入位置が適切に補正されない不具合を修正しました/user
▲【ブラウザーの設定 – ユーザーエージェント】一部の編集用ツールボタンが動作していなかったため、使えるようにしました。
▲【ライセンス履行の申告】「リンク設置」の申告ダイアログで、一部の挙動に不備があり、目的のURLに対する認証が行えない不具合を修正しました/user
▲その他細かい修正。

ファイルの文字コードを指定して保存したい

StyleNoteでは、編集中のファイルの文字コードを簡単に変更できます。

ステータスバーの【保存時の文字コード】欄をクリックして、保存時の文字コードを変更します。保存時の文字コードを変更すると、一時的に青色で描画されます。これは、保存時の文字コードが変更されたことを表します。この状態で上書き保存を実行すると、選択した文字コードでファイルが保存され、青色での描画はクリアされます。

【保存時の文字コード】欄の場所については、こちらのドキュメントをご覧ください。

v5.14 内蔵ブラウザーで画像が表示されない不具合について

StyleNote 5.14の【内蔵ブラウザー】によるプレビューで、画像が表示されない不具合が発生しています。

この現象は「設定 – プレビュー/ブラウザー設定」ダイアログを開き、何も変更せずにそのまま「OK」ボタンで閉じて頂くと、症状が解消することがわかっています。

次回のバージョンで修正予定です。公開までは上記手順にて回避をお願い致しますm(__)m

StyleNote 5.14 をリリースしました。

StyleNote 5.14をリリースしました。

本バージョンから、内蔵ブラウザーのユーザーエージェントを自由に変更できるようになりました。JavaScriptでUAを判別し、端末別にレイアウトや動作を動的に制御しているページでは、本機能により端末別のプレビューを確認できるようになります。

—————————————————————–
変更箇所 ★…新機能 ●…改良/変更 ▲…バグ修正 ×…廃止
—————————————————————–
★【内蔵ブラウザー】内蔵ブラウザーの「ユーザーエージェント」を変更できるようになりました。「独立プレビュー」ウインドウのツールバーにある「スマホ」アイコンのドロップダウンメニューから、事前に登録したユーザーエージェントを切り替えられます。UAの登録は「設定 – プレビュー設定 – ユーザーエージェント」からおこなって頂けます。

●【スマートエディット】描画処理を改良しました。
●【ライセンス認証】内部処理を変更しました。

StyleNote 5.13 をリリースしました。

StyleNote 5.13をリリースしました（5.12は非公開バージョンになりました）。

動作改良および細かい部分のビジュアル調整がメインのバージョンです。
動作の安定性が増していますので、バージョンアップをお願いいたします。

—————————————————————–
変更箇所 ★…新機能 ●…改良/変更 ▲…バグ修正 ×…廃止
—————————————————————–
★【標準ツールバー】「スポイトでカラーを取得する」ボタンを新設しました。クリックしたままドラッグすると、画面上のカラーコードを取得できます。
★【標準ツールバー】「JS」ボタンを新設しました。
★【内蔵ブラウザー】デフォルト画面に内蔵ブラウザーの「ユーザーエージェント」「ブラウザーバージョン」「コードネーム」を表示するようにしました。
★【プレビューの設定】「エンジン設定 – ダウンロードと実行の管理」に「キャッシュを無効」と「ダイアログ抑止」を追加しました。

●【プレビューの設定】「StyleNoteの設定」にあったプレビュー関連の設定オプションを切り離し、「プレビュー設定」ウインドウにまとめました。「設定」メニューからアクセスできます。
●【テーマの設定】「エディターの設定」にあった「カラーの設定」は、「テーマの設定」として設定メニューに独立項目として分離しました。将来的にStyleNoteのカラー設定はカラープロファイルに全てまとまる予定です。
●【全体】各所に表示されるアイコンのデザインを微調整しました。
●【スニペット】挿入時に特定の条件下で表示される「文字コード適用の通知」を非表示にしました。
●【描画】各所の描画処理を微調整しました。
●【エディター描画】「アット規則」のカラー強調対象に @counter-style, @keyframes, @font-face, @page を加えました。
●【ファイルセレクター】ファイル取得処理の見直しを行い、リストアップ処理の速度を改善しました。
●【ファイルセレクター】アイコン取得/サムネイル作成処理を描画リクエストが発生したときに処理するように改良しました。画像フォルダの表示速度が改善しています。
●【スニペット】「初期挿入」テンプレートに設定したスニペットのアイコンを他のスニペットと区別するようにしました。

▲【内蔵ブラウザー】「リアルタイムプレビュー」が「プレビュー対象の拡張子」設定以外のファイルについても動作していた不具合を修正しました。
▲【クリップボード履歴】クリップボード取得処理を改良しました。遅延取得処理、例外処理、クリップボードオーナーの確認処理を追加しました。
▲【ピクチャーブラウザー】画像切り替え時に、切替前の画像が残る不具合を修正しました。
▲【エディター描画】CSS属性のカラー強調不具合を修正しました（text-decoration, left等も正常にカラー強調されるようになりました）/user
▲【zen-coding】BRタグの展開に不具合がありましたので、修正しました。

×【CLASS/IDの検証の設定】機能仕分けにより、設定ダイアログは廃止しました。
×【ハイパーリンクの設定】機能仕分けにより、一部設定オプションを廃止しました。
×【ピクチャーブラウザー】タイル表示機能は廃止しました。
×【StyleNoteの設定】「JavaScript <script> 要素に language 属性は併記しない(&J)」オプションは廃止しました。
×【内蔵ブラウザー＜クイックプレビュー＞】メインウインドウに付属する内蔵ブラウザーでの「オブジェクトインスペクター」は廃止されました。「オブジェクトインスペクター」は「内蔵ブラウザー＜独立＞」でのみ有効になります。
×【StyleNoteの設定 – 内蔵ブラウザー – マウスオーバー時のオブジェクトにエフェクト】廃止されました。要素調査時に標準でONとして動作するようになりました。

StyleNote 5.11 をリリースしました。

StyleNote 5.11をリリースしました（5.10は非公開バージョンになりました）。

今回のバージョンから、スマートエディットでHTML要素名の補完ができるようになりました。これまで、要素名についてはオートコンプリートの機能を利用して補完することができましたが、よりスムーズなキー入力を目指して、スマートエディットの機能に当該機能を組み込みました。（<の入力で即座に候補が表示されますので、ぜひお試し下さい）

また、本バージョンより内蔵ブラウザーのIEバージョンを変更できるようになっています。現在のところ、IE7～IE11 Edgeモードまで選択可能です。最新のIEバージョンを選択することで、メディアクエリーや、CSS3にも対応するため、より現実的なプレビューが可能になりました。

—————————————————————–
変更箇所 ★…新機能 ●…改良/変更 ▲…バグ修正 ×…廃止
—————————————————————–
★【StyleNoteの設定】ユーザーの方からの要望を受けて、内蔵ブラウザーのIEバージョンを変更できるようになりました。
「内蔵ブラウザー – Internet Explorerのバージョン」欄からご利用下さい。
現状IE11 Edgeまで選択可能ですが、ご利用のPCにインストールされているIEのバージョンを上限に、設定して下さい。
この機能は本機能を実現するためにレジストリーにキーを１つ書き込みます（StyleNoteがレジストリーを操作する唯一の機能になります）/user
★【検索/置換】改行文字, タブ文字を検索/置換対象に含めることができるようになりました。
検索/置換ダイアログの「エスケープシーケンスを利用」をONにすると、改行=\n、タブ文字＝\tで検索/置換対象として処理されます。/user
★【スマートエディット】HTML要素の補完に対応しました。これまで、HTML要素の補完はオートコンプリートを利用する必要がありましたが、よりシームレスな補完を提供するため、スマートエディット側での実装に変更しました。

▲【ライブラリー】スニペットをD&Dでグループを変更したときの表示不具合を修正しました。
▲【ライブラリー】スニペットをD&Dでグループを変更したときにスニペットの挿入ができなくなる不具合を修正しました。
▲【ライブラリー】スニペットエディターを閉じるときに「スニペットを保存しない」を選択すると、空の項目がライブラリーに追加される不具合を修正しました。

×【StyleNoteの設定 – オートコンプリート】スマートエディットでの要素補完対応に伴い、オートコンプリートの要素登録ボタンを廃止いたしました。
×【StyleNoteの設定 – スマートエディット】「キー入力時以外にも状況に応じて候補を表示する」オプションは廃止されました（スマートエディットは、その性質から、状況に応じて適切なタイミングで表示されるべき機能のため）。

レジストリーに書き込みますか？

StyleNoteは原則、レジストリーを利用しませんが、v5.10以降で実装された「Intenet Explorerのバージョン」をご利用になる場合のみ、その必要性から、レジストリーにキーを書き込みます。

StyleNoteの設定情報の保存場所については、こちらのドキュメントをご覧下さい。

内蔵ブラウザーでメディアクエリーが効きません

StyleNoteの内蔵ブラウザーはデフォルトでIE7として動作しています。

v5.10より内蔵ブラウザーのバージョンを変更できるようになりましたので、最新のIEに変更することで、メディアクエリーにも対応できます。

詳しくはマニュアル「内蔵ブラウザーについて」をご覧下さい。

テンプレート機能はついていますか？

StyleNoteには、ファイルを新規作成した時に、自動的に特定の文字列を挿入する機能が搭載されています。

具体的には、レフトパネルの「ライブラリー」に登録した「スニペット」を、新規作成時のテンプレートとして利用することが可能です。下記の手順でご利用下さい。

　１）レフトパネルの「ライブラリー」を開き、
　　　「スニペット」の項目で右クリックして「スニペットの作成」を選択します。

　２）表示される編集ウインドウで、テンプレートにしたい内容を記入します。

　３）「初期挿入」のチェックボックスをONにして、スニペットを保存します。

以上で、テンプレートとしての登録は完了になります。
ファイルを新規作成すると、「初期挿入」に設定したスニペットが自動的に挿入されるようになります。

※「初期挿入」に設定したスニペットが複数ある場合、新規作成時に挿入するスニペットを選択するダイアログが表示されます。

ステータスバーの概要

StyleNoteのウインドウ下部にあるステータスバーで、StyleNoteの各種ステータスを確認できます。

ステータスバーの項目（左から順に）

名称	解説
ライセンス認証欄	ライセンス認証の状態を表示します。ご利用のWEBサイトにリンクを設置して頂けましたら、認証済みにすることできます。詳しくはこちらのドキュメントをご覧下さい。
フォルダパス	ファイルセレクターで表示中のフォルダーを表示します。ダブルクリックでエクスプローラーでフォルダを開くことができます。
カラーテーマ	エディターに適用されているカラーテーマを表示しています。複数のカラーテーマファイルをお持ちの場合、クリックで簡単に切替ができます。
エディター表示モード	エディターが適用中の構文強調用の表示モードです。デフォルトでは、ファイル拡張子にあわせて自動的に選択されますが、クリックで簡単に変更することができます。
読込時の文字コード	現在編集中のファイルをStyleNoteで開いたときに適用した文字コードを表示しています。ファイルを開いた時に文字化けした場合は、読込時の文字コード欄をクリックして、任意の文字コードでファイルを開き直すことができます。 ※読込時の文字コードは通常、自動判別され、適切な文字コードで読み込まれます。しかし、日本語が含まれないファイル等、判別できないファイルが開かれた場合は「StyleNoteの設定 – 保存と読込」の「読込時の文字コード設定」で指定した文字コードが適用されます。
保存時の文字コード	現在編集中のファイルを次に保存する時に適用する文字コードを表示しています。この値は通常、「StyleNoteの設定 – 保存と読込」の「保存時の文字コード設定」で指定した文字コードが自動的に設定されます。何らかの理由でファイルの文字コードを変更されたい場合は、保存時の文字コード欄をクリックして、次回保存時の文字コードを手動で変更することができます。変更後は、保存動作を行うことで、実際にファイルの文字コードが変更されます。
空欄	現在利用されておりませんが、将来のバージョンで改行コードの設定欄として利用される予定です。
NUM	NumLockの状態を表します。
CAPS	CAPSキーの状態を表します。
編集	現在「編集」以外の表示を行いません。
行：桁：	キャレット位置の行数と桁数を表示します。クリックして特定の行桁位置に移動できます。
スイッチアイコン	!DOCTYPEスイッチを変更できます。

オートコンプリートはどこから設定できますか？

StyleNoteには入力補完機能として、スマートエディット機能とオートコンプリート機能が搭載されています。スマートエディットとオートコンプリートの機能的な違いについては、こちらのQ&Aをご覧ください。

オートコンプリートの設定は、下記の場所をご覧ください。

　—————
　▼設定場所
　—————
【設定 – StyleNoteの設定 – 編集支援 – オートコンプリート】

FTP機能はついていますか？

FTP機能は搭載しておりません。
今後もStyleNote本体にFTP機能を実装する予定はありません。

StyleNote 5.09 をリリースしました。

今年も宜しくお願い致しますm(__)m
StyleNote 5.09をリリースしました。

修正したい箇所がまだありますが、いつ公開できるかわからないので、とりあえず現状で公開します。

色々と要望を頂いております。皆様ありがとうございます。
掲示板でご報告いただいたものですぐに対応できるものは対応しました。
まだ対応できていないものは引き続き、お待ち頂ければと思います。

—————————————————————–
変更箇所 ★…新機能 ●…改良/変更 ▲…バグ修正 ×…廃止
—————————————————————–
▲【zen-coding】HTML要素の展開時に、一部の属性値が不完全に展開される不具合を修正しました。
▲【zen-coding】HTML要素の展開動作が一部のスニペットで動作しない不具合を修正しました。

●【カラーネーム】掲示板でご報告頂いたカラーネームと挿入されるコードに不備について修正いたしました。Umeusaさん、検証頂きありがとうございました。大変助かりました！/user
●【エディター画面のスクロール】要望を頂いたスクロールバーの▼▲ボタンでのスクロール量を1行に変更しました。マウスホイールによるスクロール量は従来通り「エディターの設定」の設定値が適用されます/user
●【クリップボード取得処理】掲示板でご報告いただいたクリップボード取得時にエラーメッセージが表示される件ですが、処理を見なおしてみました。改善されているか自信がありませんが、いかがでしょうか…。/user
●【ファイルタブ】右クリックメニュー項目のアクセラレータキーに重複がありましたので、修正いたしました。また、その他の一部のキーにつきましても少し整理しました。/user

StyleNote 5.08 をリリースしました。

StyleNote 5.08をリリースしました。

zen-codingの動作に不具合がありましたので、修正しました。また、emmetのベンダープレフィックスにとりあえず対応しました。その他、各種調整＆新機能追加を行っていますので、バージョンアップをお願いいたします。

—————————————————————–
変更箇所 ★…新機能 ●…改良/変更 ▲…バグ修正 ×…廃止
—————————————————————–
★【マルチヒストリー】クリップボード履歴, タグの挿入履歴を直近10個まで常に表示できるマルチヒストリー機能を追加しました。通常時はクリップ履歴を表示します。Shiftキーの押下時にタグの挿入履歴に切り替わります。
★【ファイルセレクター】「StyleNoteの設定 – プロジェクト管理 – ルートフォルダー」で設定したフォルダと合致するフォルダ項目の右端に、ルートフォルダとして認識されていることを示すアイコンを表示するようにしました。

●【クリップボード履歴】クリップボード取得処理を見直しました。取得失敗エラーの一部を改善しましたが、まだ失敗する症状があります。継続的に改善に努めます/user
●【クリップボード履歴】履歴にクリップできる文字列の最大長を拡張しました。
●【クリップボード履歴】メニューの位置を「ツール」メニューから「表示」メニューに移動しました
●【クリップボード履歴】メニュー内の「履歴を監視」オプションは、「表示 – クリップボード履歴」ウインドウ内に移動しました。
●【アウトライン】「コメント」モードでは、コメントタグの中身だけをリストに表示するように変更しました。

▲【Zen-Coding】HTML要素の展開時に、不要な文字列を巻き込んで展開されてしまう不具合を修正しました。
▲【Zen-Coding】要素の繰り返し出力（演算子: *）が正しく解釈されなくなっていた不具合を修正しました。
▲【Zen-Coding】動作上の不具合を修正しました。
▲【Zen-Coding】CSSの省略形の展開が、Emmetの「vendor prefix」に対応しました。
▲【ファイルセレクター】特定の条件下でファイルセレクターの項目が再描画されない不具合を修正しました。

×【クリップボード履歴】メニュー内にクリップログを表示する機能は廃止しました（代替機能としてマルチヒストリー機能をご利用下さい）。
×【ツール – JavaScript関数の取得】廃止しました。本機能は「アウトライン」

▲細かい修正

イメージマップの作成方法がわかりません

StyleNoteではイメージマップ（クリッカブルマップ）の作成に対応しています。

【コーディング – オブジェクトの埋込み – イメージマップの作成】又は、
標準ツールバーの「蝶」のアイコンの▼ボタンから、【イメージマップの作成】を実行します。

クリック領域は「四角形」「円」「多角形」の3種類を作成できます。

ツールバーから目的の形状を選択し、画像の上で左クリックすると領域選択を開始できます。
再度左クリックすることで、領域の終点を確定できます。

多角形については、各頂点を左クリックで確定してき、最後に右クリックすることで始点と終点を結んで領域を確定できます。

ショートカットをカスタマイズしたい

StyleNoteではショートカットキーをカスタマイズできます。

設定メニューの「ショートカットの設定」をお試し下さい。

マルチヒストリー機能（v5.08+）

「クリップボード」の履歴と、「StyleNoteの機能を利用して挿入したHTML/CSS」の履歴を管理する機能が、マルチヒストリーです。

表示(V)
マルチヒストリー(F)

クリップボード履歴を利用する
マルチヒストリーは通常時は、クリップボードの履歴を表示します。直近10個のクリップが左側から順に表示されます。クリックすると、そのクリップがエディター画面に挿入される仕組みです。

マルチヒストリー上の履歴表示数は10個ですが、実際には30個までストックされ、利用することができます。マルチヒストリーに表示されない履歴は、「クリップボード履歴」機能を表示させることで確認できます。

表示(V)
クリップボード履歴(K)

挿入履歴を利用する
マルチヒストリーは、Shiftキーを押している間は「挿入履歴」に切り替わります。

挿入履歴には、タグアナライザーや各種挿入ダイアログ等のStyleNoteの機能を利用して挿入されたHTML要素や、CSSルールの挿入履歴が表示されます。

各履歴にはアイコンが表示されます。HTML要素の履歴は<>アイコンが表示され、CSS属性の履歴は{}アイコンが表示されます(上図)。

挿入履歴を再挿入する場合には、キャレット位置をふさわしい場所に移動させる必要があります。

履歴の種類	キャレット位置
HTML要素の履歴 <>アイコン	HTML要素の中にキャレットがある状態で実行すると、その要素に対して適切な形で値が挿入されます。
CSS属性の履歴 {}アイコン	CSSセレクターの中にキャレットがある状態で実行することで、そのCSSルールに対して適切な形で値が挿入されます。

「適切な形で値が挿入」されるとは
キャレット位置にダイレクトに挿入されるわけではなく、既に同一の値が記述されている場合は、その値を上書きし、値が記述されていない場合は、文法を壊さない形で末尾に追記するように挿入されます。

StyleNote 5.07 をリリースしました。

StyleNote 5.07を公開しました。

気づいた不具合を修正していますので、バージョンアップをお願い致します。

新機能として「ルートフォルダー」の登録オプションと、ローカルサーバーによるプレビュー機能を新たに実装しました。Apache等のHTTPサーバーが稼働中の環境では、localhostや特定のIPアドレスによるプレビューを、内蔵・外部ブラウザーで実行できるようになっています。

—————————————————————–
変更箇所 ★…新機能 ●…改良/変更 ▲…バグ修正 ×…廃止
—————————————————————–
★【StyleNoteの設定 – プレビュー – ローカルサーバー】内蔵ブラウザー/外部ブラウザーともに、ローカルサーバーでのプレビューができるようになりました。Apache等のHTTPサーバーをローカル環境で稼働中の場合、IPアドレスまたはlocalhostによるプレビューが可能になります。この機能を利用すると、PHPやCGIの動作確認もStyleNoteの内蔵ブラウザーで確認できるようになります。
★【オブジェクトインスペクター】「エレメントオーダービュー」機能を追加しました。内蔵ブラウザー上で、要素のDOMノード構造の階層状況を確認できます。エディター画面には既に実装済みの同機能の内蔵ブラウザー版です。
★【StyleNoteの設定 – プレビュー – 外部ブラウザー】外部ブラウザーに起動オプションを渡せるようになりました。
★【StyleNoteの設定 – 機能 – プロジェクト管理】「ルートフォルダーの自動認識」オプションを実装しました。予めルートフォルダーとして認識するフォルダー名を登録しておくことで、ローカルサーバーによるプレビュー機能や、リンクチェック時のルートパスによる検査等が行えるようになります。ルートフォルダー名を登録するだけで、自動的にWEBサイトのルートを特定できるような、自動認識型のプロジェクト管理機能の実装を目指しています。

●【ファイルセレクターの設定】「インデックスファイルの設定」は「StyleNoteの設定 – 機能 – プロジェクト管理」に移動し、名称を「インデックスファイルの自動認識」に変更しました。。
●【オブジェクトインスペクター】「レイアウト」機能を強化しました。Offset, Element, Borderのサイズも表示するようにしました。ビジュアルはIE11の開発者ツールに合わせています。
●その他細かい改良

▲【内蔵プレビュー】動作上の不具合を修正しました。
▲その他細かいバグの修正

×【StyleNoteの設定 – プレビュー – 外部ブラウザー】「プレビュー方法」の「一時ファイルを作成して閲覧」オプションは廃止されました。内蔵ブラウザーのリアルタイムプレビューをご利用下さい。

XHTMLで記述したい

StyleNoteでは、タグの挿入書式をHTMLとXHTMLの2種類から選ぶことができます。

デフォルトではHTMLモードですが、XHTMLの書式を適用させたい場合は、
【StyleNoteの設定 – コーディング – HTML】から、【挿入書式】にて【XHTMLモード】をお選び下さい。

この時【自動判別】モードを選択すると、編集中のドキュメントを自動判別し、
XHTML文書の場合は自動的にXHTMLモードを適用させることができます。

ファイルセレクターの概要

ファイルを簡単に開くことができる機能が「ファイルセレクター」です。StyleNoteのメインウインドウの左側に表示され、選択したフォルダ内のファイルが一覧表示されます。

ビジュアルはツリー式ではなく、リストボックスタイプを採用しています。ファイルをダブルクリックすると、即座にエディタ上にファイルがロードされます。フォルダをダブルクリックすると、表示フォルダが移動します。Windowsエクスプローラーの基本操作と同様の動作になります。

表示(V)
ファイルセレクター(F)

ファイルのインクリメンタルサーチ
ファイルセレクター上部の検索窓にキーワードを入力すると、ファイル名を対象にしたインクリメンタルサーチが有効になります。キーワード欄に文字を入力するたびに即座に検索がかかり、ヒットしたファイルが絞りこまれます。検索時に大文字と小文字は区別されません。

通常は、表示しているフォルダ内が検索対象になりますが、これを、下位フォルダも含めて検索対象に含めることができます。これを、DIGモードと呼びます。

通常の検索モードから、DIGモードに変更するには、検索窓に「dig:」と入力します。DIGモードが設定されると、検索窓のアイコンがに変わります。

DIGモード時には、検索窓の下に検索起点フォルダが表示されます。このフォルダ配下のデータが全て検索されることになります。DIGモードを解除する場合は、検索窓の×ボタンをクリックするか、検索起点フォルダのパスをクリックしてください。

DIGモード対象フォルダ内の階層が深かったり、ファイル数が多いとサーチに時間がかかります。ご注意下さい。

大きい表示と小さい表示

ファイルセレクターでは項目の表示モードが2種類用意されています。

	表示できる内容
小さい表示	ファイル名, ファイルアイコン, ロックモード, ナビゲーターアイコン, 文字コード
大きい表示	小さい表示モードの情報に加えて、下記の項目を表示できます。画像サムネイル, 更新日, ファイルサイズ, ファイルの種類

ファイルセレクター上部ツールバーの右端のボタン
表示スタイル

文字コードを表示する
WEBサイトを構成するファイルの文字コードは重要です。想定する文字コードと異なる文字コードでファイルが保存されている場合、WEBアプリケーションやデータベースとの連携時に予期せぬエラーや、文字化けが発生する可能性があります。

StyleNoteではファイルの文字コード確認作業を軽減させることを目的として、ファイルセレクターに文字コードラベルを表示できます。これにより、専用のアプリケーションを使用せずに、ファイルの文字コードをファイルセレクター上で一覧表示でき、確認することができるようになります。

設定(O)
ファイルセレクターの設定(F)
ファイルセレクターの設定(F)
表示設定タブ
表示するお知らせ情報
文字コード情報の表示

StyleNote 5.06 をリリースしました。

StyleNote 5.06をリリースしました。

要望を頂いていた「選択」メニュー内の項目の動作改良と機能追加を行っています。単体タグや親タグを連続的に選択できるようになっています。ぜひショートカットキーを割り当ててご利用下さい。

また「StyleNoteの設定 – 内蔵ブラウザー」に「ダウンロードと実行の管理」というオプションを追加しました。このオプションにより、内蔵ブラウザーの挙動をより詳細に制御できるようになりました。とくに「JavaScriptを無視する」オプションをオンにすることで、Google AnalyticsやFACEBOOKの埋め込みコードにより、ブラウザーがフリーズする現象を回避できるようになります（詳しくはこちら）。

※本バージョンからライセンス認証済時の「拡張機能」の提供が開始されています。第一弾は上記「ダウンロードと実行の管理」オプションになります。拡張機能に関する詳細はこちらをご覧下さい。

—————————————————————–
変更箇所 ★…新機能 ●…改良/変更 ▲…バグ修正 ×…廃止
—————————————————————–
★【拡張機能】本バージョンより、ライセンス認証済時に利用できる「拡張機能」の提供を開始しました。

★【StyleNoteの設定 – 内蔵ブラウザー】「ダウンロードと実行の管理】オプションを追加しました。本機能は認証済時のみ利用可能な拡張機能です。
★【選択 – 属性値を選択】キャレットが属性値上にあるときに、属性値を選択できるようになりました。/user
★【選択 – 次のタグ全体を選択】キャレット位置よりも後に現れるタグ全体を選択できるようになりました。/user
★【選択 – 前のタグ全体を選択】キャレット位置よりも前に現れるタグ全体を選択できるようになりました。/user
★【選択 – 親要素を選択】これまで項目は存在していましたが、利用できなかった「親要素を選択」機能が使えるようになりました。
★【選択 – 親要素を取り除く】これまで項目は存在していましたが、利用できなかった「親要素を取り除く」機能が使えるようになりました。

●【選択 – タグ単体を選択】連続実行時の動作を改良しました。既にタグ単体が選択された状態で、再度コマンドを実行したときには「次のタグ単体を選択」を実行します。本コマンドの連続実行で、連続的にタグを移動できます。/user
●【選択 – タグ全体を選択】連続実行時の動作を改良しました。既にタグ全体が選択された状態で、再度コマンドを実行したときには「次のタグ全体を選択」を実行します。本コマンドの連続実行で、連続的にタグを移動できます。/user
●【ファイルセレクター】表示スタイルが「小さい表示」のときのファイル取得処理を最適化しました。特定の条件下ではこれまでよりも高速にファイルが表示されます。
●【カラーコードの取得】16進数コード欄へのカラーコード(#xxxxxx形式)の貼り付けに対応しました。/user
●【ライセンス認証】ライセンス認証失敗時の定期自動再認証処理を行わないようにしました。自動認証は起動時に一度だけ、行われます。認証に失敗した場合は【ライセンス履行の申告】ダイアログから、手動での再認証をお願いいたします。
●【ライセンス履行の申告】確認手続きの内部処理を改良しました。認証失敗時に手動で再認証する場合に、以前の入力内容を引き継ぐようにしました。/user

内蔵ブラウザーがフリーズします

内蔵ブラウザーを利用していると、特定の条件下でフリーズする現象が発生します。
現在のところ、下記の項目を含むHTMLファイルをプレビューするとフリーズすることが確認されています。

Google Analyticsのトラッキングコードを含むHTMLファイル
FACEBOOKボタンのコードを含むHTMLファイル

この現象は、StyleNoteと同様にTWebBrowserコンポーネントを利用するアプリで同様に発生するようです。

対症療法的ですが、StyleNote内蔵ブラウザーでJavaScriptをオフにするとフリーズが発生しなくなります。下記の手順をお試し下さい。

内蔵ブラウザーのJavaScriptをオフにする方法
「StyleNoteの設定 – 内蔵ブラウザー」の「ダウンロートと実行の管理」の設定オプションの中の「JavaScriptを無視する」にチェックをつけます。

※本機能は拡張機能です。拡張機能についてはこちらをご覧下さい。

内蔵ブラウザーの概要はこちらのマニュアルをご覧下さい。

ライセンス認証の特典拡張機能の提供

StyleNoteはv5.00からリンクウェアとなり、これを確認するためv5.02から「ライセンス履行の申告」機能が導入されています。

この「ライセンス履行の申告」機能にて「ライセンス認証済」と確認されたStyleNoteでは「拡張機能」が提供されています（v5.06より提供開始）。

ライセンス未認証と認証済時のStyleNoteの挙動について
StyleNoteはライセンス未認証の状態でも利用可能です。また、ライセンス確認機能自体を「StyleNoteの設定」からオフにすることもできます。この状態においても、StyleNoteの編集機能が制限されることはありません。

StyleNoteはライセンス未認証の環境において機能制限は行いませんが、ライセンス認証済の環境下において機能拡張を行います。既存機能の制限は一切行わずに、将来のバージョンで特定の機能が拡張機能として提供されていく予定です。

ライセンス認証済の場合、ステータスバーにが表示されます（下図参照）。

現時点で提供されている拡張機能
拡張されている機能にはラベルが付近に表示され、それが拡張機能であることを示します。このラベルが表示されている機能は、ライセンス認証済のときのみ、有効に動作します。

ライセンス認証済のStyleNoteで提供される拡張機能は、下記の通りです。

バージョン	ライセンス認証に関する変更・内容
5.00	リンクウェアになりました。
5.01	特になし
5.02	「ライセンス履行の申告」機能の提供を開始しました。
5.03 – 5.05	特になし
5.06	「拡張機能」の提供を開始しました。「プレビュー/ブラウザー設定 – 内蔵ブラウザー – エンジン設定 – ダウンロードと実行の管理」を拡張
5.07	「プレビュー/ブラウザー設定 – 内蔵ブラウザー – ローカルサーバー」を拡張
5.08 – 5.13	特になし
5.14	「プレビュー/ブラウザー設定 – 内蔵ブラウザー – ユーザーエージェント」を拡張。
5.15 – 5.18	特になし
5.19	「HTMLタグの整合性の検証」の「タグの交差エラーの検出」機能および「修正ガイドライン」機能を拡張。

お使いのStyleNoteで提供されている拡張機能に関する詳細は、「ヘルプ – ライセンス履行の申告」よりご確認頂けます。

ライセンスおよびライセンス認証に関するその他の情報
ライセンス認証を行う方法はこちらをご覧下さい。
リンクウェアに関する詳細はこちらをご覧下さい。
ライセンス認証に関するその他の情報はこちらをご覧下さい。

StyleNoteのインストールと簡単な使い方

StyleNoteのインストール方法です。

動作環境と推奨モニター
StyleNoteは、公式にはWindows 10で動作を確認していますが、8.1, Vista, XPでも動作する可能性があります。

StyleNoteは、エディター画面を囲うように最大4つの作業ペインと、フローティング型のプレビューウインドウを表示できます。これらを全て表示して、快適にStyleNoteを利用するには、解像度の高いディスプレイか、またはデュアルディスプレイ環境でのご利用を推奨します。

ダウンロードとインストール
公式サイトのダウンロードページから、sn5xx.zipをダウンロードしてください。ダウンロードしたファイルはZIP形式で圧縮されていますので、解凍ソフトを利用してファイルを解凍して下さい。（解凍ソフトをお持ちでない方は、窓の杜ライブラリ等を参考に、解凍ソフトを別途インストールして下さい。）

sn5xx.zipから解凍されるファイルを適当な場所に保存したら、インストール完了です。

ファイルを開いて編集
sn5.exeをダブルクリックすると、StyleNoteが起動します。

起動直後からすぐに編集を始められますが、既に存在するHTMLファイルを編集する場合は、レフトパネルにある「ファイルセレクター」から、項目をダブルクリックして開くことができます。ファイルセレクターに表示するフォルダは、ファイルセレクター上部に設置されているフォルダアイコンから変更できます。

ファイルを開くとファイルバーにタブが追加されます。StyleNoteは複数のファイルをタブで管理しているため、複数のファイルを同時に編集することができます。一度開いたファイルは、タブをクリックして切り替えながら作業を進めて下さい。

参考動画

StyleNoteを初めて触る方にわかりやすい動画です！

提供: Ginba.さん。WEBSITE

起動時に「スタイルインスペクタを定義する.siファイルが読み込めませんでした」と表示される

StyleNoteのzipファイルを解凍すると、「resources\inspector」というフォルダの中に、
「css2.1.si」と「css3.si」というファイルが見つかります。

このファイルが起動時に見つからないと、このようなエラーが表示されます。
下記をお試し下さい。

resources/inspectorフォルダが生成されていない
sn5xx.zipを解凍したファイルの中に、「resources/inspector」フォルダが存在するかご確認下さい。このフォルダが存在しない場合、利用した解凍ソフトがフォルダ構成を復元しない設定になっている可能性があります。

ご利用になっている解凍ソフトのオプションを確認するか、異なる解凍ソフトをお試し下さい。

また「resources\inspector」というフォルダがあり、siファイルも正しく解凍されている場合は、何らかの影響で設定がおかしくなっているかもしれません。

メインメニューの【設定 – StyleNoteの設定 – スタイルインスペクター】より、【css2.1】または【css3】を選択し直して保存していただくと解消する可能性があります。

ファイルを開いたときのタブの追加位置を変更できますか？

StyleNoteで新しいファイルを開くと、デフォルトではファイルバーの末尾にタブが表示されます。
このときの新規タブの追加位置を、変更することができます。

　▼設定場所
【設定 – ファイルバーとサブツールバーの設定】から【ファイルタブの追加位置】

ファイルバーとサブツールバーの設定の詳細はこちらをご覧下さい。

スマートエディット（入力補完機能）の概要

文字入力状況に応じて、続く文字列を予想して、適切な候補を表示する機能です。表示された候補を選択することで、最後まで文字列を入力せずに、コーディングを進めていくことができます。

下記の場所から、ONとOFFを切り替えられます。

設定(O)
StyleNoteの設定(A)
編集
スマートエディット
有効のチェックボックス

スマートエディットはHTMLとCSSに対して動作、前後の文脈に応じて予測候補を表示します。それぞれ起動条件は次の通りです。

起動条件

補完目的	起動条件	入力例	動作内容
HTML要素の補完	HTMLタグの入力を新しく始める	<を入力する	要素の一覧が表示されます。 ※この機能はv5.09まで、スマートエディットではなく、オートコンプリートとして動作していましたが、v5.10よりスマートエディットの機能に組み込まれました。
HTML属性の補完	HTMLタグ内で半角スペースを挿入する	<font の後で半角スペースを挿入する	そのHTML要素で利用可能な属性が一覧表示されます。
HTML属性値の補完	HTMLタグ内で属性値を入力する	<font size=””の、属性値””の中で文字を入力する	その属性で利用可能な属性値の一覧が表示されます。
CSSセレクターの補完	CSSセレクターの入力を開始する	.を入力する	入力中のファイルに記述されている全てのCSSセレクターから、合致する候補が表示されます。例えば、下記のようなCSSセレクターが記述されているときに、「.t」と入力すると、「.text」と「.text-blue」が入力候補のセレクターとして表示されます。 .text{ … } .align{ … } .text-blue{ … } .t
CSS属性の補完	{ } の中で属性を入力する STYLE=””の中で属性を入力する	tを入力する	tで始まる属性名の候補が入力候補として表示されます。
CSS属性値の補完	{ attribute:; } 又は STYLE=”attribute:;”の :;の間で属性値を入力する	text-alignの属性値としてr を入力する	「right」が入力候補として表示されます。

動作オプション
スマートエディットの動作オプションは次の通りです。

設定(O)
StyleNoteの設定(A)
編集
スマートエディット

オプション名	動作内容	入力例	実行結果
終了要素の自動補完	HTML開始要素の新規入力で、終了要素を自動補完します	<div と入力し、半角スペースを入力する	<div ></div> 太字部分が補完されます。
{}の入力を支援する	{を入力すると、自動的に}を補完します。	{ を入力する	{ } 太字部分が補完されます。
/**/の入力を支援する	/を入力すると、自動的に/を補完します。	/* を入力する	/* */ 太字部分が補完されます。
/* + Enter で複数行コメントを出力	/*を入力して、Enterキーを押して改行すると、自動的に複数行形式のコメントを補完します。	/* を入力してEnterキーを押す	/*————————- *————————–/** 太字部分が補完されます。
CSSの入力で;の入力を支援する	CSS属性を入力後、:を入力すると;を補完します	attribute: を入力する	attribute:; 太字部分が補完されます。
CSS属性値の補完で改行する	スマートエディットを利用して属性値を補完した際に、自動的に改行して、次の属性の入力を新しい行から始められるようにします。	CSS属性値を候補リストから決定する	候補リストから選択して属性値が入力され、自動的に改行します。

ライセンス履行の申告　認証に失敗します（リンク設置）

ライセンス履行の申告の仕組みについてはこちらをご覧下さい。

ご利用のWEBサイトにリンクを正しくリンクを設置している場合でも、状況によってはライセンス認証に失敗します。下記の状況をご確認下さい。

設定ファイルをクラウドストレージ等で共有し、複数のPCでStyleNoteをご利用の方
サイトオーナー確認時にアップロードしていただくファイルは、ライセンス履行の申告を実行したPC固有のファイルとなります。そのため、設定ファイルを共有化している場合でも、別のPCでStyleNoteを起動した場合は、再度サイトオーナーの確認が必要になります。

新しいPCで認証に失敗した場合は、再度そのPCからライセンス履行の申告を実行して下さい。
※2台のPCでStyleNoteをご利用の場合、結果として、認証用のファイルがサーバーに2種類アップロードされている状況になります。

ライセンス履行の申告認証に失敗します（リンク解除権利購入者向け）

ライセンス履行の申告の仕組みについてはこちらをご覧下さい。

リンク解除権利を購入された方で、ライセンス認証に失敗する場合、サーバーとの接続時に問題が発生している可能性があります。一度、下記の手順をお試し下さい。

認証失敗後の復旧方法
【ライセンス履行の申告】ダイアログから改めて情報を入力して頂き、（テスト認証で失敗した場合でも）StyleNoteを再起動して、起動時の自動認証結果をご確認下さい。

StyleNote再起動後の認証では成功する場合があります。

　※認証失敗後に再度【ライセンス履行の申告】ダイアログを開くと、前回の入力内容が全てクリアされてしまいます。確実に正しい内容をご記入いただいているにも関わらず認証失敗となる場合は、StyleNoteを再起動して自動再認証の結果をご確認下さい。

右端で折り返す方法

StyleNoteでは、ワードラップを有効して、文字を右端で折り返すことができます。

ウインドウ右端で折り返す
編集メニューの「右端で折り返し」を実行して下さい。

指定文字数で折り返す
「設定 – エディターの設定」から、「ワードラップ」の項から設定できます。

StyleNote 5.05 をリリースしました。

StyleNote 5.05をリリースしました（5.04は事情により非公開バージョンとなりました）。

本バージョンから、【内蔵ブラウザー】がリアルタイムプレビューに対応しました。文字を入力すると、リアルタイムにプレビューへ反映されます。保存前のファイルにも有効です。デフォルトではオフの機能です。【内蔵ブラウザー】についてはマニュアルを追加したので、こちらもご覧下さい。

もう一つの新機能は、ファイルセレクター上で、ファイルの文字コードを表示できるようにオプションを追加しました。こんな感じ↓で、ファイルの各文字コードをささっと確認できます。

文字コードの表示がないファイルは、正確に文字コードを特定できなかったファイルです。日本語が含まれないファイルも判別不可になります。この機能もデフォルトではオフになっています。ファイルセレクターの設定からオンに変更できますので、お試し下さい。

■2014/06/30 StyleNote 5.05
※5.04は非公開バージョンになりました。5.03 -> 5.05 へのバージョンアップになります。
—————————————————————–
変更箇所 ★…新機能 ●…改良/変更 ▲…バグ修正 ×…廃止
—————————————————————–
★【内蔵ブラウザー】文字入力に応じて随時プレビューに編集内容を反映させる「リアルタイムプレビュー」に対応しました。デフォルトではオフの機能です。「StyleNoteの設定 -> 内蔵ブラウザー」からONできます。ご利用下さい。/user
★【エディタ設定】標準カラーテーマに「Daytime」「KidsPink」「Matrix」「Paraiso」を追加しました。
★【ファイルセレクター】ファイルの文字コードを、各ファイル名の右端に表示するオプションを追加しました。日本語が含まれない等の理由により判別結果が不明の場合は表示されません。デフォルトではオフの機能です。「ファイルセレクターの設定 – 表示設定 – 文字コード情報の表示」からONにできます。
★【ツールパレット】「レフトパネルを表示」「ツールパネルを表示」「内蔵ブラウザー＜クイックプレビュー＞を表示」の各ボタンを追加しました。

●【名称変更】キャレット位置のHTMLタグ構造を表示する機能「キャレット位置情報」機能の名称を【エレメントオーダービュー】に変更しました。
●【内蔵ブラウザー＜独立プレビュー＞】UIを改良しました。
●【内蔵ブラウザー＜クイックプレビュー＞】ツールバー左端の【横幅を調整する】ボタンを、右端の設定メニューに移動しました。
●【内蔵ブラウザー】メモリーリークを解消しました。

▲【エレメントオーダービュー】前バージョンにて内部プログラムを最適化した際に、階層状況を正常に表示できない不具合がありましたので、修正しました。
▲【オブジェクトインスペクター】「要素調査」実行時にエラーが表示され、動作していなかった不具合を修正しました。/user

内蔵ブラウザーの概要

内蔵ブラウザーとは
StyleNoteに搭載されているブラウザーを、StyleNoteでは内蔵ブラウザーと呼びます。内蔵ブラウザーを利用することで、プレビューを確認しながら、HTML/CSSファイルの編集を行うことができます。内蔵ブラウザーのレンダリングエンジンは、PCにインストールされているIE（デフォルトではIE7で動作。変更方法はこちら）を利用しています。

StyleNoteには2種類の内蔵ブラウザーが搭載されていますので、用途に応じて使い分けることができます。

名称	解説
内蔵ブラウザー＜独立＞	個別ウインドウで表示される内蔵ブラウザーです。エディターウインドウと切り離されているため、デュアルディスプレー環境下では、それぞれのモニターにプレビューとエディタウインドウを分けて表示できます。
内蔵ブラウザー＜クイックプレビュー＞	エディターウインドウ内に表示されるブラウザーです。表示結果をブラウザーパネルの横幅に合わせて自動的に縮小することができるため、簡易的な描画確認に使用することができます。独立プレビューとクイックプレビューを同時に利用することもできます。

それぞれ、下記の場所から表示・非表示を切り替えられます。

表示(V)
内蔵ブラウウザー＜クイックプレビュー＞

表示(V)
内蔵ブラウウザー＜独立＞

StyleNoteの内蔵ブラウザーの特徴
StyleNoteの内蔵ブラウザーには下記の特徴があります。

内蔵ブラウザーとエディターが連携することで、プレビューをクリックしたときに、該当するHTMLソースにキャレットを移動できます
エディターで入力した内容をリアルタイムに反映できる「リアルタイムプレビュー」機能を利用できます
プレビューに表示された要素のサイズやマージンを調査できる「オブジェクトインスペクター」機能を搭載しています
ユーザーエージェントを自由に変更できます

リアルタイムプレビューについて（5.04+）
StyleNoteの内蔵ブラウザーは、デフォルトでファイル保存時に自動的に更新されますが、キー入力に応じてリアルタイムに更新することもできます。ファイルを保存することなく変更結果を確認できるようになります。

リアルタイムプレビューは、ロックモード時に、関連ファイルを編集している際は動作しません（編集しているファイルとプレビューに表示しているファイルが一致している場合にのみ動作します）。ロックモードに関する詳細はこちらをご覧下さい。

リアルタイムプレビューは下記の場所から有効にできます。

設定(O)
プレビュー/ブラウザーの設定(P)
内蔵ブラウザー
動作設定
リアルタイムプレビュー

エディターとの連携について
内蔵ブラウザーの任意の位置をクリックすると、エディター画面のキャレットが、クリックした要素の位置に移動します。この機能により、プレビュー画面から編集したい箇所に簡単に移動できます。デフォルトでオンの機能です。

エディター連携機能等に関するオプションは、下記の場所から変更にできます。

設定(O)
プレビュー/ブラウザーの設定(P)
内蔵ブラウザー
動作設定
その他

オブジェクトインスペクターについて
内蔵ブラウザーには、オブジェクトインスペクター機能が付属しています。オブジェクトインスペクターを利用すると、プレビュー上の要素をクリックして、その要素の marginやpadding等を調査できるようになります。

エレメントオーダービュー(v5.07+)
オブジェクトインスペクターの要素調査実行時に、マウスカーソル下の要素の階層状況を確認できます（下図）。

内部処理的にはMSHTMLのインターフェースを利用してDOMツリー内のノード構造を遡って解析し、ノード階層を表示します。これの実行結果はInternet Explorerの「F12 開発者ツール」で取得できるノード階層のリストと同様（のはず）です。

「エレメントオーダービュー」はエディター画面にも搭載されています(下図)。エディター画面のエレメントオーダービューの内部処理は、StyleNoteが独自に実装するインターフェースを利用して、DOMツリーのノード構造を解析した結果を表示しています。

HTMLソースからDOMノードを解析する場合はエディター画面のエレメントオーダービューを利用し、ビジュアル（WEBブラウザー）画面からDOMノードを解析する場合は内蔵ブラウザーのエレメントオーダービュー機能を利用して下さい。

JavaScript、動画、BGM等の制御について
内蔵ブラウザーでは、下記の項目についてON/OFFをコントロールできます。

画像の読込の許可
音楽の再生の許可
ビデオの再生の許可
JavaScriptを無視
Java Appletを無視
オフラインモードで実行
キャッシュを無効
ダイアログ抑止（スクリプトエラー等を表示しません）

内蔵ブラウザーがフリーズする方は、「JavaScriptを無視」をONにすることで、フリーズを回避できます。
ただしこの方法では、JavaScriptの実行を停止させるため、その他のスクリプトに対しても影響が及びます。

※環境により、「ダイアログ抑止」はJavaScript自体を無効にすることがあるようです。

設定(O)
プレビュー/ブラウザーの設定(P)
内蔵ブラウザー
エンジン設定
ダウンロードと実行の管理

ローカルサーバーによるプレビュー(v5.07+)
Apach等のサーバーをローカル環境で稼働されている場合、StyleNoteは内蔵ブラウザー/外部ブラウザーで localhost を参照してのプレビューを実行できます。

設定(O)
プレビュー/ブラウザーの設定(P)
内蔵ブラウザー
ローカルサーバー設定

内蔵ブラウザーのIEバージョンの変更(v5.10+)
StyleNoteの内蔵ブラウザーはInternet Explowerを利用するTWebBrowserコンポーネントを利用しています。このコンポーネントはデフォルトではIE7として動作しており、この設定を変更するにはレジストリーにキーを書き込む必要があります。

StyleNoteでは v5.10 よりこの設定を環境設定から変更できます。下記の場所よりご利用下さい。

レジストリーを変更するため、ご利用は自己責任でお願い致します。

設定(O)
プレビュー/ブラウザーの設定(P)
内蔵ブラウザー
エンジン設定
Internet Explorerのバージョン

ユーザーエージェントの変更(v5.14+)
StyleNoteでは内蔵ブラウザーのユーザーエージェントを自由に変更できます。「プレビュー/ブラウザー設定」にて利用するUAを事前に登録しておき、独立プレビューのツールバーから、切り替えて使用します。

StyleNoteには2種類のプレビュー画面がありますが、個別にUAを設定することはできません。UAの変更は内蔵ブラウザー全体に適用されます。

設定(O)
プレビュー/ブラウザーの設定(P)
内蔵ブラウザー
ユーザーエージェント

【ダイアログ】StyleNoteの設定（保存と読込）

設定(O)
StyleNoteの設定(E)
全般カテゴリー
保存と読込カテゴリー

項目の解説
全般
保存と読込
保存時の文字コード設定

項目	解説
新しいファイルを保存するときは….で保存する	新規作成したファイルを保存するときのデフォルト文字コードの設定です。
既存ファイルをを上書き保存するときは….で保存する	既存のファイルを開き、編集結果を【上書き保存】するときの文字コードの設定です。通常は、そのファイルの元々の文字コードで保存することになりますので【読込時と同じ文字コード】を選択します。どんなファイルも特定の文字コードで保存する場合は、目的の文字コードを選択します。
META要素, @charset の値と一致しない場合は通知する	HTML/CSSファイルに記述されているMETA要素や@charsetに設定されている文字コードと、そのファイルの実際の文字コードが異なる場合に、通知履歴に通知する機能です。

項目の解説
全般
保存と読込
読込時の文字コード設定

項目	解説
不明な文字コードを検出したときは…で読込を続ける	日本語が含まれないファイル等は文字コードを判別できないため、【不明な文字コード】として処理されます。【不明な文字コード】として判別された場合に、ここで選択した文字コードでファイルを読込みます。
META要素, @charset の値と一致しない場合は通知する	HTML/CSSファイルに記述されているMETA要素や@charsetに設定されている文字コードと、そのファイルの実際の文字コードが異なる場合に、通知履歴に通知する機能です。

項目の解説
全般
保存と読込
保存時の動作設定

項目	解説
デフォルト保存拡張子	新規作成したファイルを保存するときに、拡張子をつけずにファイル名のみを入力した場合に自動的に付与する拡張子の設定です。
行末の半角空白を自動的に取り除く	ファイル保存時に、各行末の半角スペースを自動的に削除して保存します。

項目の解説
全般
保存と読込
自動上書き保存の設定

項目	解説
利用する	編集中のファイルを自動的に保存する機能です。バックアップ用の保存ではなく、一定間隔で【上書き保存】を実行します。未保存のファイルに対しては実行されません。自動保存の間隔は30秒～600秒の間で設定できます。

StyleNote 5.03 をリリースしました。

StyleNote 5.03をリリースしました。

最近は xCode をずっと触っていたのですが、微妙に一区切りついたので、StyleNoteの開発に戻って参りました。

不具合の修正と一部機能強化を行いましたので、バージョンアップをお願い致します。

■2014/06/16 StyleNote 5.03
—————————————————————–
変更箇所 ★…新機能 ●…改良/変更 ▲…バグ修正 ×…廃止
—————————————————————–
★【スタイルルーペ】見つかった各候補の定義先ファイル名を、各項目の右端に表示するようにしました。

●描画処理の一部に【GDI+】の導入を始めました（よくわかりませんが、やりたいことがGDI+で提供されていたので導入しました）。Windows XP以降の機能になりますので、それ以前のOSでStyleNoteを使われている方は、もしかすると本バージョンから本当に動作しなくなったかもしれません。
●【クラスファインダー】描画処理の一部改良および、マウスカーソル切替処理の改良。ツールバーの配置変更。
●【スマートエディット】描画処理の一部改良。
●【ファイルセレクター】ツールバーの配置変更。メイリオ化。詳細表示時の情報の配置を見なおしました。

▲【ファイルセレクターの設定】「基本カラー設定」の「文字色と背景色の交換」ボタンの実行結果を保存できない不具合を修正しました。
▲【ファイルセレクターの設定】「表示するファイルの種類」で「バックアップファイル」を非表示に設定しても、「バックアップファイルの拡張子」で登録した拡張子のファイルが表示される不具合を修正しました。

ツールメニューの【外部アプリ】に登録する方法

StyleNoteのメインメニュー【ツール】メニュー内の【外部アプリ】に、アプリケーションを登録する方法を解説します。

　１）【設定】メニューに【StyleNoteの設定】を開きます
　２）【補助 – メルアドと外部アプリの登録】をクリックします
　３）【追加】ボタンを押して外部アプリを登録します

StyleNote 5.02をリリースしました。

【アウトライン】機能に新しい解析モードが追加されました。その他、ファイルタブの追加位置の設定や、自動保存機能等、ユーザーの方から頂いた要望のうち、比較的対処し易いものについて対応を行っています。

本バージョンより、【ライセンス履行の申告】機能を実装しています。
認証済ユーザーの方には、特典として、拡張メニューを提供する予定（時期未定）です。
申告により、作者には各ユーザーが申告したサイトの情報は一切伝わりませんので気軽にお試し下さい。

ライセンス履行の申告機能に関する詳細は、こちらをご覧下さい。

■2014/03/08 StyleNote 5.02
—————————————————————–
変更箇所 ★…新機能 ●…改良/変更 ▲…バグ修正 ×…廃止
—————————————————————–
★【ファイルタブの追加位置】「ファイルバーとサブバーの設定」に「ファイルタブの追加位置」オプションを新設しました。ファイルを開いた時に、ファイルタブを追加する位置を「先頭」「末尾」「アクティブタブの左側」「アクティブタブの右側」から選べるようになりました。/user

★【自動保存】「StyleNoteの設定 – 保存と読込」に「自動保存」機能を追加しました。設定したインターバルでタブに開かれている全てのファイルを自動的に保存します。デフォルトではオフの機能です。/user

★【アウトライン】解析モード＜CSSセレクターアウトライン＞が利用できるようになりました。
　「クラスファインダー」と動作が似ていますが、アウトラインでは、現在編集中のファイルのセレクターの一覧をリストアップし、当該箇所への移動を容易することを目的としています。
　※クラスファインダーは参照されているファイルも含めて編集中のファイルで利用可能なCSSを全て表示/編集することができます。

★【アウトライン】解析モード＜コメント＞が利用できるようになりました。HTMLのコメントタグのみを抽出します。

★【ライセンス履行の申告】StyleNoteのライセンス（リンクウェア）履行状況をユーザー自ら申告して
　頂ける機能を設置しました。申告して頂くと、ささやかな特典機能へのアクセスが提供される予定です（時期未定）。
　申告内容の確認は自動で行われるため、入力頂いた内容は作者側には伝わりません。気軽にお試し下さい。
　詳しくはこちらをご覧下さい。

●【ファイルタブのD&Dでの移動】ファイルタブのD&Dによるタブの位置変更機能で、末尾への移動に対応しました。ファイルタブをドロップしたタブの中央より右側へのドロップで、そのタブの右側に移動します。/user

●【インデックスファイルの指定】「ファイルセレクターの設定」のインデックスファイルの設定方法が変更されました。
　従来はフォルダ毎に個別にインデックスファイルを指定する必要がありましたが、本バージョンよりインデックスファイルのファイル名を予め登録しておき、表示フォルダに合致するファイルが含まれる場合は自動的にインデックスファイルとして認識されるようになります。インデックスファイル機能をご利用の方は、「ファイルセレクターの設定」から、インデックスファイル名をご登録下さい（例: index.html）。

●細かい改良。

▲【アウトライン】HTMLタグ解析機能のコメントタグの取り扱いに不備がありましたので、修正しました。
▲【ホイールインプット】小数点を含む数値に対して正常にホイールインプットが動作していなかった不具合を修正しました。

×【カラーコードの検索の設定】設定ダイアログを廃止しました。

【ダイアログ】エディタの設定

設定(O)
エディタの設定(E)

エディタ部分の基本的な動作設定と表示設定を変更できます。

項目の解説
基本の設定タブ
フォント

項目	解説
書体	エディタ部分のフォントを指定します。等幅フォントに加えて、プロポーショナルフォントも指定可能です。
サイズ	フォントの表示サイズです。ポイント単位です。

項目の解説
基本の設定タブ
タブ文字

項目	解説
ソフトタブを使用する	TABキーを押したときに、タブ文字の代わりに半角スペース文字を使用します。
サイズ	タブ文字のサイズです。2を設定した場合、半角2文字分のサイズでタブ文字を展開します。

項目の解説
基本の設定タブ
行の設定

項目	解説
編集行に下線	キャレットがある行全体に、下線を描画します。
編集行に着色	キャレットがある行を特別な色で描画します。描画色はカラーの設定で指定できます。
行間の設定	行と行の間のスペースを設定します。単位はピクセルです。
下線のスタイル	編集行に下線を利用中の時の、下線の描画スタイルを設定できます。

項目の解説
基本の設定タブ
行番号とルーラー

項目	解説
行番号を表示	行番号の表示・非表示を設定できます。
論理行表示	この項目がオンの場合、折り返し行を行としてカウントしません。
右側余白	行番号とエディタ入力領域の間に余白を設定します。単位はピクセルです。
ルーラーを表示	ルーラーの表示・非表示を設定できます。
境界線を行番号にクロス	この項目をオンにすると、ルーラーの境界線と、行番号の境界線を十字にクロスして描画します。

項目の解説
基本の設定タブ
マウスホイールのスクロール動作

項目	解説
スクロールする行数	マウスホイールを1回動かしたときにスクロールさせる行数を指定します。

項目の解説
基本の設定タブ
ワードラップ

項目	解説
有効	右端で折り返す場合、この項目をオンにします。
指定文字数で折り返し	この項目をオンにすると、指定した行数でワードラップが有効になります。
文字数	指定文字数で折り返しを利用する場合の折り返し文字数を指定します。

項目の解説
編集補助の設定タブ
編集記号の表示

項目	解説
改行記号	改行記号を表示します。描画カラーは【カラーの設定】をご覧下さい。
全角スペース	全角スペースを表示します。描画カラーは【カラーの設定】をご覧下さい。
[EOF]	ファイルエンドを表示します。描画カラーは【カラーの設定】をご覧下さい。
半角スペース	半角スペースを表示します。描画カラーは【カラーの設定】をご覧下さい。
タブ文字	タブ文字を表示します。描画カラーは【カラーの設定】をご覧下さい。

項目の解説
編集補助の設定タブ
タブ文字の描画スタイル

項目	解説
横破線	タブ文字範囲を水平方向の破線で描画します。水平方向に連続したタブ文字を一体的に認識できます。
縦破線	タブ文字の左端に、垂直方向の破線を描画します。破線は各タブ文字の開始位置に描画されるため、タブ文字インデントによる階層関係の把握に優れています。
矢印	タブ文字を→記号で描画します。

項目の解説
編集補助の設定タブ
半角スペースの描画スタイル

項目	解説
コの字型	半角スペースをコの字型の記号で描画します。
□記号型	半角スペースを□記号で描画します。

項目の解説
編集補助の設定タブ
ライン強調の設定

項目	解説
<meta>要素強調	META要素を含む行全体を、【カラーの設定】に従って強調表示します。
<link>要素強調	LINK要素を含む行全体を、【カラーの設定】に従って強調表示します。
id属性強調	ID属性を含む行全体を、【カラーの設定】に従って強調表示します。

項目の解説
編集補助の設定タブ
編集補助

項目	解説
オートインデント	改行時に自動的にインデントを適用します。
キャレット位置をキープ	キャレットを上下に移動させたときに、移動開始字のキャレット位置を維持し、復帰させます。

項目の解説
カラーの設定タブ

エディタ部分のカラーの設定は、個別にプロファイルとして保存することができます。
また、予め用意されている【テーマ】を利用してカラーを設定することもできます。

項目	解説
開く	プロファイル(*.editor)データを読み込みます。
新規作成	新しいカラー設定を作成します。
上書き保存	変更したカラー設定を現在のプロファイルに上書き保存します。
名称変更	現在のプロファイルを別名で保存します。
テーマを利用	予め用意されているテーマを利用して、新規カラープロファイルを作成します。選択したテーマのカラー情報がロードされますので、上書き保存を押して最終的にカラー設定をユーザーのプロファイルとして保存して下さい。
現在の設定	現在編集中のプロファイル名が表示されます。変更した場合はプロファイル名にアンダーラインが表示されますので、設定を保存する場合は【上書保存】ボタンを押して下さい。テーマを読み込んだ場合は【XXXXのテーマ（保存されていません）】と表示され、新規作成の状態になります。同様に上書き保存して、ユーザーのプロファイルとして利用できるようにして下さい。

項目の解説
表示モードの設定タブ

項目	解説
表示モードの切替を自動判別する	編集中のファイルの拡張子を判別して、自動的に最適な表示モードを選択します。
ファイルの種類	StyleNoteが切替可能な表示モードです。拡張子欄に対象となる拡張子を登録することで、自動判別時の対象ファイルを拡張できます。

ライセンス履行の申告

StyleNote 5.00より、ソフトウェアのライセンス形態が【リンクウェア】へ変更になりました。これに伴い、StyleNote 5.02より、ヘルプメニューから【ライセンス履行の申告】機能をご利用頂けます。
【ライセンス履行の申告】機能により、ライセンス履行状況が確認された場合、認証済のStyleNoteでのみ利用可能な拡張機能へのアクセスが提供されます。

【ライセンス履行の申告】は下記の2種類の認証を受け付けます。

　１）リンク設置によるライセンス履行
　２）リンク解除権利購入によるライセンス履行

リンク設置によるライセンス履行の申告方法

ライセンス履行の申告ダイアログを開き、「リンクを設置された方」タブを表示します。

ヘルプ(H)
ライセンス履行の申告(L)

履行申告を行う前に、http://sn.lowedge.com/ へのリンクを設置します。リンクを設置したページのURLを「STEP.1 リンク設置状況の確認」欄に入力して下さい。「テスト」ボタンを押すと、StyleNoteが自動的にリンク設置状況を確認します。正常なリンク設置を確認できた場合は、STEP.2の入力欄がアクティブになります。

STEP.2はサイト保有者の確認です。サーバーにStyleNoteが指定する認証用ファイルをアップロードし、アップロードした場所のURLを「アップ場所」欄に入力して「テスト」ボタンを押して下さい。

認証用ファイルは、ライセンス履行を実施するPC固有のファイルになります。複数のPCでStyleNoteを利用されている場合は、各PC毎にサイト保有者の確認が必要になります。

サイト保有者の確認が成功すると、下記の認証完了画面が表示されます。

認証完了画面の「解除ボタン」を押すと、認証が解除されます。認証完了後は、ウインドウ右上の「×」ボタンで画面を閉じて下さい。

リンク解除権利購入によるライセンス履行の申告方法

ライセンス履行の申告ダイアログを開き、「リンク解除権利を購入された方」タブを表示します。

ヘルプ(H)
ライセンス履行の申告(L)

解除権利購入後にお届けしている登録番号通知書に記載の「登録番号」「E-Mail」「KEY」の値をそれぞれ入力欄にコピペします。「解除権利の確認」ボタンを押して、認証に成功すると、下記の認証完了画面が表示されます。

認証完了画面の「解除ボタン」を押すと、認証が解除されます。認証完了後は、ウインドウ右上の「×」ボタンで画面を閉じて下さい。

リンク設置によるライセンス履行の申告の仕組み
ご利用のサイト上にリンクを設置していただき、ライセンスを履行された方は、
【リンクを設置された方】タブより、【ラインセスの履行】を申告して頂けます。

この場合、まず、公式サイトへのリンクを設置したURLをご記入頂くことで、
StyleNote側で自動的に当該ページの内容を解析し、
リンクが設置されていることを確認致します。

リンク設置がStyleNote側で確認された場合は、続いて、
当該ページのサイトオーナーの確認が行われます。

当該ページ（ドメイン）のサイトオーナーであることを確認するために、
【認証用ファイル】をFTPにてサーバーへアップロードして下さい。

認証用のファイルがアップロードされたことをStyleNoteが確認すると、
【認証済】となります。

リンク解除権利を購入された方の申告の仕組み
リンク解除権利を購入された方は、購入時に発行する【通知書】に
記載の情報をご記入頂くことで、【認証済】にすることができます。

認証はStyleNoteの公式サイトに問い合わせが行われることで、
確認されます。

動作条件
【ライセンス履行の申告】は、いずれの場合もインターネットへの接続が必要となります。
インターネットへの接続環境が無い状況では、【ライセンス認証に失敗】します。

また、サーバー上に単体ファイルを転送いただけない環境の場合も、
サイトオーナーであることを確認できないため、
【ライセンス認証】をご利用頂くことができません。

認証結果については、【通知履歴】にログが出力されます。

StyleNote 5.01 を公開しました。

StyleNote 5.01をリリースしました。

本バージョンでは、動作を安定化させる細かい対応を多く含んでいます。また、ユーザーの方からの要望としてショートハンドへの対応がありましたが、これの対処としましては、まずはCSSセレクターに対するスマートエディット（入力補完機能）を、ショートハンドプロパティに対応させています。

また、コードヒントが<A>タグや<LINK>タグにも対応しており、当該タグのファイルパス部分にキャレットがある場合、定義先ファイルの変更や定義先ファイルを新しいタブで開くことが簡単に行えるようになっています。

その他の詳しいアップデートは次の通りです。

■2013/01/29 StyleNote 5.01
—————————————————————–
変更箇所 ★…新機能 ●…改良/変更 ▲…バグ修正 ×…廃止
—————————————————————–
★【コードヒント】対象に「ファイル(*.html,*.htm,*.css等)」が追加されました。ポップアップするボタンから、リンク先の変更またはリンク先ファイルを開くことができます。
★【スマートエディット】CSSのショートハンドプロパティの連続入力に対応しました。ショートハンドの入力順序に対応した候補表示は行いませんが、スペース区切りによる候補表示および候補確定後の入力に対応しています。/user

●【関連ファイルバー – ロックモード】ロックされているファイルを閉じた時に、ロックモードが自動的に解除されるようにしました。/user
●【エディターの設定 – 編集記号の表示 – 半角スペース】描画域を最大限取れるように調整しました。フォントサイズが小さいと描画が潰れる現象が、全バージョンよりも改善しています。/user
●【内蔵ブラウザー（独立プレビュー）】UIの一部を変更しました。
●【コードヒント】ID/CLASSを対象としたポップボタンに、定義先CSSファイルを開くボタンを追加しました。
●【コードヒント】起動対象の属性値が空欄の場合はヒントを表示しないようにしました。
●【コードヒント】コードヒントの起動が、スマートエディットやオートコンプリートと重複した場合は、コードヒントが起動しないようにしました。各サポート機能の起動優先樹には、「スマートエディット＞オートコンプリート＞コードヒント」となります。
●【コードヒント】カラーコードのプレビューをクリックすると、カラー選択ダイアログが起動するようにしました。/user
●【カラーコード取得ダイアログ】エディタ上でカラーコードを選択した状態で起動すると、選択したカラーを初期色とするようにしました。

▲【エディターの設定 – 半角スペース文字の描画スタイル】「編集記号の表示」で半角スペース文字をONにしたときの描画スタイルをユーザー側で選べるようにしました。これまでのコの字型に加えて、v4形式の□記号での描画から選べます。/user
▲【StyleNoteの設定】一部の項目が意図せず非表示になっていたため、修正しました。
▲【コードヒント】対象がCLASS値の時に、CLASSが複数適用されていると動作しない不具合を修正しました。
▲【スマートエディット】特定の条件下で、候補窓表示中にESCキーを押すと候補が全て消え、白いウインドウが表示される不具合を修正しました。/user
▲【zen-coding】引き続き、展開時の区切り記号の判定に不具合がありましたので、修正しました。また展開後のフォーマットを改良しました。
▲【スマートエディット】CSSコメント /* */ の複数行出力で、既にコメントが記述されていた場合は、残すようにしました。

●細かい改良。

ホイールインプット機能の概要

ホイールインプットとは
エディタ画面上の特定の文字列を選択して、Shift+ホイールで値を連続的に変更する機能です。ホイールインプットが動作する「特定の文字列」は次の通りです。

対象	動作内容
ユニット付数値例: 100px, 5em, 3ex 等	ホイール動作により、ユニットを維持したまま、値が増減します。
CSS属性値例: font-style:oblique; の oblique 部分	そのCSS属性が取れる属性値が連続的に切り替わります。
CSS属性名例: border-radius:3px; の border-radius 部分	ベンダープレフィックスが連続的に切り替わります。

ホイールインプットの動作設定
StyleNoteの設定の下記の場所からご確認頂けます。

設定(O)
StyleNoteの設定(A)
編集支援
入力支援
ホイールインプット

コードヒント機能の概要

コードヒントとは
エディタ画面上のキャレット位置に応じて、内容をポップアップ表示する機能です。キャレットが対象領域に入ると、自動的に最適なプレビューが表示されます。

codehint-1

コードヒントの起動対象
コードヒントは下記の場合に自動的に表示されます。

対象	ヒント内容	クリック時動作
HTML要素のID/CLASS属性値	ツールボタンが表示されます。	ボタン1: ID/CLASSのCSSセレクター編集ボタン（インラインエディタ）ボタン2: ID/CLASSの定義先ファイルを開くボタン
CSS/HTMLのカラーコードを要求する属性値	カラーコードのカラープレビュー	カラー選択ダイアログの表示
CSS/HTMLのファイルパスを要求する属性値	ツールボタンの表示	ボタン1: リンク先を変更するボタン2: リンク先を新しいタブで開く
CSS/HTMLの画像パスを要求する属性値	画像プレビューの表示	画像ファイルを変更する

コードヒントの動作設定
StyleNoteの設定の下記の場所からご確認頂けます。

設定(O)
StyleNoteの設定(A)
編集支援
入力支援
アクティブコードヒント

StyleNote5 正式版（v5.00）を公開しました。

2014年になりました。
今年も宜しくお願い致します。

本日StyleNote5のベータを外し、正式版を公開いたしました。
まだまだ調整したい箇所と、実装したい新しい機能がありますが、これらは正式版として対応していきたいと思います。

また、兼ねてから告知しておりましたライセンスの変更につきましては、本バージョンより【リンクウェア】が適用となります。ライセンスに関する詳細はこちらをご覧下さい。

■2013/01/04 StyleNote5 #5.00
—————————————————————–
変更箇所 ★…新機能 ●…改良/変更 ▲…バグ修正 ×…廃止
—————————————————————–
★【カラーコードの取得ダイアログ】カレントカラーの隣に初期カラーも表示するようにしました。
★【コードヒント】コードヒントの起動対象に「ID/CLASSの属性値」を追加しました。スタイルルーペと連携して、キャレット位置のID/CLASSの定義先へのアクセスを提供します。
★【コードヒント】コードヒントの起動対象に「画像パス」を追加しました。画像パスを要求するCSS/HTMLの属性値にキャレットを移動すると、記述された画像のプレビューが表示されます。
★【検索 – ファイル検索】v4時に実装していた「ファイル検索」機能が使えるようになりました。

●【お気に入りの整理】デザイン変更＆メイリオ化
●【画像の相対パスの取得ダイアログ】動作改良。プレビュー領域の左右のボタンで、プレビュー中の画像と同階層にある画像を連続的に切り替えられるようにしました。
●【スタイルインスペクター】描画不具合の修正と、改良を行いました。
●【通知履歴】ツールパネルに配置されていた「ログパネル」は、その名称を「通知履歴」に変更しました。
●【コーディング – DOCTYPE宣言】HTML5形式への対応と、UIの変更。
●【ピクチャーブラウザー＆画像パスの挿入ダイアログ】表示領域を超える画像はマウスドラッグでスクロールできるようにしました。

▲【コードヒント】カラープレビューの選択挙動の不具合の修正しました。
▲【ツール – 外部アプリ】特定の条件下で正常に登録アプリの一覧を表示できない不具合を修正しました。
▲【描画】スタイルインスペクター、各種お気に入りの色選択ボックス、ファイルセレクターの各項目のフォーカスの描画処理を改良しました。フォーカスされている項目に描画されるドットラインが改善されました。
▲【ソフトタブ】１行選択時に連続してタブ文字を挿入した時に、２回目以降の挿入で選択文字列が削除される不具合を修正しました。/user
▲【ソフトタブ】ワードラップ有効時に、複数行選択してソフトタブを実行した際に、挙動がおかしくなる不具合を修正しました。/user
▲【指定行に移動】移動後の行番号が表示されない不具合を修正しました。
▲【zen-coding】省略形の展開時の不具合を修正しました。
▲【サーチセンサー】項目の選択動作の不具合を修正しました。

×【SNS】 %inputcolor は廃止されました。この機能は、カラーコード取得ダイアログがその機能をカバーするため、廃止されました。
×【StyleNoteの設定 – スタイルインスペクター】UIデザインの統一化と簡素化のため、カラー設定は廃止いたしました。
×【イメージルーペ】当該機能は、本バージョンにて新しく実装された【コードヒント】機能の【イメージプレビュー】にその役割を移したため、廃止されました。

StyleNote5 Public Beta 20 をリリースしました。

StyleNote5 PB20をリリースしました。
新機能の追加と不具合の修正を行っています。

本バージョンより、これまでStyleNoteがユーザーに対して発行し、ログパネルに出力してきた通知（ファイルの保存失敗等）を、より視覚的に掲示できるように改良しました。この改良により、StyleNoteが発行した通知は、デフォルトでウインドウ中央に通知内容がポップアップで表示されるようになります。
※このポップアップは、フォーカスを持たないため、作業途中でもキー入力を妨げることはありません（ポップアップをオフにすることもできます）。

その他、新機能も含めて詳しくは下記をご覧下さい。

※本バージョンで実装・修正が間に合わなかった要望は、対応までもうしばらくお待ち下さい。

—————————————————————–
変更箇所 ★…新機能 ●…改良/変更 ▲…バグ修正 ×…廃止
—————————————————————–

★【ツールパレット】エディタ領域の左側に新しくツールパレットバーを設置しました。編集に関する各種機能の実行ボタンを配置しています。※実験的な設置となります。今後廃止、変更等が発生します。
★【StyleNoteの設定】「コード入力支援 – zen-coding動作オプション」に「展開後の要素にインデントを挿入する」オプションを新設しました。zen-codingの展開時にインデントが不要な場合はオフにして下さい。/user
★【カラーコード取得ダイアログ】「規定」タブに「カラーネーム」の一覧を新設しました。/user
★【コードヒント】コードヒント機能を実装しました。現在、カラーコード文字列にキャレットを移動すると、実際の色の簡易プレビューが可能です。コードヒントの対象は今後増える予定です。/user

●【キャレット位置情報】表示位置を上部に変更しました。
●【ステータスバー】カレントフォルダ表示欄の文字色をリンク色に変更しました。
●【キャレット位置情報】キャレット位置情報バーの位置を上部に変更しました。
●【スタイルルーペ】プレビュー画面を廃止し、項目をダブルクリックすることで対象のセレクターをインラインエディタでダイレクトに開くようにしました。
●【ロケーションバー】描画スタイル変更。
●【通知機能】StyleNote上で発生した通知を画面上にて明示的にアラートするようにしました。「保存失敗」時や「文字コード判別失敗」時にログパネルに出力されていた内容を、本バージョンからデフォルトでアラート表示します。このアラートはフォーカスを奪うことはなく、3秒で自動的に非表示になります。これまで同様に、アラートせずにログパネルのみに出力されたい場合は、StyleNoteの設定の【全般-その他】にオプションを新設しています。
●【ファイルセレクター】ファイルセレクﾀｰのツールバーにある右端のアイコンのメニューに【お気に入りの整理】を追加しました。/user
●【カラーコード取得ダイアログ】デザイン変更。

●【ツールパネル全般】メイリオ化しました。
●【StyleNoteの設定】メイリオ化しました。

StyleNote5 Public Beta 19 をリリースしました。

本日 StyleNote5 PB19をリリースしました。
不具合修正と機能追加を行っています。

入力支援機能「スマートエディット」の動作をアップデートしています。大きな変更点は、CSS属性の候補絞り込みが、短縮入力に対応した点です。これは、CSS属性名の「-」を区切り文字として、その後に続く1文字目を順に入力することで、候補を絞り込める機能です。例えば、「border-top」は「bt」で、「border-top-width」は「btw」と入力することで、絞りこまれます（最初の1文字目を入力したら、その後は「-」の直後の文字を順番に打つだけでOKです）。

また、掲示板でベンダープレフィックスの件がありましたので、ぱっと思いついたところで、とりあえず、「ホイールインプット」でベンダープレフィックスの【切替】に対応しました。CSS属性名を選択した状態で、Shift+ホイールすると、選択した属性名にプレフィックスを付けて順番に切り替えられます。あまり使い勝手がよくないかもしれませんが、対応第一弾ということで、今後他の機能もアップデートしていきます。

★【スマートエディット】CSS属性の候補絞り込みが、短縮入力に対応しました。「-」を区切り文字として、その後に続く1文字目を順に入力することで、短縮入力できます。例えば「border-top」は「bt」、「border-top-width」は「btw」で絞りこむことができます。
★【ホイールインプット】CSS属性に対してホイールインプットを実行すると、ベンダープレフィックスが切り替わるようにしました。例:CSSセレクターで border-radius を選択してShift+ホイールを実行すると、-moz-等のベンダープレフィックスを切り替えられます。/user

●【スマートエディット】候補ウインドウのデザインを変更しました。背景色等につきましては、エディタのカラーテーマが適宜適用されるようになりました。
●【スマートエディット】チラツキを抑制しました。

▲【複数行タブインデント（ソフトタブ利用時）】複数行を選択して一括インデントを実行した場合に、正常にインデントが行われない不具合を修正しました。/user
▲【複数行タブインデント（ソフトタブ利用時）】複数行を選択して一括インデントを実行した場合に、特定の条件下で、選択範囲に含まれない行を含めてインデントが実行される不具合を修正しました。/user
▲【文字コード指定読込】ステータスバーの読込時の文字コード欄からファイルの再読み込みを行うと、特定の条件下で正しく読み込まれない不具合を修正しました。/user
▲【スマートエディット】カラーコードのプレビューがカラーネームに対応しました。
▲【zen-coding】展開バグを修正しました。

●【複数行タブインデント（ソフトタブ利用時）】複数行を選択して一括インデントを実行した後で、「元に戻す」を実行すると、選択範囲の文字列が全て削除される履歴が復元される現象を、回避するようにしました。これは、インデント挿入時に、対象テキストを一旦削除してから整形済みテキストを挿入していたため、発生していました。/user

相対パスを簡単に入力できますか？

StyleNoteには、相対パスを入力する手段が複数用意されています。

　1) 相対パスのみを個別で取得する場合
　　　【ツール】メニューの【画像の相対パスを取得】または【ファイルの相対パスを取得】をご利用下さい。
　　　【画像の相対パスを取得】では画像のプレビューが行えます。

　2) HTML/CSSのキーボード入力中に相対パスを入力する
　　　HTML/CSSの入力中にファイルパスの入力を検知すると、自動的に入力補完機能が働きます。
　　　※候補から選択すると候補リストは閉じられますが、スラッシュ(/)を続けて入力すると、
　　　引き続き入力補完機能が起動し、配下のファイルが表示されます。

　3)　HTML/CSSを右クリックして相対パスを入力する
　　　HTML/CSSの中で右クリックすると、タグアナライザーが起動し、入力可能な属性値メニューが表示されます。
　　　このメニューからURLが求められる属性（例えばhref等）を選ぶと、ファイル選択ダイアログが表示されます。
　　　画面に従ってファイルを選んでOKすると、相対パスが自動的に入力されます。
　　　

相対パスの計算には、編集中のファイルが保存されている必要がありますが、StyleNoteは未保存ファイルでも相対パスを取得できます。その際、StyleNoteはファイルセレクターが表示しているフォルダを起点フォルダとして、相対パスを計算します。

個人設定を全て削除する方法を教えて下さい（設定のリセット）

StyleNoteのユーザー固有データを削除することで、設定を初期化できます。

　———————————–
　▼ユーザー固有データの保存先の確認方法
　———————————–
　設定 – StyleNoteの設定 – 起動 – ユーザー固有設定の保存先の確認

保存場所を確認したら、StyleNoteを終了した後で、フォルダを削除して下さい。

バージョンアップの方法は？

StyleNote公式サイトからダウンロードした sn5xx.zip ファイルを解凍し、既存のデータに上書きするだけでOKです。

StyleNote5 Public Beta 18 をリリースしました。

大した更新ができませんが、前回のバージョンアップで、zen-codingの動作を改善したつもりが、実質使い物にならなくなっていたため、そちらの修正を行っています。その他、ユーザーの方から頂いた内容で、簡単に対処できるものは対処しました。

検証が必要なものは順番に確認していきたいと思いますので、ひきつづき何かあれば各種掲示板に書込を続けて頂けますと嬉しいです。

—————————————————————–
変更箇所 ★…新機能 ●…改良/変更 ▲…バグ修正 ×…廃止
—————————————————————–
★【StyleNoteの設定】「コード入力支援」に「HTML/CSSファイル以外を編集中の時は無効にする」オプションを新設しました。デフォルトではONです。スマートエディットを常に有効にされたい場合はOFFにしてください。/user
★【ヘルプメニュー】「オンラインドキュメント」を「ヘルプ」メニューに追加しました。StyleNote公式ページのオンラインドキュメントページを表示します。

●【ヘルプ-ヘルプ】PB17までヘルプメニューに存在した「ヘルプ」リストは、「ツール」メニューに移動し、その名称を「外部アプリ」へ変更しました。

▲【ホイールインプット】負の数値に対して正常に値を増減できない不具合を修正しました。
▲【タグアナライザー】一部の単語にスペルミスがあったため、修正しました。/user
▲【zen-coding】展開バグを修正しました。PB17で半角記号の判定を厳しくした結果、誤って > や + 等のzen-codingで使われる展開記号も全て無効になっていました。
▲【ファイルセレクター】画像ファイルを右クリックして「ピクチャーエクスプローラーで表示」を実行したときに特定の条件下でエラーが発生する不具合を修正しました。

【ダイアログ】ファイルバーとサブツールバーの設定

設定(O)
ファイルバーとサブツールバーの設定(B)

ファイルバー（関連ファイルバー含む）と、サブツールバーの外観及びオプションの設定が行えます。

項目の解説
基本設定タブ
ファイルバーの動作設定グループ

項目	解説
アクティブタブに合わせてファイルセレクタのカレントフォルダを変更する	ファイルタブを切り替えた時に、ファイルセレクタの表示フォルダをそのファイルが保存されているフォルダへ変更します。
ファイルバーは必要な時のみ表示	現在編集中のファイルが１つの場合、ファイルバーを自動的に隠します。
ファイルアイコンを表示	ファイルタブにファイルアイコンを表示します。

項目の解説
基本設定タブ
ファイルタブの追加位置

項目	解説
ファイルタブを新しく開くときは	新しいファイルを開くときや、新規ファイルを作成した際に、新しいタブを追加する位置を設定できます。【先頭に追加する】【末尾に追加する】【アクティブタブの左に追加する】【アクティブタブの右に追加する】の4種類から選択できます。

項目の解説
基本設定タブ
ファイルバーの表示設定グループ

項目	解説
左ツールバーを表示	ファイルバーの左側にツールバーを表示します。表示されるボタンは【新規作成】【左のタブを開く】【右のタブを開く】【タブの一覧】です。
右ツールバーを表示	ファイルバーの左側にツールバーを表示します。表示されるボタンは【編集中のファイルを閉じる】【全てのファイルを閉じる】です。

項目の解説
ファイルバーの色タブ
カラーグループの解説

項目	解説
アクティブ	現在編集中のファイルタブのカラー設定です。
非アクティブ	現在編集中ではないファイルタブのカラー設定です。この設定は、下記に続く項目に該当する場合は上書きされます。
マウスオーバー	ファイルタブの上にマウスポインターが重なっているときのカラー設定です。アクティブタブに対しては無視されます。
グループ化	現在編集中のファイルと同じフォルダに存在するファイルタブのカラー設定です。同一フォルダ内のファイルタブを視覚的に変更できます。
強調	ファイルタブを右クリック、または仮アクティブ状態のときに適用されるカラー設定です。
編集済	編集されている（未保存）ファイルタブのカラー設定です。視覚的に保存前のファイルを確認できます。

項目の解説
関連ファイルバーとサブツールバーの色
カラーグループの解説

項目	解説
ベースファイル	ベースファイルのカラー設定です。
関連ファイル	現在編集中ではないファイルタブのカラー設定です。この設定は、下記に続く項目に該当する場合は上書きされます。
編集中ファイル	現在編集中のファイルと合致したときのカラー設定です。
マウスオーバー	項目にマウスを重ねた時のカラー設定です。

StyleNote5 Public Beta 17 をリリースしました。

zen-coding使用時のフリーズ現象や、正しくないタグが展開される不具合を修正しました。
また、掲示板等でいただいた不具合と要望にも対応しています。

—————————————————————–
変更箇所 ★…新機能 ●…改良/変更 ▲…バグ修正 ×…廃止
—————————————————————–
×【イメージルーペ】画像情報を表示するパネルは廃止致しました。

★【関連ファイルバー】関連ファイルバーの右端に、全ての関連ファイルを一覧表示するボタンを追加しました。検出された関連ファイルが多く、表示領域から溢れて切替ができない場合は、このボタンをご利用下さい/user

●【エディタ領域】プレビュー画面にフォーカスがあるときに、エディタ領域にマウスカーソルが入ると、フォーカスが移動するようにしました。/user

▲【ファイルセレクター】「表示スタイル」が「大きい表示」のときに、表示フォルダを連続して切り替えるとアクセス違反が発生する不具合を修正しました。/user
▲【ファイル復元機能】特定の条件下で復元したファイルが文字化けを起こす問題を修正しました。/user
▲【ファイルセレクター】特定の条件が重なった時、フォルダのナビゲーターアイコンの描画が不適切に表示される不具合を修正しました。/user
▲【zen-coding: 省略形の展開】特定の条件下で処理が停止する不具合を修正しました。
▲【zen-coding: 省略形の展開】特定の順序で文字列が並んでいる時に、正しく文字区切りを認識できずに、正しくないタグが展開される不具合を修正しました。

StyleNote5 Public Beta 16 をリリースしました。

StyleNote5 Public Beta 16をリリースしました。

入力補完機能と選択支援機能等、編集サポート関連機能の【修正と改善】を行なっています。スマートエディットが表示されなかったり、タブ文字が思うように挿入されなかったり、細かい挙動不備が改善されています。

続きを読む →

TWebBrowser でクリックした位置の文字インデックスを取得する方法

StyleNoteではTWebBrowser上でクリックすると、該当するHTMLソースにキャレットを移動させることができます。プレビューを見ながら、編集箇所に簡単に移動できる機能ですが、他のフリーのHTMLエディタではあまり見かけない機能です。

実装されない理由は、たぶん、IE の Scripting Object Interfaces(MSHTML)に、ソースコードベースで【要素】の文字インデックスを取得するインターフェイスが用意されていないからだと思います(私が探しきれていないだけかもしれませんが)。

MSHTMLでは各【要素】をIHTMLELementオブジェクトで特定することはできますが、そのIHTMLElementがソースコード上でどの位置にあるか（文字インデックス）を特定する方法はありません。

StyleNoteでの実装方法はこんな感じ↓です。

　1) TWebBrowser上でクリックされた要素を取得する
　2) その要素の IHTMLUniqueName::UniqueNumber を取得する
　3) StyleNote側で別途、HTMLソースを解析し、その要素の一覧を取得する
　4) 要素一覧から、IHTMLUniqueName::UniqueNumber と合致する要素を見つける

簡単に説明すると、TWebBrowser側でクリックされた要素(1)の先頭からのインデックス（文字インデックスではない）を取得(2)した上で、StyleNote側で独自に抽出したHTMLソースの要素一覧(3)から、TWebBrowserで取得したインデックスに位置する要素を見つけて(4)、キャレットを移動させています。

ここで肝になるのは、(2)の IHTMLUniqueName::UniqueNumber です。MSHTMLでは要素の先頭からの文字インデックスは取得できませんが、要素の先頭からの順番であれば取得できます。例えば、<HTML><HEAD><BODY><IMG> というHTMLソースの場合、<IMG>タグの要素インデックスは先頭から数えて4番目になります。<BODY>タグは3番目です。このように IHTMLUniqueName::UniqueNumberを利用することで、MSHTMLで要素を識別する固有番号を取得できます。

この固有番号を取得した上で、StyleNote側では別途、HTMLソースの要素一覧を抽出します（編集中のHTMLファイルからタグのみを抽出し、且つ、各要素の文字インデックスを保持しておきます）。ここまで来たら、後は(2)で取得したインデックスにあたる要素を特定して、その要素の文字インデックスにキャレットを移動できるようになります。

▼TWebBrowserでクリックした要素（IHTMLElement）を引数にして、UniqueNumberを返す関数
[CPP]
//—————————————————————————
//要素インデックス(UniqueNumber)の取得
//—————————————————————————
long TClassName::getIndexFromElement(IHTMLElement *Element)
{
long originalID(-1);

//イベント要素の固有ID取得
IHTMLUniqueName *uniqueName;
Element->QueryInterface(::IID_IHTMLUniqueName, (void **)&uniqueName);
if(uniqueName!= NULL){

//固有ID取得
uniqueName->get_uniqueNumber(&originalID);
uniqueName->Release();

}

return originalID;
}
[/CPP]

ファイルを上書きしても内容が保存されません

StyleNoteで「上書き保存」を実行しても編集内容が保存されない（変更箇所がプレビュー画面に反映されない）場合、そのファイルが他のアプリケーションによりロックされている可能性があります。

他のアプリでそのファイルを利用して（開いて）いないかご確認下さい。

特に、Windowsエクスプローラーのプレビューが有効な場合（下図, 赤丸のボタンでプレビューを切り替えられます）、エクスプローラー上でファイルアイコンを選択すると直ちにファイルがロックされます。このとき、StyleNoteで上書き保存を行なっても変更が保存されません。選択を解除して頂くとロックが外れます。

explorer-preview

他のアプリでファイルが使われている場合はそのアプリを終了したり、そのアプリ内でそのファイルが使われないように対処することで、StyleNote側で保存処理を正常に完了できるようになります。

ロックモードとはなんですか？

こちらのドキュメントをご覧下さい。

CSSを作るときに便利な機能

StyleNoteにはCSSの入力をサポートする仕組みが豊富に用意されています。

CSSセレクターを作る

ダイアログで全体を作る

既存のCSSセレクターに属性/属性値を追加する

スタイルインスペクタ－を利用する（マウス操作メイン）
タグアナライザーを利用する（マウス右クリックメニュー）
スマートエディットを利用する（キーボード操作メイン）

既存のCSSセレクターの属性/属性値を編集する

スタイルインスペクタ－を利用する（マウス操作メイン）
タグアナライザーを利用する（マウス右クリックメニュー）
スマートエディットを利用する（キーボード操作メイン）
ホイールインプットを利用する（属性値のみ）

特定のHTMLタグに適用されているCSSを編集する

スタイルルーペを利用する

キャレット位置のHTML階層を確認する

キャレット位置情報機能を利用する

HTMLファイル内で利用されているCLASS/IDが定義されているか確認する

CLASS&IDの検証を利用する

HTMLファイル内で参照されているCLASS/IDの一覧を確認する

クラスファインダーを利用する

CSSセレクターをフォーマットする

ソースフォーマットの適用を利用する

Stylenote5 Public Beta 15 をリリースしました。

StyleNote5 Public Beta 15をリリースしました。

修正メインです。
本バージョンを含め、今後のリリースは動作安定化と不具合修正および改良をメインに続ける予定です。

続きを読む →

ファイルバーと関連ファイルバーの概要

下記はファイルバーとツールバー周辺の名称図です。
上段のバーが「ファイルバー」で、下段のバーが「関連ファイルバー」です。

kanrenfilef

　
ファイルバーとは
ファイルバーにはStyleNoteで編集中のファイルが全て表示されます。ここに表示されるタブを切り替えることで、複数のファイルを同時に編集できます。ファイルを閉じるとファイルバーからもタブが削除されます。

関連ファイルバーとは
関連ファイルバーには、原則、現在編集中のファイルに関連する項目がリストアップされます。上図の場合は【C】に示す現在編集中のファイル（index.html）が、ベースファイルとして【B】に表示され、その横にCSSファイルが表示されています。編集するファイルを変更すると、【B】の表示も連動して変わり、関連ファイルの内容も更新されます。

ファイルタブのリボンについて
ファイルバーのタブには、リボンマークが表示されることがあります。このリボンは、そのファイルが関連ファイルバーのベースファイルに指定されていることを表します。（そのため、上図ではベースファイルを示す青色の線が２つ伸びています）。

関連ファイルバーのロックモードとは
ベースファイルを固定したまま、別のファイルを編集したいときは、ロックモードをご利用下さい。ベースファイルをロックすると、ロックを明示的に解除するまで、関連ファイルの項目を固定できます。

ロック状態は【A】の鍵アイコン、または標準ツールバーの【ファイルをプレビューする】ボタンで確認できます（下図【X】）　

【A】の鍵アイコンをクリックすることで手動でロックモードへ切り替えられますが、下記の条件を満たす場合、StyleNoteは自動的にロックモードを適用します。

関連ファイルの項目をクリックしてファイルを開いたとき
スタイルルーペからファイルを開いたとき

また、下記の条件を満たす時に、StyleNoteは自動的にロックモードを解除します。

ロックしていたファイルを閉じたとき

ロックモードを覚えて、プレビューを快適に

ロックモードに入ると標準ツールバーの「ファイルをプレビューする」ボタン（目のアイコン）の色が変わります。プレビューボタンの色が変わる理由は、ロックモードによりプレビュー対象のファイルが「ベースファイル」にロックされるためです。

例えば、外部CSSを含む「index.html」を編集中に、関連ファイルバーからその外部CSSファイルをクリックして開くと、「index.html」を【ベースファイル】として自動的にロックモードに入ります。この状態で、外部CSSファイルの編集を行い、上書き保存を実行するとStyleNoteのプレビュー画面は「index.html」の内容でリロードされるようになります。CSSを編集しながら、HTMLファイルをプレビューできる便利な機能です。

ベースファイルのプレビューは、そのベースファイルの関連ファイルを更新したときのみ有効

「index.html」をロック中に、「sample.html」という別のファイルを新しく開いた場合、ロックモードは「index.html」のまま継続されます（関連ファイルバーの内容は sample.htmlに合わせて更新されません）が、プレビューのロックは外れるため、「sample.html」を表示します。

TWebBrowser でクリックせずにホイールスクロールを有効にする

StyleNoteのブラウザー部分は、TWebBrowserコンポーネントを利用しています。

TWebBrowserは、その他のコンポーネントと同じように、マウスホイールでコンテンツをスクロールできますが、TWebBrowserオブジェクトの生成後は一度「マウスクリック」でTWebBrowserにフォーカス（？）を当ててからでないと、なぜかスクロールできないようです。

そこで調べてみると、TWebBrowserコンポーネント上で、DISPID_HTMLELEMENTEVENTS2_ONMOUSEOVER　イベントが発生した際に、IOleObject::DoVerb に OLEIVERB_UIACTIVATE を指定してすることで回避できるようです。

[cpp]
DelphiInterface OleObject = IE->Application;
if(OleObject){
DelphiInterface ClientSite;
OleObject->GetClientSite(&ClientSite);
RECT r = IE->ClientRect;
OleObject->DoVerb(OLEIVERB_UIACTIVATE, NULL, ClientSite, 0, IE->Handle, &r);
}
[/cpp]

【重要】ソフトウェア形態が変わりますリンクウェア（フリーソフト）

いつもStyleNoteをご利用頂き有難うございます。

StyleNoteのソフトウェア形態（ライセンス）を、Stylenote5 正式版より「リンクウェア」に変更させて頂くことになりました。

StyleNote5は、その開発にあたり、これまでに開発環境の購入やサーバー代等が発生してきました。今後は、なるべく出費を抑えつつ、ソフトウェアを作っていくことができると助かります。

詳しくはこちらをご覧下さい。

※正式版の公開日は未定です

スマートエディットとオートコンプリートの違いはなんですか？

StyleNoteにはコード補完機能として、スマートエディットとオートコンプリートが搭載されています。どちらもユーザーのキー入力状況に応じて続きの文字列を予測し、補完する機能ですが、下記の違いがあります。

スマートエディットは、キー入力が行われている前後の文脈を理解して、適切な値を静的・動的に収集し、補完候補を提供します。例えば、HTML/CSS要素を記述しているときは、その要素が取りうる属性、あるいは属性値を適切に候補として表示します。
構文を理解するため、例えばHTML要素の場合、既に記述済みの属性を重複して補完すると、既存の属性が更新され、属性の重複記述を防ぐように動作します。
「CSSセレクター」または「STYLE属性内でCSS」を記述しているときは、適切にCSSの補完候補を表示します。
オートコンプリートは、キー入力が行われている前後の文脈は確認しません。予め登録されている補完候補と、直前のキー入力を確認して、一定文字数の合致を確認したときに、続く文字列を候補として表示します。

使い分けとしては、スマートエディットでは補完されない候補をオートコンプリートに登録します。登録が予想されるキーワードは下記のものがあります。

短い定型文
PHP/JavaScript等の予約後/関数
よく入力するキーワード

ファイルセレクターで配下のフォルダを含めてファイルを検索する

ファイルセレクターの上部にある「ファイルを検索」欄を使用することで、表示フォルダ内のファイルの絞り込みが行えます。

サブフォルダも含めてファイルの絞り込みを行いたい場合は、digモードを利用して下さい。

▼digモードの使い方

「ファイルを検索」欄に「dig:」と入力すると、digモードになります。
digモード中に「ファイルを検索」欄にキーワードを入力します。
サブフォルダを含めてファイルの絞り込みが行われます。

digモードを解除するには、「ファイルを検索」欄の左側の「d」アイコンをクリックするか、もしくはファイルセレクター上部のフォルダパスリンクをクリックします。

digモードは、サブフォルダが多くなると検索が重くなります。ご注意下さい。