2017年11月29日

HTML5対応のWYSIWYGなHTMLエディタ「BlueGriffon」を使ってみた(3)


今回はリストの表示です。


こちらのページの情報を借用して、こちらのように2~3行の項目を1つの段落(パラグラフ)に入力します。




リストの形式にしたい部分全体をマークした上で、左の「記号付きリスト」アイコンをクリックした所がこちら




「書式」→「リストのプロパティ」でマーカーを変更できます(こちら)。




リスト要素の内容の最後に位置付けてEnterキーを押下すると、新しい(空白の)リスト要素を作る事ができます(こちらを参照)。




同様に番号付きリストも作成できます(こちら)。


勿論、リスト要素に対しても書式(太字、色など)やリンク設定を指定できます。


 
posted by 鎌倉太郎 at 17:38| 神奈川 ☀| Comment(0) | 体験利用-テキストエディタ | 更新情報をチェックする

2017年11月28日

HTML5対応のWYSIWYGなHTMLエディタ「BlueGriffon」を使ってみた(2)


前回はページ作成の大まかな流れを把握しましたが、今回はページの全体の概要説明や内容テキストの編集、テキスト以外の要素(水平線、ビデオ、オーディオ)の取り込みなどを中心に見ていきます。


先ず、(前回と若干違って・・・)「ファイル」→「新規作成」で空白のページ編集画面を作ります(こちら)。




ページの概要を記述する為、「書式」→「ページのプロパティ」によりこちらのような内容を入力します。


これらはページの表示において直接関わるものではありませんが、検索エンジンが把握したりブラウザのタブ名などの表示に使います(「BlueGriffon」でもタブ名に使っています)。



ページの内容は本ブログのこちらの先頭部分を使います。ページのタイトルには最初の段落に対して「見出し2」を指定してテキストを入力します(こちら)。




その下には「段落」を指定して文章の段落(パラグラフ)毎にエンターキーを押下しながら、こちらの様にテキストを入力します(写真を入れる空白の段落を確保しています)。




テキストの書式は左フレームのアイコンを使うか、「書式」のプルダウンメニューから指定できます。例えばタイトルを青にしたい場合その部分をマークして色選択します(こちら)。


その他にも太字化、下線、中央揃えなど多彩です。他のページ(画像も含む)へのリンク付けは前回に使っています。幾つかを例示したのがこちら(「BlueGriffon」画面)とこちら(ブラウザ画面)。





「+」アイコンまたは「ファイル」→「新規作成」or「新しいページのオプション」で新しいタブを作り、同時に別のHTMLファイルの新規作成及び既存ファイルの編集ができます。



「水平線」の挿入は、「挿入」→「水平線」から可能です(こちらを参照)。


高さを大きく指定すると、長方形になってしまいます・・・



動画の挿入もこちらのように指定します(さらに中央揃えを指定)。


オーディオの挿入についても同様です。



水平線、ビデオ・オーディオの挿入についての例示がこちら(「BlueGriffon」画面)とこちら(ブラウザ画面)。





 
posted by 鎌倉太郎 at 09:00| 神奈川 ☁| Comment(0) | 体験利用-テキストエディタ | 更新情報をチェックする

2017年11月24日

HTML5対応のWYSIWYGなHTMLエディタ「BlueGriffon」を使ってみた(1)


HTML5対応のWYSIWYGなHTMLエディタ「BlueGriffon」の最新版(Ver 3.01)が公開されたので使ってみました。HTML5やCSSを知っていれば細かな事まで使いこなせますが、今回の試使用ではできるだけWYSIWYGの範囲で利用できる機能に絞ります。それでも多くの事ができます。



こちらの上部メニュ―「download」でページ下部に移行してダウンロード・インストールできます。




起動するとこちらの様になります。




今回は「我家のIT化」ブログのこちらの記事を、HTMLによる1ページ表示ができるようにします。他のサイトページへのリンクを含んだテキストとサムネイルによるリンクで画像を表示する必要があります。



先ず、「ファイル」→「新しいページのオプション」で言語として「日本語(ja)」を選択します(その他は変更せず)。こちらを参照。




一旦「ファイル」→「名前を付けて保存」とすると、ページの表題入力になります(こちら)。


記事のタイトルを入力して、実際のファイル名を指定した保存になります。



さて真っ新のページの左上にクリックして記事タイトルを入力します。その際「見出し3」を指定しておきます(こちら)。


「見出しn」は文字の大きさですから、必要により他の見出しサイズを選択できます。


記事見出し「・・・を公開」の最後に位置付けてEnterキーを押下すると、2番目の要素(段落)を入力できます(こちら)。




同様にしてテキストを段落毎に入力します。ただし、3番目の段落には画像を入れたいので空いた状態にしておきます(こちら)。




次に画像(サムネイル)をページに挿入します。これは画像挿入アイコンを使い、画像ファイルのローカルアドレスを指定します(こちら)。




さてここでクリックで画像を選択して「中央に位置付け」るアイコンを使います(こちら)。




