こういう「箇条書きのリスト」を書くことがありませんか?

↓↓↓↓↓ここから↓↓↓↓↓

  • ブログにログインする
  • 編集画面を開く
  • 記事を書く
  • 書いた記事をプレビュー
  • 微調整
  • 公開

↑↑↑↑↑ここまで↑↑↑↑↑

あるいは、「ナンバリングリスト」とか。

↓↓↓↓↓ここから↓↓↓↓↓

  1. ブログにログインする
  2. 編集画面を開く
  3. 記事を書く
  4. 書いた記事をプレビュー
  5. 微調整
  6. 公開

↑↑↑↑↑ここまで↑↑↑↑↑

こういうリストタグを簡単に作るツールを作りました!

ツール概要

ツールの概要について簡単に説明します。
図を見ていただくとわかると思います。

Ss 2013111911

「リスト」と「コードテンプレート」を用意し、「コード生成」すると、「コードテンプレート」に従った「コード」が生成されます。

ツールを使ってみたら一発でわかると思いますので、やってみてください。

ダウンロード

ツールをダウンロードしてください。

HTMLタグ生成ツール (Miyota-011.jar)
※ 「設定ファイルがないと起動しない」という不具合があったため、公開を中止しました (2013/11/20)
こちらの最新版をご利用ください

以前公開したツールの機能追加版になります。

ツールを起動

ツールを起動するには、ダウンロードしたファイルをダブルクリックしてください。

起動しない場合は、

  1. 実行ファイルが日本語名フォルダ以下に置かれている
  2. Javaの実行環境 (JRE)がない

という2つの可能性が考えられます。

解決方法はこちらの記事を参考にしてください。

また、前バージョンのツールを利用したことがある場合、設定ファイルに互換性がないので削除してから起動してください。
もし前バージョンで「コードテンプレートのファイルパス」を設定している場合は、今回のバージョンのツールを起動して設定し直してください。

(設定ファイルはバージョンが上がって設定が増える度に変わりそうなので、対応を考えます)

操作方法

起動すると、次のような画面が表示されます。

Ss 2013111912

左側の画面「リンクタグコード生成ツール」が前バージョンのツールの画面で、右側の画面「リストタグコード生成ツール」が今回追加したツールの画面です。

右側の画面「リストタグコード生成ツール」について説明します。
(「リンクタグコード生成ツール」には変更がありません)

1. スタイルを選択する

リストタグは2種類あります。

リスト型 (HTMLタグでは <ul>)

  • ブログにログインする
  • 編集画面を開く
  • 記事を書く
  • 書いた記事をプレビュー
  • 微調整
  • 公開

ナンバリング型 (HTMLタグでは <ol>)です。

  1. ブログにログインする
  2. 編集画面を開く
  3. 記事を書く
  4. 書いた記事をプレビュー
  5. 微調整
  6. 公開

いずれか作りたい方のリストのスタイルを選択してください。

Ss 2013111902

ちなみに、このスタイルはコード生成後も変更できるのでご安心ください。

2. リストを入力して「コード生成」

スタイルを選んだら、リストを入力しましょう。
ここでは以下の内容を入力しています。

ss_2013111903.png

入力したら、ボタン「コード生成」をクリックします。

3. コードが生成される

下の箱にコードが生成されました。

Ss 2013111904

この例で生成されたコードはこちら。

これをコピペしてブログ記事に貼り付けてください。

スタイルを変更してコード生成

ここで、スタイルを「ナンバリング」にしてボタン「コード生成」をクリックしてみてください。

Ss 2013111905

次のようなコードが生成されます。

このように、リストの通りにタグが生成されます。

設定編

さて、以上が何の設定もない状態での動作になります。

<ul>や<ol>、<li>に対してCSSなどの属性を追加したいこともあると思います。

その場合は、「コードテンプレート」を編集します。

Ss 2013111906

メニューの「画面」>「コードテンプレート」をクリックすると、次のような画面「リストタグ コードテンプレート」が開きます。

Ss 2013111907

ここで<ul>や<ol>、<li>に対してCSSなどの属性を追加します。

ここではテストのため、次のように入力しますね。

Ss 2013111908

  • ul → testUL
  • ol → testOL
  • li → testLI

と設定して、ボタン「更新」をクリックすると、この「コードテンプレート」が保存されます。

試しに、スタイルを「リスト」にして「コード生成」してみると・・・

Ss 2013111909

<ul>と<li>にそれぞれ「testUL」と「testLI」が指定されていますね。

また、スタイルを「ナンバリング」にすると、

Ss 2013111910

<ol>と<li>にそれぞれ「testOL」と「testLI」が指定されています。

必要に応じてこの「コードテンプレート」を設定してみてください。

「コードテンプレート」の保管場所を変更

コードテンプレートは、デフォルトでは前バージョンと同じフォルダ内に保存されます。

コードテンプレートは、デフォルトでは、実行ファイルを置いたフォルダに「data」というフォルダを作成し、その下に「codetemplate.txt」というファイルを作って保管されます。

今回追加したツールは「listCodeTemplate.xml」というファイル名になります。

設定の変更方法は、画面「リンクタグコード生成ツール」のメニュー「ファイル」>「設定」にあります。

Ss 2013111506

ここをクリックすると、設定画面が表示されます。

Ss 2013111913

設定画面の上の「リンクタグ」というのは前バージョンのツールの「コードテンプレート」が配置される場所になります。
下の「リストタグ」が今回のバージョンで追加されたリストタグ用の「コードテンプレート」が配置される場所になります。

好きなパスを設定してください。

この他、設定ファイルなどが自動生成されるのは前バージョンと同じです。

ツールのコンセプト

本ツールは「ブログを書く手間暇を少なくする」ことをコンセプトに作りました。

だから、根本的に「大体で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」なのは開発コードそのままだからです。

また改定したり機能追加したらお知らせします。

次の機能追加予定・・・・

ツールの最新版について

こちらのツールは随時開発しており、最新版は0.3.2 (2013/11/24公開)となっております。

詳しくはこちらの記事をどうぞ。

リンクタグコード生成はこのツールにお任せ!複数ページのリンクタグを効率よく作り出せます

[米国NLP協会認定 NLPトレーナー、NLPコーチングトレーナー]
長野と東京の2拠点生活をしながら、より自由で豊かな人生を模索しています。
フリーランスシステムエンジニアとして、企業様向けにはプロジェクトマネージャや新入社員研修の講師 (Javaプログラミング研修など)を行っています。
また、個人の方向けにはコーチングやカウンセリングを行っており、本ブログやメルマガの執筆、ラジオ出演、セミナーなどを通じて、「すべての人がより自由で豊かな人生を」送るサポートをしています。
・コーチングのお申し込みはこちら
・メルマガの登録はこちら
・詳しいプロフィール、お問い合わせはこちら

無料メールセミナー

無料メールセミナー「ファーストキャッシュコーチング」

「自分の知識、経験、スキルを活かしたオリジナルセミナーを開催し、ファーストキャッシュを得る」無料メールセミナー (全9回)をお送りしています。

ご登録はこちらから

Feedlyに登録

こちらの記事があなたの役に立ちましたら、ぜひFeedlyに登録して、ブログの更新をチェックしてください。

follow us in feedly

メルマガ好評配信中!

メルマガ「ワンダフルライフ」

読んだあなたが「まず、やってみる」気持ちになるメルマガ。

あなたが「ちょっと前向きになる」よう「そっと背中を後押し」します。

メルマガの登録はこちらからどうぞ。

Facebookページ

Facebookページもあります!下の画像をクリックして登録してください!