D3.jsを用いたフレームワーク描画ツール（その１）

HTML5

frameworks_on_D3_01

D3.jsを用いたフレームワーク描画ツール（その１）

毎年恒例の年越しプログラミング

何がしたいのか

いや、まあ根源的には脳みその体操なんですけどね。

seeds

D3.js公式サイト（日本語）というライブラリが素晴らしい。これを使って何か作りたいと思った。

needs

パワポでフレームワーク（ロジカルツリーとか）を書くのが疲れた。図形の大きさや矢印の調整から開放されたいと思った。

何を作るのか

ロジカルツリーの構成要素を記入すると、いい感じに描画してくるHTML5+JS+CSS3のアプリを作ります。

イメージ（モック）

f:id:naotooncajon:20131231232034p:image

ポイント

  • 左辺はテキストエリア
    • Markdownっぽい表記で階層構造を記述する
  • 右辺はD3.jsによるSVG描画
    • 左辺の構造をインタラクティブに描画
    • ツリー構造の高さ・幅・間隔は左辺の要素数によって自動調整

何が困っているか

  • D3.jsの使い方ワカンネ
    • モックではJSON形式のデータを読み込んで描画しているが、入力値の即時反映ってどうすのか
    • SVGを画像ファイルでダウンロードって可能？
  • そもそもJavaScriptワカンネ
    • textareaの入力値の取得方法どうする
    • Markdown形式をD3が認識する形式に変換する方法どうする
    • レスポンシブデザインにしたいがどうする

感想

D3(DataDrivenDocument)は非常に素晴らしい。データ可視化というの必要になってくると感じた。ほらビッグデータ（笑）って言うし。

以上です。

Chromeの起動オプション

tips mac

tips_03

Chromeの起動オプション

困ったこと

ローカルファイルの読み込みができない。例えば、file:///Users/7010oncajon/index.html内から、./hoge.jsonがなぜか読み込めない。

前提

原因

どうやらChromeの仕様（セキュリティ対策？）でローカルファイルはデフォルトでは読み込めないよう。-allow-file-access-from-filesという起動オプションを指定すれば可能。ちなみにWebに配置している場合は問題ない。

解決策

以下のいづれか。

  • Safariを使う（笑）
  • ターミナルから以下を実行し、起動する
    • open -a Google\ Chrome --args -allow-file-access-from-files
  • Automatorの設定をする
    • Automatorを起動、種類は「アプリケーション」
    • 左側ペインで「Run Shell Application」を選択
    • シェルってところに「open -a Google\ Chrome --args -allow-file-access-from-files」を記入
    • あとは適当な名前で保存し、それ起動するようにする。「Google Chrome (withOptions).app」とかにすればよい。

f:id:naotooncajon:20131231122255p:image

感想

電子書籍を公開してみた（楽譜作成編）_その２

iBook HTML5

電子書籍を公開してみた（楽譜作成編）_その２

電子書籍を公開してみた（楽譜作成編）_その２

いや、忙しかったんですよ、最近。娘が生まれたりして。

前回（電子書籍を公開してみた（楽譜作成編）_その１）は「ABC記譜法 + HTML5/JS」を用いて、楽譜をレンダリングしてみた。今回は、それをiBooksにしてみる。

作り方

HTML5 to Widget

前回作ったhtmlをウィジェット化する。

  • info.plistの作成（中身は後述）
  • 作成したsiki.htmlとinfo.plistを同じディレクトリに入れ、そのディレクトリ名をsiki.wdgtに変更
  • Mac上でウィジェットのアイコンになっていることを確認

info.plist

参考サイトを元に必要そうな所だけ書き換え

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
  <key>CFBundleDevelopmentRegion</key>
  <string>English</string>
  <key>CFBundleDisplayName</key>
  <string>siki</string>
  <key>CFBundleIdentifier</key>
  <string>naoto.on.cajon.widget.siki</string>
  <key>CFBundleName</key>
  <string>siki</string>
  <key>CFBundleShortVersionString</key>
  <string>1.0</string>
  <key>CFBundleVersion</key>
  <string>1.0</string>
  <key>CloseBoxInsetX</key>
  <integer>15</integer>
  <key>CloseBoxInsetY</key>
  <integer>15</integer>
  <key>Height</key>
  <integer>1024</integer>
  <key>MainHTML</key>
  <string>siki.html</string>
  <key>Width</key>
  <integer>1024</integer>
</dict>
</plist>

widget on iBooks

iBooks Authorでwidgetを挿入をする

  • メニュー上部の“ウィジェット”を選択
  • HTMLを選択
  • あとはよしなにレイアウトや説明文を変更

完成

macでプレビュします。（OSXのアップデートでmacでのiBooksを利用することができるようになりました）