最後にテキストをマークの上リンクのアイコンを選択して、飛び先のURLを設定します(こちら)。


画像からのリンクも同様ですが、画像についてはテキスト時のマークではなく)クリック選択をして飛び先のURLを設定します。



完成したらブラウザでプレビューします(こちら)。


最新のFirefox及びChrome系では確認しましたが、IE系・Edgeでは表示できないor一部機能しないなどの問題が出ていました。



ブラウザで表示した結果がこちら



 
続きを読む
posted by 鎌倉太郎 at 09:00| 神奈川 ☁| Comment(0) | 体験利用-テキストエディタ | 更新情報をチェックする

2017年02月06日

ファイル内容比較(5) - 「WinMerge日本語版」(4)


今回も「WinMerge日本語版」の続きです。


「WinMerge日本語版」は更新があったなどするとファイルを、自動で更新前のファイルをバックアップします(但し一世代のみ)。必要によりメニュー「編集」→「設定」から「オプション」ウィンドウで設定を変更できます(こちら)。


バックアップしたファイルは、設定の初期状態では拡張子".bak"を削除すれば元に戻ります。外部エディタによる更新にはバックアップを取りません。


 
posted by 鎌倉太郎 at 09:00| 神奈川 ☔| Comment(0) | TrackBack(0) | 体験利用-テキストエディタ | 更新情報をチェックする

2017年02月05日

ファイル内容比較(4) - 「WinMerge日本語版」(3)


今回も「WinMerge日本語版」の続きです。

こちらのファイル比較で、左側ファイルの内容を一部改訂した上で、右側ファイルにコピーする事ができます。

実際、一部を改訂した上で(こちらを参照)メニュー「表示」→「最新の情報に更新」によって本来の表示に反映できます(こちらを参照)。





一部改訂部分も含めてマージ機能のコマンドにより右側ファイルに反映できます(こちら)。


勿論、右側・左側の何れのファイルも、メニュー「ファイル」→「保存」で保存できます。



テキストの改訂に使い慣れたエディタを利用したい場合、メニュー「編集」→「設定」で「オプション」ウィンドウを呼び出して、予め登録する事ができます(こちら)。



右側・左側の何れかのファイルのエリアで、右クリックメニューの「開く」で起動できます(こちら)。



実際に起動した所がこちら


(「保存」していない)一時改訂はエディタ上に反映していませんので注意が必要です。

また外部エディタで編集した後保存・終了をすると、「WinMerge日本語版」からファイル開き直しのメッセージが出ます。



比較するファイルの選択ウィンドウで「読み取り専用」にチェックをすると(こちら)、「WinMerge日本語版」でのファイル更新操作はできません。


但し、外部エディタでの更新は可能です。



尚、テキストデータの内容はこちらから一部を流用しています。



「WinMerge日本語版」は更に続きます。


 
posted by 鎌倉太郎 at 11:00| 神奈川 ☀| Comment(0) | TrackBack(0) | 体験利用-テキストエディタ | 更新情報をチェックする

2017年02月02日

ファイル内容比較(3) - 「WinMerge日本語版」(2)


「WinMerge日本語版」の続きです。


一度開いた比較ファイル設定はタブとして維持します(タブの削除も可能)。こちらは比較ファイルを指定する画面、3つのファイルを比較する画面、2つのファイルを比較する画面の3タブを維持しているのが分かります。




こちらは差異を示す(色付けされた)部分を移動する操作のアイコンで、最後の差異部分に位置付けている事を示しています。


位置付けている部分は「Diff Pane」に示しています。差異を移動するアイコンが使えない時は、ファイルのテキスト上をクリックして(一時的)位置を示す事で使えるようになります。



本来は1つのファイルであるべきを一部づつ作成したとして、1つのファイルにするマージ処理を行うものとします。新たなファイル比較として、2つのファイルを指示するのがこちらで、実際に比較した結果がこちら




メニュー「マージ」→「次の差異」で、(実際には2つ目の)差異に位置付けた所がこちら。差異を(右へ or 左へ)コピーができるアイコンが使えるようになります。



「右へコピー」アイコンでファイル1の差異部分をファイル2にコピーした所がこちら



マージしたファイルの保存はこちらの様にできます。




尚、テキストデータの内容はこちらから一部を流用しています。



「WinMerge日本語版」は更に続きます。


 
posted by 鎌倉太郎 at 09:00| 神奈川 ☀| Comment(0) | TrackBack(0) | 体験利用-テキストエディタ | 更新情報をチェックする

2017年02月01日

ファイル内容比較(2) - 「WinMerge日本語版」(1)


今回はオープンソースで開発している「WinMerge日本語版」をとりあげます。こちらから「安定板2.14.0+-jp-127(64bits版)」をインストールしました。




起動した所がこちら(画像としてが寂しいので・・・、「ヘルプ」→「WinMergeについて」で追加表示している)。




2つの比較するテキストファイルを指定する為、メニュー「ファイル」→「新規作成」でこちらになります(このケースでは関係ありませんが、「WinMerge日本語版」はUnicodeをサポートします)。



