【コラム】

日本語で10行プログラミング

86 ブログにHTMLソースを貼れるよう変換する

86/90

開発日誌~Macを買った

今まで10年近くWindowsだけを使って来ましたが、新しいものにも挑戦してみようと思って、Macを買ってみました。実は、5年くらい前に一度、友人からMacを譲ってもらったことがあったのですが、Windowsとのギャップに挫折したことがあったのです。

今もMacで原稿を書いているのですが、今回はそれほど困ることなく移行できました。というのも、いまはMac上でWindowsを動かすことができるので、基本的にはWindows上で作業しつつ、余力があるときにMacに慣れていくということができるのです。

私は、Macで「Parallels Desktop for Mac」というソフトを利用して、仮想マシン上にWindowsを動かしています。仮想マシン上でOSを動かすのでとても遅いのかと思っていたら、そんなに重くなく、意外と軽快に動いています。時々不可解な現象が起きることもありますが、少しのことなので我慢できるレベルです。

今のところ、メールとWebを見るのはMacで、プログラミングや原稿を書くのはWindowsと切り分けています。MacとWindowsでクリップボードやファイルを共有できるので、とてもスムーズに作業を行うことができます。

使っている時間はだんぜんWindowsの方が長いのですが、せっかくなので、Macでも少しずついろいろなことができるように環境を整えていきたいなぁと思っています。せっかくMacを手に入れたので、なでしこもMac版を作りたいなぁと考えています。

ブログ用HTML変換プログラム

さて今回は、普通の文章をHTMLに変換するプログラムを作ってみます。最近では、自分のホームページをゼロから作るのではなく、ブログなどのツールを利用して構築することが多いと思います。

多くのブログでは、HTMLのタグがエントリに使えます。これはこれでとても便利なのですが、HTMLやプログラムのソースコードをブログに貼り付けようと思ったら、タグを示す文字「<」を「&lt;」、「>」を「&gt;」と書き換えなくてはなりません。これが非常に面倒なので、私はいつもなでしこの自作プログラムで、ソースを整形してから投稿するようにしています。

今回の10行プログラミングでは、私が普段利用している、ブログ投稿用にテキストをHTMLで利用できる表現に変換するプログラムを紹介しようと思います。

設計~最低限の機能を洗い出す

私がプログラムを作るときは、まず、どんな機能が必要になるのか、最低限必要なものを書き出すようにしています。

HTML変換プログラムに最低限必要なのは、次の機能です。

  • テキストの入出力を行うダイアログを表示する
  • HTMLタグをエスケープする
  • 改行をHTML記号に置換する

はじめからたくさんの機能をつけようと思うと、途中で挫折することが多いですし、プログラムを作るのが目的ではなく、仕事を片付けるのが目的ですので、とにかく、単純で簡単なプログラムを作ることを心がけています。

作成に必要な命令紹介

プログラムを作るにあたって必要になる命令などを紹介します。最低限必要な機能から、「入出力用のテキストダイアログ」と、「文字列の置換」という2つの命令があれば良いことが分かります。

1. 入出力用のテキストダイアログ

ブログに気軽に投稿できるように、HTMLへの変換作業が面倒だということになっては困ります。そこで、テキストエディタに何かしら書いて、ボタンを押したらすぐに変換結果が表示されるというインタフェースが理想的です。

なでしこの「メモ記入」命令はまさにこの用途にうってつけの命令です。

「ここに内容を書きます」とメモ記入。

メモ記入命令を使うとテキストダイアログを出すことができます

そして、「メモ記入」命令を使った結果は、特別な変数「それ」に代入されます。ユーザーが入力した内容を画面に表示するプログラムを作ってみると以下のようになります。

「ここに内容を書きます」とメモ記入。
それを表示。

上のプログラムを実行して、例えば「なでしこ」と入力して、決定ボタンを押すと、画面に「なでしこ」と表示されるはずです。

2. 文字列の置換命令

次に、文字列を置換する命令を紹介します。文字列を置換する命令は、ずばり「置換」命令です。『「文字列」の「検索語句」から「置換語句」へ置換』のように使います。こちらも、置換した結果は、変数「それ」に代入されます。

「しまうま」の「しま」を「やじ」に置換。
それを表示。

このプログラムを実行すると、「しまうま」の「しま」が「やじ」に置換されて、「やじうま」と表示されるはずです。

プログラムを作る

それでは、プログラムを作ってみようと思います。プログラムを作るにあたって、軽くプログラムの流れを確認してみましょう。

プログラムの流れは以下のようになります。

  1. エディタを表示して、ユーザーに元の文章を入力してもらう
  2. 文章中にあるHTMLタグをエスケープする
  3. 改行をHTMLタグに置換する
  4. 結果をクリップボードにコピーする
  5. 結果を画面に表示する

そして、実際になでしこで作ってみると以下のようになりました。

#ユーザーからの入力
「ここに文章を入力」とメモ記入。#1
#タグのエスケープ
「&」を「&amp;」に置換。#2
「<」を「&lt;」に置換。#3
「>」を「&gt;」に置換。#4
「 」を「&nbsp;」に置換。#5
「"」を「&quot;」に置換。#6
#改行をHTMLに置換
改行を「<br/>{改行}」に置換。#7
#クリップボードにコピー
それをコピー。#8
#結果を表示
それをメモ記入。#9
終わる。#10

1行目では、「メモ記入」命令で結果を得ています。

