こういう「箇条書きのリスト」を書くことがありませんか？
↓↓↓↓↓ここから↓↓↓↓↓
- ブログにログインする
- 編集画面を開く
- 記事を書く
- 書いた記事をプレビュー
- 微調整
- 公開
↑↑↑↑↑ここまで↑↑↑↑↑
あるいは、「ナンバリングリスト」とか。
↓↓↓↓↓ここから↓↓↓↓↓
- ブログにログインする
- 編集画面を開く
- 記事を書く
- 書いた記事をプレビュー
- 微調整
- 公開
↑↑↑↑↑ここまで↑↑↑↑↑
こういうリストタグを簡単に作るツールを作りました！
ツール概要
ツールの概要について簡単に説明します。
図を見ていただくとわかると思います。
「リスト」と「コードテンプレート」を用意し、「コード生成」すると、「コードテンプレート」に従った「コード」が生成されます。
ツールを使ってみたら一発でわかると思いますので、やってみてください。
ダウンロード
ツールをダウンロードしてください。
HTMLタグ生成ツール (Miyota-011.jar)
※ 「設定ファイルがないと起動しない」という不具合があったため、公開を中止しました (2013/11/20)
こちらの最新版をご利用ください。
以前公開したツールの機能追加版になります。
ツールを起動
ツールを起動するには、ダウンロードしたファイルをダブルクリックしてください。
起動しない場合は、
- 実行ファイルが日本語名フォルダ以下に置かれている
- Javaの実行環境 (JRE)がない
という2つの可能性が考えられます。
解決方法はこちらの記事を参考にしてください。
また、前バージョンのツールを利用したことがある場合、設定ファイルに互換性がないので削除してから起動してください。
もし前バージョンで「コードテンプレートのファイルパス」を設定している場合は、今回のバージョンのツールを起動して設定し直してください。
(設定ファイルはバージョンが上がって設定が増える度に変わりそうなので、対応を考えます)
操作方法
起動すると、次のような画面が表示されます。
左側の画面「リンクタグコード生成ツール」が前バージョンのツールの画面で、右側の画面「リストタグコード生成ツール」が今回追加したツールの画面です。
右側の画面「リストタグコード生成ツール」について説明します。
(「リンクタグコード生成ツール」には変更がありません)
1. スタイルを選択する
リストタグは2種類あります。
リスト型 (HTMLタグでは <ul>)と
- ブログにログインする
- 編集画面を開く
- 記事を書く
- 書いた記事をプレビュー
- 微調整
- 公開
ナンバリング型 (HTMLタグでは <ol>)です。
- ブログにログインする
- 編集画面を開く
- 記事を書く
- 書いた記事をプレビュー
- 微調整
- 公開
いずれか作りたい方のリストのスタイルを選択してください。
ちなみに、このスタイルはコード生成後も変更できるのでご安心ください。
2. リストを入力して「コード生成」
スタイルを選んだら、リストを入力しましょう。
ここでは以下の内容を入力しています。
ブログにログインする 編集画面を開く 記事を書く 書いた記事をプレビュー 微調整 公開
入力したら、ボタン「コード生成」をクリックします。
3. コードが生成される
下の箱にコードが生成されました。
この例で生成されたコードはこちら。
<ul> <li>ブログにログインする</li> <li>編集画面を開く</li> <li>記事を書く</li> <li>書いた記事をプレビュー</li> <li>微調整</li> <li>公開</li> </ul>
これをコピペしてブログ記事に貼り付けてください。
スタイルを変更してコード生成
ここで、スタイルを「ナンバリング」にしてボタン「コード生成」をクリックしてみてください。
次のようなコードが生成されます。
<ol> <li>ブログにログインする</li> <li>編集画面を開く</li> <li>記事を書く</li> <li>書いた記事をプレビュー</li> <li>微調整</li> <li>公開</li> </ol>
このように、リストの通りにタグが生成されます。
設定編
さて、以上が何の設定もない状態での動作になります。
<ul>や<ol>、<li>に対してCSSなどの属性を追加したいこともあると思います。
その場合は、「コードテンプレート」を編集します。
メニューの「画面」>「コードテンプレート」をクリックすると、次のような画面「リストタグ コードテンプレート」が開きます。
ここで<ul>や<ol>、<li>に対してCSSなどの属性を追加します。
ここではテストのため、次のように入力しますね。
- ul → testUL
- ol → testOL
- li → testLI
と設定して、ボタン「更新」をクリックすると、この「コードテンプレート」が保存されます。
試しに、スタイルを「リスト」にして「コード生成」してみると・・・
<ul>と<li>にそれぞれ「testUL」と「testLI」が指定されていますね。
また、スタイルを「ナンバリング」にすると、
<ol>と<li>にそれぞれ「testOL」と「testLI」が指定されています。
必要に応じてこの「コードテンプレート」を設定してみてください。
「コードテンプレート」の保管場所を変更
コードテンプレートは、デフォルトでは前バージョンと同じフォルダ内に保存されます。
コードテンプレートは、デフォルトでは、実行ファイルを置いたフォルダに「data」というフォルダを作成し、その下に「codetemplate.txt」というファイルを作って保管されます。
今回追加したツールは「listCodeTemplate.xml」というファイル名になります。
設定の変更方法は、画面「リンクタグコード生成ツール」のメニュー「ファイル」>「設定」にあります。
ここをクリックすると、設定画面が表示されます。
設定画面の上の「リンクタグ」というのは前バージョンのツールの「コードテンプレート」が配置される場所になります。
下の「リストタグ」が今回のバージョンで追加されたリストタグ用の「コードテンプレート」が配置される場所になります。
好きなパスを設定してください。
この他、設定ファイルなどが自動生成されるのは前バージョンと同じです。
ツールのコンセプト
本ツールは「ブログを書く手間暇を少なくする」ことをコンセプトに作りました。
だから、根本的に「大体でOK」という思想があります。
つまり、「完璧なコードを作るというより、大体できていればOK！あとは手作業でちょちょっと直そう、0から全部書くよりマシ」という考えです。
そんな緩い感じで開発しておりますので、手元の環境では万全を期して十分にテストしておりますが、あくまでツール利用時の不都合などは自己責任でお願いします。
あと、「こんな機能が欲しい」というのがあればリクエストしてください。
今後の開発の参考にさせていただきます。
ツールの詳細情報
※ 「設定ファイルがないと起動しない」という不具合があったため、公開を中止しております (2013/11/20)
- ツール名: HTMLタグ生成ツール
- バージョン: 0.1.1
- 公開日: 2013/11/19
- 開発コード: Miyota
- 開発環境: Java 1.7.0_21、MacBook Pro (13-inch, Early 2011)、Eclipse (Kepler Service Release 1)
ダウンロードした実行ファイルが「Miyota.jar」なのは開発コードそのままだからです。
また改定したり機能追加したらお知らせします。
次の機能追加予定・・・・
- 1件1様のリンクタグコード生成ツール
→機能追加しました (2013/11/20)
ツールの最新版について
こちらのツールは随時開発しており、最新版は0.3.2 (2013/11/24公開)となっております。
詳しくはこちらの記事をどうぞ。
