ファイルの汎用化

の続き．一連の流れが完成したので，次は1つのファイルで複数に使いまわしたいという話．

元々1個作ったらそれを使いまわして色々なものを作りたいと思っていたので，Twitter連携辺りからそこを意識し始めた結果，

//tweet.php
//親ウィンドウのキャンバスを取得
var srcImg = window.opener.document.getElementById("srcImg");
dataurl = srcImg.toDataURL();
//子ウィンドウに表示
document.getElementById("dstImg").src = dataurl;

//before
$("#dstImg").css('width',srcImg.width/2).css('height',srcImg.height/2);
//dstImg は <img id="dstImg" src="">
document.getElementById("text").value = "ラーメン三銃士を連れてきたよ。 #ラーメン三銃士 @triplog_";

//after
//削除．
//dstImg を <img id="dstImg" src="" style="height:300px;width:auto;"> に変更
var baseTweet = window.opener.document.getElementById("baseTweet");
document.getElementById("text").value = baseTweet.value;

とし，親ウィンドウの #baseTweet の方に入力済み本文を入れておくことで，ポップアップ内で行う認証～ツイートの処理はすべて単一のファイルを使いまわすことに成功しました．CSSは元々使いまわし想定されてるので特に問題無いとして残るはJavaScriptファイル．特に鬼門となるのがテキストを画面に書き込む処理で，ネタごとに書き込む位置が変わるためここの汎用化は必須です．

//ra-men.js
//before
function inputText(text, id){
  var canvas = document.getElementById("srcImg");
  var context= canvas.getContext("2d");
  if(id<8)
    context.font = "16px 'YasashisaAntique'";
  else
    context.font = "11px 'Hiragino Kaku Gothic ProN'";
  switch(id){
    case 0:
      tategaki(context, text, 197,  21, 8);
      break;
  //省略
}
//after
function inputText2(text, x, y, size, font, num, vertical, right){
  //キャンバスの取得
  var canvas = document.getElementById("srcImg");
  var context= canvas.getContext("2d");
  //フォントの指定
  switch(font){
    case 0:
      context.font = size + "px 'Hiragino Kaku Gothic ProN'";
      break;
  //省略
  }
  //縦書の場合
  if(vertical){
    tategaki(context, text, x, y, num);
  }
  //右詰めの場合，余り使う予定がないのでそのまま
  else if(right){
    context.textAlign = "end";
    context.fillText(text, x, y);
    context.textAlign = "start";
  }
  else{
    yokogaki(context, text, x, y, num);
  }
}
//入力例   inputText2("ラーメン三銃士を連れてきたよ。", 197, 21, 16, 0, 8, true, false);

とすることで，必要なパラメータを引数ですべて指定して入力することは可能になったのですが，肝心の「引数をhtml(php)側に置いておいて引っ張ってくる」という部分で詰まっています．パラメータが少なければ id タグを付ければ良いんだけどテキストボックス1つにつき8つというのはちょっと多すぎるので避けたいです．

<!-- ra-men34.php -->
<input data-pala = "'ラーメン三銃士を連れてきたよ。', 197, 21, 16, 0, 8, true, false">
<!-- 色々省略 -->
<script> inputText2($("#edit>input:eq(0)").data('pala')); </script>

のようなカスタムデータ属性を付けて引っ張るのも試したのですがやはりダメでした．できれば array 型にまとめてテキストボックス1つにつき1個くらいにしたいんだよなぁ・・・これが解決したら相変わらずJavaScriptとjQueryが混在してるのをスッキリさせたい．あとは画像の投稿が複数可能になるらしいのでこっちは UltimateOAuth の作者に期待したいですね．

参考
HTML5 カスタムデータ属性「data-*」にJavaScript、jQueryからアクセスする方法 | Dress Cording
Multiple Media Entities in Statuses | Twitter Developers

ところで僕がこのレベルのことにあくせくしている間にこんなものが．
[JS]なにこれ楽しい！インタラクション満載の路線図を実装するスクリプト -transitive.js | コリス
これがプロの仕事かー，すごい．

プログ

’14修了無内定理系院卒の活動雑記||プー太郎ログ||プログラミング雑記

ファイルの汎用化