実際に比較し差分を表示したのがこちら




「WinMerge日本語版」では3つのテキストファイル比較ができます。メニュー「ファイル」→「新規作成(3ペイン)」でこちらになります。



実際に比較し差分を表示したのがこちら




尚、テキストデータの内容はこちらから一部を流用しています。



「WinMerge日本語版」は更に続きます。


 
posted by 鎌倉太郎 at 10:00| 神奈川 ☁| Comment(0) | TrackBack(0) | 体験利用-テキストエディタ | 更新情報をチェックする

2017年01月31日

ファイル内容比較(1) - 「テキスト差分表示ツール」


今回から複数のファイルを比較し、その差などを表示してくれる無料のソフトを使ってみます。ファイルの様式は多様ですが、テキストファイルを扱う無料ソフト・サービスに絞ります。今回は「テキスト差分表示ツール」です。システム環境はWindows 8までとなっていますが、Windows 10(64bits)で特に問題は発生していません。


「テキスト差分表示ツール」はこちらからダウンロード・解凍、更に「VB6.0ランタイム」をこちらからダウンロード・解凍します。

先ず、「VB6.0ランタイム」(Ver. 3.40)は解凍先の「setup.exe」でインストールします。


「テキスト差分表示ツール」(Ver.  6.27)は、解凍先にある「TextDiffDsp.exe」を起動した所がこちら


ファイル1・ファイル2を指定する為、「・・・」アイコンを使ってフォルダを探査できます。ファイルのコードは自動検出しますが、現状は「UNICODE」をサポートしていません。



2つのテキストファイルを指定した所がこちら



特に差分だけの表示指定するとこちらになります。




表示内容をHTMLなどでファイル出力できます(こちら)。



結果がこちら


エクセル形式への出力は、現状無条件には(Excellライブラリが必要?)出力できません。



クリップボードに蓄積しているテキストとの比較をする事もできます。例えばファイル1には通常のファイルを指定し、「ファイル2」のラベル部分をクリックして(ブルーになった状態で)メニュー「編集」→「クリップボードからの貼り付け」とします(こちらを参照)。



結果がこちら


実際上は一時ファイルにして比較します。



尚、テキストデータの内容はこちらから一部を流用しています。


 
posted by 鎌倉太郎 at 09:00| 神奈川 ☀| Comment(0) | TrackBack(0) | 体験利用-テキストエディタ | 更新情報をチェックする

2016年03月16日

プログラミング用テキストエディタ(4) - Notepad++(4)


今回はフリーソフト「Notepad++」の「検索」メニューにある「マーク」です。

特定する部分を明確にする目的でマーク(色付け)をする訳ですが、通常でもソースのキーワードにカーソルを位置付けると対応するキーワードを色付けしてくれます(こちらを参照)。




一般的な色付けでは「検索」→「Mark」によるマークウィンドウからできます(こちらを参照)。




更に「正規表現」モードで検索して対応部分をマークする事ができ、それを含む行にブックマークの付加が可能です(こちらを参照)。


検索によるマーク付けは1色で、「クリア」しない限り複数の検索の色付け結果は累積していきます。



一方、任意のテキスト or 範囲を5種類の色付けをしてくれるのが、「検索」→「すべてマーク」→「スタイルnを適用」です(n=1~5)。"リンク"及び"行10~行13"を色付けた例がこちら


スタイル番号と実際の色の関係がスッキリしないのが残念です。


 
posted by 鎌倉太郎 at 09:00| 神奈川 ☔| Comment(0) | TrackBack(0) | 体験利用-テキストエディタ | 更新情報をチェックする

2016年03月15日

プログラミング用テキストエディタ(3) - Notepad++(3)


フリーソフト「Notepad++」の「検索」メニューに関する続きです。フォルダ内の全てのファイルに対して同じ文字列で検索したり、その文字列も「正規表現」に対応した評価をした上で検索する事もできます。


先ずフォルダ内の全てのファイルに対する一括で同じ文字列の検索は、「検索」→「検索」とした検索ボックスで、「すべてのドキュメントを検索」とすると、下部フレームに結果を表示します(こちらを参照)。


この場合は編集しているファイルを保存するフォルダ内にあるファイルが対象となります。


その検索ボックスの「ファイル内検索」タブを使って(「検索」→「ファイル内の検索」でも可能)、フォルダ及びオプションの指定をする事もできます(こちらを参照)。




検索文字列は「標準」検索モードだけでなく、検索文字列が「正規表現」であるとして評価した上で検索するモードがあります。詳細はこちらを参照してください。「Scintillaの正規表現エンジン」を使っていますので、細部で他と違っている点があると思いますが、通常使う範囲では他の場合と同様として問題なさそう・・・

(限定した範囲でしか使えない正規表現例ですが・・・)URLをソース内で検索する事ができます(こちらの例を参照)。



 
posted by 鎌倉太郎 at 09:00| 神奈川 ☔| Comment(0) | TrackBack(0) | 体験利用-テキストエディタ | 更新情報をチェックする