読者です 読者をやめる 読者になる 読者になる

電子書籍を公開してみた(楽譜作成編)_その2

iBook HTML5

電子書籍を公開してみた(楽譜作成編)_その2

電子書籍を公開してみた(楽譜作成編)_その2

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

前回(電子書籍を公開してみた(楽譜作成編)_その1)は「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に載せます。(たぶん)

参考

以上です。