プログラミングノート

一からものを作ることが好きなエンジニアの開発ブログです。

スマホ向けのFAQページジェネレータを作りました

アプリに対するお問い合わせを色々頂くのですが、共通する内容も多く、開発者にとっても、ユーザーさんにとってもあまりよろしくない状態が続くことがよくあります。UIを改善していけば解決する問題もあれば、そうでない問題もあり、困ったときにまず参照できるFAQ的なものを準備したいなとずっと考えていました。


ただ、BestAlbum1つにしてもiPhone日本語/英語、iPad日本語/英語とかなりの量を作る必要があるため、ずっとペンディング状態になっていました。そこで今回プロジェクトの間の隙間時間を使って、この作業を軽減するためのツールを作成してみました。


完成したサンプルページはこちら
http://dl.dropbox.com/u/339699/genFAQ/ja/index.html


ソースコードはこちら
https://github.com/ntaku/genFAQ

使い方

$ git clone git@github.com:ntaku/genFAQ.git
$ cd genFAQ
$ ruby ./gen.rb 


とするとこんな感じでたくさんファイルが生成されてFAQの出来上がりです。
ruby1.9で動作します。1.8の人はCSVをFasterCSVに変更すると動くと思います。

genFAQ/en/index.html
genFAQ/en/update/0.html
genFAQ/en/update/index.html
genFAQ/en/tutorial/0.html
genFAQ/en/tutorial/1.html
genFAQ/en/tutorial/index.html
genFAQ/en/faq/0.html
genFAQ/en/faq/index.html
genFAQ/ja/index.html
genFAQ/ja/update/0.html
genFAQ/ja/update/index.html
genFAQ/ja/tutorial/0.html
genFAQ/ja/tutorial/1.html
genFAQ/ja/tutorial/index.html
genFAQ/ja/faq/0.html
genFAQ/ja/faq/index.html
cnv genFAQ/res/img/sample.png

詳細

対応したい言語毎にCSVファイルを準備します。
下記はデフォルトの日本語ファイルです。

*update,更新情報
//--------------------------------
2012.1.24 alpha version,初回バージョンを作成しました。

*tutorial,使い方
//--------------------------------
言語ファイルの作成,"ja.csv, en.csv のように対応する言語毎のCSVファイルを作成します。

<b>*label名</b>でセクションを定義できます。
<b>//</b>から始まる行はコメントです。
<b>空行</b>は無視されます。
FAQの書式は<b>タイトル,内容</b>です。
"

画像の挿入,"画像ファイルはres/img配下に設置した上で独自タグを記述します。
直接imgタグを記述しても問題ありません。

res/img配下の画像は自動的にサムネイルが作成されます。
詳細については、create_thumbnailメソッドを参照してください。

[img:sample.png]
"

*faq,FAQ
//--------------------------------
ライセンスは?,"MITでご利用ください。"


res配下にあるindex.html, sub_index.html, detail.htmlにここで指定された内容を差し込んでいるだけですので、HTMLタグその他普通に記載可能です。スタイルもres/style.cssのみですので、適当に編集してご利用ください。


画像については、そのままだと端末に対して大きすぎる場合が多いため、res/img配下に置かれたものについて自動的にリサイズをしています。[img:xxx.png]という独自タグを使えばページにはサムネイルが表示されてオリジナル画像へリンクされます。

ユーザーへの公開

gen.rbの定数を自分のアプリのものに書き換えて生成し、DropboxのPublicディレクトリに置けば完了です。


アプリリリース後もcsvを修正してコマンド実行するだけでいつでも変更できるので便利ですね!翻訳もCSVをそのまま使えば楽々です。

APP_TITLE = 'FAQ Gen'
BASE_DIR = 'genFAQ'
BASE_URL = 'http://dl.dropbox.com/u/339699/genFAQ'


まだサンプルしか作っていないので、自分のアプリに組み込んでフィードバックを反映させていきたいと思います。