ファン猛のブログ

Google共有カレンダーのデフォルトの見せ方を変える

fantakeshi — 2013-03-06T07:16:33+09:00

最近2013年 WBC見てましてGoogleカレンダーでWBCの予定一覧を作ってみました。

しかし共有や埋め込んだ時は月表示になってしまい、デフォルトで週表示にする方法がわからない。
こういう時間帯が重なるようなカレンダーは週表示で見せたいことがよくあります。
調べた結果、URLにmode=???& を追加すれば良いようです。

・週表示 mode=week&
・月表示 mode=month&
・リスト表示 mode=agenda&

この技はカレンダー埋め込み支援ツールだけではなく、通常の共有カレンダーURLにも使えるというのがミソです。
参考URL

ついでですが野球実況用にAAの作成を支援するツールも作ってみました。個人的なプログラミングのリハビリも兼ねてます。
http://fantakeshi.web.fc2.com/baseball_aa/

クラウド将棋盤ジェネレーターにHIDETCHI さんの新国際駒の追加 & ponanza_shogiの局面を国際駒で閲覧するブックマークレット

fantakeshi — 2011-08-31T21:55:46+09:00

クラウド将棋盤ジェネレーターに国際駒（新デザイン）が追加になりました。
追加の際には国際駒の作者であるHIDETCHIさんに縮小版駒を作成して頂くという多大な協力をお願いし、快諾していただきました。
この場を借りてお礼を申し上げます。

例として、全ての駒を閲覧出来る局面図を作成しました。

通常の将棋の局面としてはありえない図ではありますが、全ての駒が閲覧出来るものとなっております。

ちなみに旧デザインはこちらです。どこが変わっているのか調べてみるのも面白かもしれませんね。

また、国際駒に追加に際して、@ponanza_shogiが出力する局面図を国際駒で閲覧するブックマークレットを用意しました。

以下のリンクを右クリックでブックマーク、またはドラッグ＆ドロップでブックマークツールバーに登録して、@ponanza_shogiの局面図が表示されている時にブックマークのボタンを押すと局面図が国際駒になります。

・国際駒で閲覧

以下はGoogleChromeの例ですが、ブックマークツールバーはアドレスバーのすぐ下にあります。どのブラウザでも大体同じです。

上記の方法でも追加出来ない方は以下の文字列をリンク先のURLとして登録してください。

javascript:(function(){if(location.host!='sfenreader.appspot.com'){return;}location.href+='&piece=international';})();

このブックマークレットを登録して、ponanza_shogiの画面を見ている時に「国際駒で閲覧」を押すと国際駒で局面を見ることが出来ます。王位戦の投了図はこんな感じになります。

IE9、Firefox7、Google Chrome14、Opera11、Safari5.1で動作を確認しています。
スマートフォンについては未確認ですが、Androidの標準ブラウザはブックマークレットを使えないという情報もあるそうです。変わりに、Android版Firefox等の別ブラウザでお使いください。

国際駒で局面を眺めるとまた違った趣があります。個人的には龍のデザインがお気に入りです。

同時に拙い英語ではありますが、英語ページも公開しました。ただ、Web上で局面図を作成するページに国際駒を足してないので修正はこれからになります。(そんなに大きな修正では無いはずです)

Canvasの描画(drawImageとputImageData)について

fantakeshi — 2011-08-27T01:17:50+09:00

3分くらいで読めます。

局面図をWebで作成するページがFirefox7だと後手の駒が全部歩になってしまうという問題が出てしまいました。
http://sfenreader.appspot.com/create_board.html

HTML5のCanvasに描画する方法については、drawImageとputImageDataという２つのメソッドがあります。
前者はHTMLImageElementやHTMLCanvasElement、果てはHTMLVideoElementが描画できるので万能に見え、これだけを使っていれば良いように思えます。

しかし、HTMLCanvasElementの内容をdrawImageした時に、実際にdrawされる内容はdrawImageが実行された瞬間ではない実装があるようです。実際にはFirefox7やFirefox5がそうでした。なので、drawImageしたCanvasの内容を頻繁書いたり消したりしていると、望む結果が得られないことがあります。

クラウド将棋盤ジェネレータでは、後手の駒を180度回転させて描画する時に、隠しCanvasに書いてからそれをdrawImageするという手法を使っていましたが実際にdrawImageされるタイミングが異なるためにFirefox7では全て同じ駒になるという問題が生じていました。

