SIHOのプログラミングわーくワク

興味の赴くままに勉強してたら、読み書きできる言語は9個になりました。他にもいくつか気になる言語があったりなかったり?  まだまだ続く、楽しいお仕事わーくワク♪

  • « 
  • 10 
  • 11 
  • 12 
  • 13 
  • 14 
  • 15 
  • 16 
  • 17 
  • 18 
  • 19 
  • 20 
  • 21 
  • 22 
  • 23 
  • 24 
  • 25 
  • 26 
  • 27 
  • 28 
  • 29 
  • 30 
  • 31 
  • »

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

iPhoneでの縦書きテキスト

2010.09.05 (Sun)

電子書籍の引き合いがおおいので、縦書きテキストの実装方法を試してみた。
taegakitxt
調べてみたところ、UILabelなどのインターフェイス内の部品では縦書きテキストに対応していないらしいので、インターフェイス外になるUIWebVeiwでの表示に挑戦してみた。
(調べている途中では、一文字一文字改行を入れて、文字位置や字間を調整して独自クラスで実装したという猛者もいたけど、Objective-Cを始めたばかりの初心者には到底できないのでパス)

■縦書きレイアウトを実装するjsたち 「涅槃」-nehan-
http://www.moongift.jp/2010/04/nehan/
「竹取.js」
http://taketori.org/js.html

竹取.jsは段組みがしやすい感じだったけど、今回は段組みではなく、次ページが左につながっていて、横スクロールで見せたかったので、nehanを採用。

■iPhoneOSに明朝フォントが入っていない件
ほんとびっくりしましたよ。日本語は明朝フォントがなくてゴシックだけなのよね。
そこで、(条件付き)MITライセンスのIPAフォントを使用しました。
◇窓の杜のNews
http://www.forest.impress.co.jp/docs/news/20100226_351601.html

◇iPhoneにフォントを追加する方法(ただし、iOS3.2以降のみ)
http://develop.calmscape.net/dev/135/

まぁ、そうやって、フォントも入れて、nehanを使ったhtmlも作ったところで、また問題。
Xcodeでのコンパイル時に、nehanで使っているjsはコンパイル用のソースコードとして認識されるらしく、こちらのルールを変更してやらなければならないらしい。
■リソースバンドル内の HTML ファイルで、外部 JavaScript や CSS を読み込む
http://www.evernote.com/pub/akisute/BookMarks#n=210c03a5-d380-422e-b928-0f44fcc53d27

そして、さらにさらに、nehanでは縦書きにするとき、バランスが悪くなってしまう、文字を画像に差し替えて表示しているのですが、バンドルされたhtmlで使用している画像を表示するためにも一工夫いる訳であります。
用は画像が参照されるようにbaseURLを指定してあげることが必要なんですね。
■参考URL
http://iphone-dev.g.hatena.ne.jp/Miyakey/comment?date=20091017

ここまでなんとかたどり着いて、htmlもいい感じに縦書き表示できたんだけど、
横長のページの左端が初期表示になっちゃう。縦書きだから、最初は右端。これをなんとかしたい。
webViewDidFinishLoadのメソッド内で、stringByEvaluatingJavaScriptFromString:@"window.scrollTo(100000,0);"ってやっても、nehanくんのレンダリング途中らしく、正しくスクロールしてくれないのだ。
■たどり着いた対処法
webViewDidFinishLoadのメソッド内にtimer処理を加えて、1.0秒後に[webView_ stringByEvaluatingJavaScriptFromString:@"window.scrollTo(100000,0);"]てやったら、正しく右端が表示された。
注意事項としては、最初にちょろっとペーじの左端が見えるので、上にマスク用の画像を置いて、1秒後に外すようにした。
+アニメーションの演出も加えて待ち時間も楽しく待てるようにしたよ。

コメント

コメントの投稿

トラックバック

この記事のトラックバックURL

 | HOME | 

プロフィール

siho_prof

SIHO
しほ

Twitter:
SIHO_o

viva mambo, inc.
iPhone&iPad / Flash / Kinect
使用言語:Objective-C, ActionScript 3.0, Javascript, Lua, PHP, C#, C, C++, WSH。
F-site staff

Solar System Simulator 広報

Web,スマートフォン、Desktopを問わず、アプリ制作が好物。執筆は必要に応じて。お仕事くださいまし。

サイネージ:ガンダムフロント東京・キャラクターフォトスポット設計(2012/4~常設)

アトラクション:富士急ハイランド 戦国BASARA ゲーム設計&プログラミング(2010/7-2012/4にて常設展示)

イントラシステム:「某メーカー研究所KJ法システム」DB,Flash,PHPを含むソリューション設計&DB構築、「美術系専門学校の生徒管理システム」iPadクライアントを含むソリューション設計&DB構築

iPhone/iPadアプリ:某球団試合速報アプリ、『魂を熱くさせる 宇宙飛行士100の言葉』『Mitaka Gallery -てのひら宇宙-』

書籍同梱ソフト:『4次元デジタル宇宙紀行Mitaka』『DVD-ROM&図解 動く! 深海生物図鑑』『DVD-ROM&図解 ハッブル望遠鏡で見る宇宙の驚異』

著書:『世界一わかりやすい Windows 7』『世界一わかりやすい Flash CS3』

検索フォーム

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。