ついでにmidiをm4aに変換して、入れておきました。音もなります。

f:id:naotooncajon:20131208230314p:image

“楽譜を表示する”をタッチすると、、、

f:id:naotooncajon:20131208230309p:image

こうなります。（センター寄せしてなかった... orz）

次回予告

  • iBooksStoreに載せます。（たぶん）

参考

以上です。

電子書籍を公開してみた（楽譜作成編）_その１

HTML5 iBook

電子書籍を公開してみた（楽譜作成編）_その１

電子書籍を公開してみた（楽譜作成編）_その１

美しい音楽は、楽譜もそうあるべきだ

前回（電子書籍を公開してみた）は普通の小説形式を作成した。iBooksにはhtml5を内蔵することができると聞いたので、ギミックがある電子書籍を作ってみようと思う。

作るもの

簡単な楽譜を作ります。構成要素はこんな感じ

電子書籍の楽譜 ＝ ABC記譜法 + HTML5/JS + iBooks

作り方

ABC記譜法

ABC記譜法とは、五線譜をASCII文字だけで表現する方法。たぶん、音楽経験者でパソコンを弄る人は似たようなことはやってると思う。例えば、「カエルの歌」は以下で表される。

CDEF EDC2|EFGA GFE2|C2C2C 2C2|C/2C/2 D/2D/2 E/2E/2 F/2F/2 EDC|

詳しくはwikiること。ABC記譜法 - Wikipedia

abcjs

ABC記譜法をHTMLにレンダリングしてくれるJavaScriptのライブラリ（abcjs）を利用しました。今回は嫁さんのオリジナル曲をレンダリングしてみました。（無許可です）

siki.html

preタグの中身がABC表記法で書かれた曲です。その周りはただのhtml

<!DOCTYPE>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>四季</title>
    <script src="javascripts/abcjs_plugin_1.7-min.js" type="text/javascript"></script>
    <script type="text/javascript">
    ABCJS.plugin["show_midi"] = true;   //デフォルトはtrue
    ABCJS.plugin["hide_abc"] = false;       //デフォルトはfalse
    </script>

</head>
<body>
    <pre>
X: 1
M: 4/4
L: 1/8
K: D
Q:1/4=85
T: 四季
T: siki ~four seasons~
C: 7oCの嫁（2012）
%%MIDI program 48
EF|E2EF EFAF|EFDE F2EF|E2EF EFAF|EFDE D2EF|
E2EF EFAF|EFDE F2EF|E2EF EAdA|cdAc B4||
d4 c2A2|F6 EF|A2EF B2AB|A8|
d4 c2f2|B4 A2fe|B2fe B2dA|B6 EF||
E2EF EFAF|EFDE F2EF|E2EF EFAF|EFDE D2EF|
E2EF EFAF|EFDE F2EF|E2EF EAdA|cdAc B2af|
e2af ef/2e/2 dA|cdAc B2af|e2af e4|f4 a4|b8|-b8|] 
    </pre>
</body>
</html>

そんで実際にレンダリングしたのはこっち

f:id:naotooncajon:20131022201032p:image

おおっいい感じじゃないですか。HTML5最強。力尽きたので今回はここまで。

次回予告

  • 今回作ったhtmlをiBookに取り込んで、電子書籍化します。
  • その際、midiも合わせて取り込めたらいいな。（再生機能付き楽譜）

参考

以上です。

マーフィーの法則（あるあるネタ）＠情報処理技術者試験

ネタ 情報処理技術者試験

マーフィーの法則＠情報処理技術者試験

マーフィーの法則（あるあるネタ）＠情報処理技術者試験

資格試験が終わったので、またアウトプットを増やしていこうと思う

問題の難易度に関する一般則

1. 設問が簡単そうに見える場合、意外と解答は難しい
2. 設問が難しそうに見える場合、もうどうやってもお手上げだ

オワタ＼(^o^)／

試験会場に関する勝手な推測

1. 高度試験になればなるほど僻地で実施される
2. 駐車場完備の会場なんて存在しない
3. “土足厳禁”な会場が試験前日の受験生の悩みの種だ

内履きなんて持って無いですよね。。。え、スリッパですか。

天気に関する個人的願望

１０月第３週の日曜日は晴れの特異日だ
（ただし、２０１３年は除く）

今年は寒かったです。

高度試験受験者が初学者にドヤ顔を見せるタイミングベスト３

1. 大型書店にて　　（押しのけて分厚い参考書を手にとってみる）
2. 行きの電車にて　（タイトルが見えるように参考書を広げてみる）
3. 帰りの道すがら　（持ち帰った座席表をポケットから落としてみる）

ええ、見せつけますとも、最高のドヤ顔を。

言ってもなかなか信じてもらえないこと

不正行為で退室させられた人を見た