そこで、getImageDataとputImageDataを組み合わせることにしました。この方法だと実際にイメージを取得した瞬間の画像が描画されることが保証されるようです。実際に、各ブラウザ、(IE9、Firefox7、Chrome14、Opera11、Safari5）等で動かしてみましたが特に問題ないようです。

getImageDataで得られるデーターはHTMLImageElementとは互換性がないため若干使いづらいのですが、現状はこの実装で行こうと思います。例えば、普通にImageを読み込んで書く時でもputImageDataを使う場合（ImageDataで書く場合）どこかのCanvasに描画してからgetImageDataでImageDataを取得するという２度手間になってしまいます。またputImageDataはexCanvasやFlashCanvasでの使用に難があるという情報もあります（実際には未確認）

getImageDataのImageDataはピクセル毎にアクセス可能であるというメリットもあるのですが、現状この機能は使わないのでとりあえず一時的に画像を保管できる機能としてしか使っていません。

(2011/09/11:追記) これ以上に重大な問題があって、getImageDataは別ドメインを描画したキャンバスのデータの取得がセキュリティ的に許されていないという問題があります。いわゆるクロスドメインな場所にある画像へのアクセスが禁止されているということです。これは悪意のある攻撃者が個人情報を含む画像からデータを抜き取ることを防ぐ目的だとされています。あるいはCaptcha的な画像認証を解析するコードを埋め込まれることなどを懸念しているのかもしれません。

Canvasが出てからまだしばらく経つのにブラウザ間の実装がこなれてない感じがしますね。そろそろライブラリが出てきてもいいような気がするのですが…

Canvas要素上でどこがクリックされたか正確に取得する方法

fantakeshi — 2011-08-09T04:18:42+09:00

3分くらいで読めます。

先のエントリで将棋の局面図を作るWebUIをアップデートしたと書きましたが、一番の問題はCanvas要素上でクリックされた座標を取得する方法がブラウザによって異なることでした。

ここでのポイントはページ内座標ではなくCanvas要素上でクリックされた座標の取得ということです。ページ内座標だとHTMLをいじくっているうちに座標がうまく取れない、なんてことが起こり得るのでCanvas上の座標でクリックされた場所を取得したいのです。

そのために、マウスクリック時のイベントオブジェクトではlayerXとlayerYというそのものずばりのプロパティがあるのですが、これだとFirefox6や64bit版ブラウザでうまく動作しないという問題がありました。

そこで検索した所、クリック時のページ内座標の取得についてはブラウザ別でも安定して取得する方法があるので、ページ内座標の取得→Canvasが配置されている座標のxy座標を引いて計算するという戦略でCanvas上の座標を取得するという方法が載っていました。Stack Overflowさまさまです。

以下はその引用です。

var x;
var y;
if (e.pageX || e.pageY) { 
  x = e.pageX;
  y = e.pageY;
}
else { 
  x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; 
  y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; 
} 
x -= gCanvasElement.offsetLeft;
y -= gCanvasElement.offsetTop;

しかし、クロスブラウザ対応ってクロスプラットフォーム対応より大変なんじゃないかという気がしてきました。まず主要ブラウザだけで、Internet Explorer、Firefox、Google Chrome、Opera、Safariと5つあり、このうちInternet Explorerはバージョン違いを考慮する必要があります。またFirefoxも4.0で大幅にUIを変えたり、アドオンの対応状況が微妙だったりということもあってアップデートに慎重な人もいたりします。ただ、これらに64bit版というのが掛け算でかかってくると頭の痛いところです。スマートフォンやタブレットに搭載のブラウザで動くというのは大きな魅力ではあるのですが、解像度のことを考えると画面デザインの変更は必須ですし…

ネイティブアプリの64bit対応ならば、APIの有無とかそもそも書き方が間違っている(例えばポインタのサイズ計算が間違っている)ということで解決できるのですが、ブラウザの対応についてはその時々のブラウザの実装状況というものに大きく左右されるので一瞬しか有用な情報ではなくバッドノウハウの最たるものではないかと思います。HTML5になってウェブアプリがリッチになったとは言え、完成されたライブラリの充実を待たないと修羅の道に足を踏み込むことになりそうです。

Web上で将棋局面図を作るページがクロスブラウザ対応になりました

fantakeshi — 2011-08-09T03:53:18+09:00

ページはこちら">ページはこちら

過去バージョンでは32bit版Firefox6と64bit版ブラウザでは正常に動作しないことがわかってましたが、今回の修正でどちらも正常に動くようになりました。
Firefox5については逆向きの駒が正常に描画されないという問題があることがわかっていますが、すぐにFirefox6にアップデートされることがアナウンスされていますので今後対応する予定はありません。

@na2hiroさんの協力を頂いてMac版Google Chromeでも動作することを確認しました。恐らくですがLinux版でも同様だと思われます。

あと対応していないブラウザはWindows XPでも動作するIE8ということになるのですが、作者の手元に動作環境が（用意しないと）ないということと、IE8が使える人はKifu for Windowsが使えるという代替手段があること、サポートするためにはかなりの労力が必要とされることから、仮にサポートするとしてもかなり後回しになることをご了承ください。