ジェネレータを目指して

最低限必要と考えられる機能は，

• 画像とテキストを重ねて表示する
• テキストは縦書で，吹き出しに合わせる
• テキストを自分で変更する
• テキストを合わせた画像を書き出し，保存する

ここらへん．前３つについては一先ずできたのでそのやり方など．

進捗

重畳表示

  <!--方法1（実際はコメントアウト）-->
  <div id="img" style="width:568px;height:644px;background:url('so-men.jpg');">
  <!--方法2-->
  <div id="img" style="position:absolute;top:100px;z-index:1;width:568px;height:644px;"><img src="so-men.jpg" alt="ラーメン三銃士素材">
  <p class="tate" style="position:absolute;top:  5px;right:355px;z-index:2;height:130px;">ラーメン三銃士を連れてきたよ。</p>
    </div>

最初は div タグでエリアを作ってその背景に素材画像を配置する方法を思いついたのですが，z-index というので重ね合わせられるっぽいのでそっちに．問題はテキストエリアの配置の方で，現状の僕の知識では個別に座標やサイズを指定するしかやり方が浮かばない．画像とズレてしまうことを防ぐため絶対座標で位置を指定し，テキストは縦書だと右詰めにしたいため left ではなく right を用いて指定している．1個にしか適用しない style をCSSに書くのもどうかと思ってそれぞれに記述しているため，やたらと長くなってしまっている．これに関しては参考に貼ったLESSを使うと関数的にスッキリと書けるかもしれない．

参考
http://www5e.biglobe.ne.jp/~komichan/css/htmlCSS_position.html
CSSを効率的に記述できるメタ言語「LESS」の使い方 [ホームページ作成] All About

縦書きetc

@font-face{
  font-family: 'YasashisaAntique';
  src: url('07YasashisaAntique.otf');
}
p.tate {
  writing-mode: tb-rl;
  -moz-writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  top:0;
  text-align:left
  font-family:"YasashisaAntique";
}

重畳表示のソースに書いたようにテキストに .tate を付けておいてそこにCSSで装飾．参考リンクにあるようにFirefoxには対応してないかもしれないから万全を期すならもうちょい手を加えたほうがいいのかも．またそのままのフォントだと漫画らしさがなく，漫画に使われるようなフォントに変更した方が良さそうということでｇｇって出てきた「やさしさアンチック」というフォントを実装．この使い方だとサーバ上にアップロードして使うことになると思うけど，ライセンス周り見た感じそのまま使うなら特に問題なさそう，問題あったら変更する．文字サイズなどがエリアに合わせて自動的に切り替わるジェネレータを見たことある気がするけど，あれは文字数数えてJavaScriptでCSSを変更しているのだろうか．現状はまだ実装できてないので，手動でスペースを入力してもらうなどして調整することを前提としている．

参考
CSSで縦書きを実装した話 | Another Sky
望みのフォントで表示できる！ウェブフォントの使い方 [ホームページ作成] All About
フリーフォントやさしさアンチック（漫画用書体・セリフフォント）のダウンロード | フォントな。無料日本語フリーフォント

テキスト反映

・html

  <div id="edit" style="position:absolute;top:100px;left:600px;width:200px">
  <input type="text" name="serif1" value="ラーメン三銃士を連れて来たよ。"><br>

・JavaScript（ほぼjQuery）

  $('#edit>input:eq(0)')
    .focus(function(){
      $('#img>p:eq(0)').css('color','red');
    })
    .blur(function(){
      $('#img>p:eq(0)').css('color','black');
      $('#img>p:eq(0)').text($(this).val());
    });

htmlの方で "#edit" を付けた div 内にテキストボックスを用意し，JavaScriptを使って操作する（ほぼjQueryなので予め読み込んでおく必要がある）．テキストボックスにフォーカスした際に該当テキストを赤くし，フォーカスが外れた際に黒に戻した上で反映させる．要素番号指定を使ったことで id を無駄に設定せずに書けたと思うけど，(0)が他の数字に変わっただけのものを繰り返し並べているので，(N)みたいな感じでまとめてしまいたい．あと特に動作が重くならないようなら，フォーカス外れたタイミングじゃなく常に同期させたいけど，.focus や .change イベントでは望む動作が得られなかった．

とりあえず今日進めたのはここまで．今後とにかく必要なこととして，作成画像の書き出し/保存に関する処理がある．「ウィンドウ内の座標指定してスクリーンショット」みたいなのがあればできそうだけど，あったとしても扱いが難しそう．．．あとは進捗の画像にあるようにtweetボタンを付けてみたいけど，OAuth認証周りの知識が必要になるのとこの試作品のためにユーザに認証を要求するのは微妙な気がするのが悩み．