本当なんです、びっくりしました。

高度試験当日の出席率の推移

指数関数的に減少する

みんなあきらめんなよ！！

高度試験当日の出席率の推移の追補

時間の経過をx、出席率をyとした時、y=f(x)=a^x (0<a<1)がなりたつ
ただし、x=0を申し込み締切時、x=1を午後Ⅱ終了時とすること
経験的にa=0.1とおくと、およそ正しく近似できる。すなわち、特徴的なx値をサンプリングするとyは以下の値をとる
　　
　　y = f(午前開始時)  = 0.6
　　y = f(午後Ⅰ開始時) = 0.4
　　y = f(午後Ⅱ開始時) = 0.3
　　y = f(午後Ⅱ終了時) ~= 0.0 
　　

式は適当です。

7oC予想

会社が合格奨励金を取りやめた瞬間、その社員の受験者数は激減するだろう

ヽ(´ー｀)ノしーらない

わりと真面目な解答のコツ

1.問題文はたとえその状況が不条理でも、絶対的に正しい
（こんなのありえねーよとか言ってはいけません）
2.解答は一意に定まるようにできている
（IPAがそう言っています。）
3.図解の解答はシンプルになるようにできている
（複雑な図解を見たことないです。採点しやすいようになっているのだと思います）

以上です。

合格してますように。合格してますように。 合格してますように。

OSのコマンドをRubyから実行する

ruby tips

tips_02

OSのコマンドをRubyから実行する

困ったこと

OSのコマンドや別のツールをRubyから実効する方法が分からん。

前提

  • ruby 1.9.2p320
  • コマンドの終了ステータスを受け取る必要あり

解決策

systemメソッドを用意する。（lsコマンドを例にとる）

command.rb

# coding: utf-8
puts "ls -lを実行します"
system("ls -l ./command.rb")    # 存在するファイル（正常終了）
status = $?.exitstatus              # => 0
puts "終了コード : #{status}"

puts "ls -lを実行します"
system("ls -l ./command.none")  # 存在しないファイル（異常終了）
status = $?.exitstatus              # => 1
puts "終了コード : #{status}"

command.log

mba:ipass 7010oncajon$ ruby command.rb 
ls -lを実行します
-rw-r--r--@ 1 7010oncajon  staff  377  8 27 23:39 ./command.rb
終了コード : 0
ls -lを実行します
ls: ./command.none: No such file or directory
終了コード : 1

感想

  • とても便利
  • やり方は他にもあるようだ、

電子書籍を公開してみた

iBook

novels_01

電子書籍を公開してみた

生みの苦しみを知れ。 by ちはやぶるの国語の先生

電子書籍がいよいよ盛り上がっており、自作する環境（作成ツールや公開サイト）を充実してきたので、公開を試してみる。自炊のやり方ではなく、自作の本を作るやり方です。

作ったもの

f:id:naotooncajon:20130826214342p:image

作り方

原稿を書く

ひたすらテキストに書く。今回は学生の頃に書いてあった文章を推敲し、小説の体にブラッシュアップ。恥ずかしいとか言ってらんない。

電子書籍化

テキストの原稿を電子書籍にする必要がある。電子書籍作成アプリは以下の現状２択かと思われる。

  • sigil
    • Googleのツール。汎用的なEPUB形式に対応しているが、使い勝手が微妙かも。
  • iBooks Author
    • Macのツール。使い勝手やセンスは抜群だが、汎用的なEPUB形式ではなく独自形式。

ええ、当然のことながら、iBooks Authorですよ。使い方は簡単であるから特に迷わないでしょう。デザインが美しいので、標準のテンプレートを使っただけで、素敵な文章が書けたような錯覚を受ける

f:id:naotooncajon:20130826214336p:image

公開

どこで公開するかは少し困った。iBooksで公開するのがApple流だが、iPad持っていないし。結果、一旦PDF出力をしてから以下のサイトで公開しました。

iPadZine

f:id:naotooncajon:20130826214331p:image

本当はすでにアカウントを持っているパブーを使いたかったんだけど、無料アカウントでPDFをアップすることはできないようだ。

作ってみた感想

iBooks Authorが強力すぎる。残念な点は以外だが、問題ない。

  • 日本語縦書ができない
  • 動作が重い（おれのMBAだからかもしれないが）

iPadZineはわかりやすいUIでよい。気になるのは以下。

  • Androidではダウンロードできない。（今回は別でPDFを直接おいておくようにした）

次は以下のような本を作ってみたい。

  • 映像や音声を入れめるので、ドラム（ルーディメンツとか）の教則本
  • 数式を入れ込んでみて、数式を使った数学読本
  • SE初心者（プログラムはできるが、システム開発の経験は無い）人向けの、教則本