html5 javascriptでスマホアプリ

スマートフォンで、ネイティブアプリなのか、WEBアプリなのか、という話があったので読んでみたら、とりあえず両方並行していいとこ取りしながら転がすけど、今後はWEBアプリになるんじゃないか、という論調。そのWEBアプリというのが、HTML5の上に、javascriptで書かれたもの。こっち方面はまったく不勉強で、改めて見てみて驚いた。シューティングやアクションなどの動きの激しいゲームも動いてるじゃありませんか。javascriptで。
「html5 ゲーム」「html5 canvas アニメーション」などで検索するとぞろぞろ出てくる。
眺めてると、ゲームのための javascriptのフレームワークenchant.jsというのがあって、ゲームに関してはほぼこれが決定版っぽい。
PCでは有名な吉里吉里/KAGというノベルゲームエンジンもエミュレートできる、らしい(調べる)てことは。去年、吉里吉里で作った、日野裕太郎『おかえりください』をiphoneやandroidに移植するハードルもぐっとさがっている、っぽい。
ただ、やっぱりここも最大の問題は、WEBアプリにした場合、どうやって金にするのか集金するのか。ネイティブアプリだと app storeがあるし、android marketもある。でも、WEBの場合、そこが致命的に弱いよなあ。結局いつまでたっても「WEBはタダ」となってしまう。たとえば、paypalを使って月々課金することも可能だけど、「WEBはタダ」という意識が立ちはだかるので、あれこれ気をつかって作りこんでも、たぶんタダはタダ。
コンプガチャみたいな仕組みならいいんだろうけど、あれは組織ぐるみ会社がかりだからできること。ひとり個人が、プログラムはどうにか頑張ったとしても、グラフィックデザインを含めたパッケージとか、法律がらみの運用面とか、かなりしんどい。
ただ、んなこと言ってるといつまでたっても何も出てこない・始まらない。とりあえず、日野裕太郎『おかえりください』をhtml5、スマホに移植してみよう、か。
ネット記事の原稿料

ネットで仕事を見つけるためのマッチングサイトには、ライティングの仕事も掲載されている。そのほとんどはブログへのヤラセの投稿、あとはSEOがらみの記事や、ネタ・テーマを指定されての記事。原稿料がびっくり。400字詰め原稿用紙に換算すると、1枚50円程度になってしまう。
また、いわゆるニュースサイトやポータルサイトに掲載するような記事も1枚500円程度。
わたしは以前、弱小出版社にいた。原稿料も、大手出版社と比較すると安かった。それでも原稿を頼むときは1枚2000円程度になるように調整してお願いしていた(ペラ1000円)それもほぼ10年前。
ネットに掲載されているテキストの質うんぬん。そりゃこのギャラじゃ、その程度にしかならんだろう。書き散らして、かき集めて、なんぼにするしかない。
ネットは印刷も紙も運送代も必要ない。言ってみれば、タダで情報を発信できる。なので、コンテンツにも金をかけない。って、違わないか。だからこそコンテンツに金をかけられるんじゃないのか。
ネットで金にする(最近ではマネタイズとかいうらしい)有効な方法がないもんだから、コンテンツに金をかけられない。安いコンテンツが垂れ流されたんじゃ、そんなものに金を払おうとも思わない。という悪循環じゃないのかね。
WEBサイトを構築するのに、制作会社に依頼すると、何人月とか工数という妙な単位を持ち出されて、ちょっとしたサイトを作るのにン百万単位になることも珍しくない。器を作るのに金をかけるヒマがあったら、中身に金かけろ、だ。
ネット企業の経営者や、アルファブロガー(ってなんじゃそりゃ)あたりの言ってることを見てると、なんちゃら新聞に掲載された、だの、どこそこの番組に出た、だの。既存メディア万歳で、ネットをメディアとしてなんとかしよう、なんて意識は感じられない。
結局、従来の権威が大好きなだけじゃん。
それで意識が高いだ低いだ、よく言ってんなあ、と思う。
テレビラジオ新聞雑誌書籍などなど、既存のメディアはむずかしい状況になってるんだろうけど、それにとってかわるものとして、安直にネットでいいのか、と。とってかわっていいのかな。
あっちが閉塞状況だから、こっちを見たけどあまり感心しないよなあ、という今日この頃。
jquery mobile管理化に別のjavascriptを