2行目から6行目ではHTMLのタグを特殊記号に置換しています。このエスケープ処理では、よく使うHTML記号を特殊記号に置き換えます。一番初めの置換で「&」を置換しているのは、次以降の置換で変換後の文字列に「&」が含まれているため、二重に置換されるのを防ぐためです。

そして、7行目では改行をHTMLの改行(ここではXHTMLにも対応できるように<br/>)タグに置換しています。改行を自動的に置換してくれる設定のブログもありますので、その場合はこの行を消します。

8行目では置換した結果をクリップボードにコピーします。

そして、9行目で結果を画面に表示して、10行目でプログラムを終了します。

プログラムを実行したところ

うまく変換できました

改造のヒント

今回のプログラムは、非常に単純です。ユーザーから入力してもらったテキストを置換して、結果を表示するだけです。

ですが、私はこれと同じようなプログラムをたくさん作っています。ほぼ、1度実行したらそれ以後は使わないような、使い捨てのプログラムを書きます。簡単なテキストの整形を行いたいときは、なでしこがとても便利なのです。

今回は単純な置換だけを行いましたが、なでしこには、多くのテキスト整形のための命令を備えていますので、これを利用することで、さまざまな仕事をこなすことができるでしょう。

86/90

インデックス

連載目次
第90回 10行プログラミング最終回~10行プログラミングを振り返って
第89回 フォルダ一括圧縮
第88回 テキストエディタに貼り付けたExcelの表を見やすく整形する
第87回 一発加算電卓
第86回 ブログにHTMLソースを貼れるよう変換する
第85回 カード式メモ帳
第84回 時間電卓を作る
第83回 アスキーアート地図エディタ
第82回 縦書き風テキスト作成ツール
第81回 Excelシートの比較を行う
第80回 ノルマ計算機
第79回 高速バックアップ
第78回 単語帳に読み上げ機能をつける
第77回 ホームページのバックアップツール
第76回 英単語帳を作成する(その2)
第75回 英単語帳を作成する(その1)
第74回 メモリカード挿入でデータをコピーするツール
第73回 モールス信号ソフトの作成
第72回 フォトCDランチャーを作る
第71回 残暑見舞い作成ツールを作る
第70回 画面キャプチャプログラムを作る
第69回 様々なルールに対応するビンゴシートのプログラムを作る
第68回 ビンゴカードを作る
第67回 ビンゴマシンを作る
第66回 パスワードマネージャの作成
第65回 アンドゥ機能をつける
第64回 テキストの比較ツール~FCフロントエンド
第63回 システム情報クリップ
第62回 飲み会電卓を作る
第61回 バイナリエディタの作成
第60回 メールフッタ作成ツール(その2)
第59回 メールフッタ作成ツール(その1)
第58回 プロセス監視ツールを作成する
第57回 TODOメモを作る
第56回 携帯電話をテキストリーダーに使う(2)
第55回 携帯電話をテキストリーダーに使う(1)
第54回 「オープンソースカンファレンス2006 Tokyo/Spring」に参加しました
第53回 10行でチャットソフトを作る(2)
第52回 10行でチャットソフトを作る(1)
第51回 プレゼンタイマーを作る
第50回 カラーピッカーを作る
第49回 簡単な暗号作成プログラム
第48回 お手軽データベース「SQLite」を使う
第47回 CUI(コマンドライン)環境を拡張する
第46回 デスクトップ画像を記録するプログラム
第45回 市外局番で住所を調べる検索プログラム
第44回 コマンドライン型ランチャーを作る
第43回 文字数カウンタを作る
第42回 日本語でバッチ処理
第41回 イベントドリブンと電光掲示板
第40回 なでしこでWindowsの「送る」メニューを使いやすくする
第39回 同人音楽即売会M3に参加して思ったこと
第38回 画像のサムネイル作成
第37回 なでしことExcelで行事予定カレンダーを作ろう
第36回 なでしことExcelで月間カレンダーを作ろう!
第35回 なでしことExcelで年間カレンダーを作ろう
第34回 急な電話にも安心、意外と便利な「手書きメモ」
第33回 携帯電話のアドレスデータを取り出す
第32回 記念日カウンターを作る
第31回 顔文字入力支援ソフト
第30回 アスキーアートのためのエディタ
第29回 HTTPサーバーを作る
第28回 手紙のあいさつ文を作成するプログラム
第27回 ギターコードの構成音を表示
第26回 音楽の再生スピードを変える
第25回 ミニスライドショーを作る
第24回 撮影日で写真を振り分け
第23回 PSP用テキスト画像の作成
第22回 金種計算
第21回 パスワードを自動生成
第20回 携帯メールでWEBを更新する
第19回 時間の使い方を反省するプログラム
第18回 ウェブを画像でキャプチャ
第17回 ラーメンタイマーを作る
第16回 画像のトリミングツール
第15回 ごみの分別カレンダー
第14回 デスクトップ検索ツール
第13回 フォント見本帳
第12回 セピア調の画像ビューワー
第11回 健康チェック
第10回 10行で壁紙にらくがきする
第9回 WEBサイトの更新チェッカー
第8回 WEBページのリンク切れをチェック その2
第7回 WEBページのリンク切れをチェック
第6回 音楽ファイルの整理 - メディアタグから自動フォルダ分類
第5回 請求書の自動作成・印刷~Word連携技
第4回 重要データのバックアップ術
第3回 10行ニュースリーダーを作ろう!
第2回 なでしことは その2
第1回 なでしことは? その1

もっと見る

人気記事

一覧

イチオシ記事

新着記事