jquery mobileは、一度ページを読み込んだらいつまでどこまでDOMを保持管理してるのかが、複雑に入り組んでいる。サイトに着地して、ページのヘッダまでを読み込んだら、あとはbody部分のDOMの書き換えでページ表示している。リンク、というか、ページの取得は ajax が基本。そのために、id属性などは、ページに一意ではなくて、サイトで一意にしておいて、DOMまわりのトラブルを避けることが推奨されている。ajaxとidなどのプロパティは密接だからねえ。
このあたり「jquery mobile ポケットリファレンス」の Chapter20 ページイベントに図があって、ちょっとわかりやすい、かも。
『jQuery Mobile ポケットリファレンス』
森 直彦
やろうとしたことを具体的に。
PCサイトでは。
・本の詳細ページを開くと、そこには立ち読みテキストを読み込んで表示するコンテナがある。
・このコンテナにページャーがあって、ページリンククリックで ajax を走らせて、立ち読みテキストの次ページを取得して、コンテナ内を書き換えている。
上記したように、jquery mobileのDOM管理下だ。自作Javascriptで、$.ajaxを使ってページを取得する…スキルはわたしにはない。該当ページだけ ajaxではなくて、サイト外リンクを読むのと同様、ページ遷移するやりかたも用意されているが、それは jquery mobileの作法流儀じゃない。該当ページは、perlで動的に作ってるので、ページの中にJSONのデータを埋め込んで、evalでオブジェクトに読み込んでおくことにした。
というのが昨日までのあらすじ。
あとは、読み込んだオブジェクトを該当コンテナに $(#id).html(obj) とやれば楽勝、のはずだったのが、表示されるのは初めてページを読み込んだ時だけ。次にjquery mobile がajaxで遷移するとなにも表示されない。
alert(obj)では表示される。コンテナに直接 document.write(obj) とやると、エラー。とりあえず、pageshow とか pagecreate とか pagebeforecreate とか、それっぽいところにalertを入れまくって何が起こってるのかみた。
$(document).bind(pagebeforeload, function(e,d){ alert(obj) });
$(document).bind(pageshow, function(e,d){ alert(obj) });
見てると。一度、オブジェクトに読み込んだら、いつまでも保持してる、っぽい。てことは、#id も掴んでまわしてる様子。そんなところに $(#id).html(obj) とやっても、受け付けてくれない、ということ、かな。
なので、pagebeforeload ページを読み込む前のところで、無理やり $(#id).remove() と初期化(?)したら、意図通り立ち読みテキストを該当コンテナに流し込むことができた。

iphoneで見る創作文芸見本誌会場HappyReading
【象印社 「ソラ」著者:永瀬月臣・鳥久保咲人・くまっこ イラスト:あめ】
ヒラギノ明朝の縦書きはバランスもよくて、ほれぼれする美しさ。フォントは大事。小説に縦書きは大事、というのがよくわかるスクリーンショット。
これで公開だ、と思って、ヨメのAndroidで確認して愕然。というか慄然。縦書きになってない。
Androidもiphoneと同じwebkitのはずなのに、AndroidのブラウザはまだCSS3のwriting-modeに対応してないのだ。なんじゃそりゃ、と思って検索してみたら、Androidは個々ばらばらで、怨嗟呪いの声があちこちからあがっていた。
てことで、今まで公開していたスマホサイトも android用に残しておくことに。
iphone のヒラギノ明朝がきれいな、新スマホサイト
android のために残した今までのスマホサイト
うーん。スマホになったらブラウザの対応は簡単だと思ったのに。
[更新]2026-02-02 15:11:07
初心者メモ:javascriptのオブジェクトとかJSON

ハマったのでメモしておく。とほほ。
やりたいこと。
JSONで連想配列のペアを渡して、そいつをevalで読み込みオブジェクトにして、キーを作って値を取り出す。ありがちで、よく使われるシチュエーションだ。なのに、どうにもこうにも見えてこないんで、小さくテストをしてみた。
var data = {key1:val1, key2,val2}; というJSONのデータ
まず、evalの書き方でハマった。WEBを探すと、evalに渡す時に、変数を()で括る必要がある、という記事を多数見かけたので、やってみたら、missing after elements だかのエラー。
var obj=eval(data);
と、なんの細工もせずにシンプルに書いたら、これでOKだった。()で括る必要があったり、”の展開を考えたり、ラベルが問題?とか右往左往した。ネットの2次情報を呪文状態で使っちゃだめですよ、てことだな。1次情報に当たるべし、だった。
さて、次のハマり。
var str = "key";
var num = 1;
var key = str + num;
どの値が欲しいのか、てことで、こんなことは当たり前にある。
変数の key を作ったんで、さて値の取出しだ、と
obj.key
とかやったら undefined
for(var k in obj){
alert(k);
}
でオブジェクトを確認すると、当然 key1 はある。添え字とか、オブジェクトとか、値の取出しとか、グーグル様にすがった…これもevalの書式と同じことだった。基本部分をちゃんと読め、だ。おれ。
obj[key]
とやればいいだけだった。上記以外にも、セミコロンを最後に忘れてたり、JSONの中のダブルクォートをどうしようかとか(結局わからず、JSONのデータ中で使われてるダブルクォートはシングルクォートにした)
ほとんど半日潰れたようなもんだぞ、ううう。
とりあえず。これが解決したので、創作文芸見本誌会場HappyReading のスマホ版リニューアルに向けて立ち読み動作の目途が立った、かな。
ここんとこ同じことばかり言ってアレだけど。jquery mobile は文句のつけようのないデザインフレームワーク。ネーム、絵コンテ、下書きまでやったら、残りのペン入れ、仕上げをやってくれるのだ。でもさすがに、それにはお約束事があって、jquery mobile のお作法では、リンクでページの読み込みや、ajaxの挙動にクセがある。
テキトーにページを読み込んだりajaxでコンテナを書き換えたりできるんだけど、それをしちゃうと、デザインフレームワークを生かせない。jquery mobileが提供してくれているデザインは、スマホに特化したもので、それはスマホの特性、画面、UIを考えて作られたデザインだ。考えらえたデザインを捨ててまで、自前のオリジナルjavascriptを組み込むのは愚の骨頂。デザインとjavascriptと、どちらのコストが高いか、比べるまでもない。
てことで、今、ajaxでいちいちページごとにサーバーに来て取得していた立ち読みテキストを、JSONで一度に取得してあとは、javascriptで document.write するだけ、に変更中。iphoneのヒラギノで見る縦書きにぞっこん、なので、モチベーションは高いのでありました。
メモ:縦書き css3 writing-mode

創作文芸見本誌会場HappyReadingをはじめとして、わたしの作って公開しているサイトのあちこちに、文章を縦書き表示するページがある。いや、やっぱり小説は縦書きじゃなきゃ困る、昭和なもんで。
ブラウザでいえば、IEが以前から独自拡張で縦書き表示ができていた。
2010年ぐらいから、amazon の kindleがくる、すわ黒船来襲か!?というの踊らされ、あちこち見て回ってると、今なお、epub 、電子書籍のための規格決めで紆余曲折中らしい。少子高齢化じゃないけど、「日本語圏」って、世界的にはマイノリティになるんだろうな。
てのはともかく。
今日時点、ざっと検索したところ、webkit系のブラウザは writing-mode を実装していて、日本語の右から左へ流れる縦書きとか、アラブの右から左に流れる横書きなどに対応している(safariとかchromeですね)
わたしのサイトの縦書きは無理やり。幅1emのブロック要素にテキストを流しこんで、それをfloatで右から並べてる。ハイフンやかぎかっこなどは回転させて、句読点は位置を調整している、んだけど、しょせん横書きのフォントを縦に並べてるだけなので、フォントの環境によっては(プロポーショナルフォントなどで表示されてしまうと)全体がふにゃふにゃ波打つし、調整しきれない句読点なんかがハミ出していて、よろしくない。
で、safariで以下のスタイルシートを試したところ
font-family:"HiraMinProN-W3", "@MS 明朝", serif, sans-serif;
direction:ltr;
unicode-bidi:bidi-override;
-webkit-writing-mode:vertical-rl;
writing-mode:vertical-rl;
きれいな縦書き表示。縦書きフォントを使ってるので、妙な歪みもないし、iphoneで見ると、ヒラギノ明朝はきれいだし。
ブラウザの対応状況が微妙なので、PC版のサイトでこの表示は難しいけど、スマホ版なら問題なさそう。こっそりスマホ版で試してみる、かな。

右側が今やってる無理やり縦書き、左側がsafariによる縦書き。ガタつきなど、その差は見てわかると思う。
| << | 2026/3 | >> | ||||
|---|---|---|---|---|---|---|
| 日 | 月 | 火 | 水 | 木 | 金 | 土 |
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 29 | 30 | 31 | ||||
【最近の10件】






