「未分類」カテゴリーアーカイブ

Tampermonkey(Chrome版Greasemonkey)でFacebookの広告を非表示

Facebookの広告が目に入ってしまう

久しぶりの投稿で時代遅れのトピックを扱おうとしています、すいません。もしかしたら役立つ人もいるかと思い。

Facebookの右側に広告を表示する領域があるのですが、たまに下世話な芸能ニュースなど表示されていると、ワタシ嫌いではないので、ついついクリックしてしまうわけです。そして何度も「次へ」「次へ」とクリックしてどうでもいい情報をみせられ、中身のなさに愕然とするわけです。あまりに時間の無駄!でも目に入ってしまう以上、クリックしてしまいたい衝動にアガらえない!

という訳で、おもむろにCtrl+Shift+iで開発者コンソールをたちあげ、

と入力して消していました。

一度入力すれば、上矢印カーソルを押すと入力履歴が呼び出されるので、ほとんど手間はありません。

しかし、Facebookではページ移動するたびに画面が書き換えられまた広告がでてきます。

そこでTampermonkeyでスクリプトを書きました。ユーザースクリプトはかなり昔からあるもはや古(いにしえ)の技術ですが、なんと私は初ユーザースクリプトです。たぶん、すでに誰かが作っていると思うんですが、まったく気にせずさくっと書けるかやってみました。

Tempermonkeyのインストール

インストールの仕方は、まずここからChrome拡張機能のTempermonkeyをインストールします。

Tempermonkeyにユーザースクリプト追加

Chromeの拡張機能画面でTempermonkeyが有効になっていることを確認し、オプションをクリックするとTempermonkeyのダッシュボードが開くので、+ボタンを押し てユーザースクリプトを入力、保存してください。

以下がスクリプト。

これだけで、メタタグの@match属性から該当するfacebookのURLを開いた時点でユーザースクリプトが発動し、DOMを監視して変更があれば広告の入っているhome_right_columnクラスの領域を非表示にします。

facebookを開いて確認

一瞬広告が表示されますが、自動的にFacebookから広告が消えます。

難しかったところ

  1. ユーザースクリプトではsetTimeoutが無視されるので、後から追加されるDOM要素は拾えない。
  2. Facebookでのページ遷移はreactと思うが動的に行われるので、DOMの変更を検知する必要があった。

人のいかない場所にはポケモン出現しない説

ポケGOは劣化イングレスとも言われるほどシンプルで分かりやすい気がしますが、ポケGOとイングレスとの大きな違いは、イングレスではポータルと呼ばれる審査を通った現実の史跡ポイントを中心にゲームが展開するのに対して、ポケットGOでは歩いている途中でポケモンが突然出現することではないでしょうか。

交差点の真ん中など、危ない場所にポケモンが現れると人が立ち止まってしまい邪魔になってしまいます。細かく人の手で設定しているはずもなく、何らかのルールでポケモン出現箇所が決まっているはずです。いや、決まっているとうれしい。
どういった基準でポケットモンスター出現位置を決めているのか、もしくは決めることができるのでしょう。

ポケモン出現ルールの予想

アメリカでは軍事基地や原子力発電所など、危険な場所にポケモン探しのために無断侵入しようとして問題になっています。このニュースは、人のいかない場所にレアなポケモンがいるという誤った印象を与えてしまうのではないかと心配しました。
実際には、攻略サイトなどで新宿御苑など都心の公園がポケモンの巣として紹介され、誰かがレアポケモンをみつけたとネットで広がるとたくさんの人が集まっていたようでした。

おそらくですが、イングレスのXM(エキゾチックマター)の出現箇所と同じロジックでしょう。XMは、googleが集めているGPS情報をもとに点を示したもので、人が滞留している箇所ほどXMも多く存在します。
イングレスが始まった当初、googleの社内ベンチャーであるNIANTICはgoogleにGPS情報を送信することを許可したAndroid端末のデータしかとれていませんでした。その後イングレスにより膨大なGPS追跡情報が集まり、このビッグデータ解析数m間隔で人が足早に通り過ぎる空間と、滞留しやすい空間を取得可能になったと考えられます。

ポケGOではこのイングレスによってマッピングされた地図情報をもとに、1.人が多く滞留しやすく 2.屋外で 3.NIANTECで設定する特定箇所を除く 箇所にポケモンが出現するのではないかと思いました。

 

公園がポケモンの巣と呼ばれるのは、私が思うに単に条件を満たし、かつ人が多いので確率が高くなっているためだと思います。ポケモンには平地で出現しやすいとか水辺で出現しやすいとかあるようですが、どうもこのあたりのロジックはうまく動いているように思えず、特定の公園に人が集まるのは都市伝説の類ではと思っています。一等賞のでやすい宝くじ売り場と同じで、確率的にはどこで買っても同じはず、条件さえ満たしていれば良いのでレアポケモンは出現する範囲は広いはずです。(今後展開される企業タイアップなどのレアポケモンは除く)

実証実験、誰も行かない場所でポケモンを探してみる

イングレスの時も、地元ではXMを集めることができないので1時間かけて街まで行き、そこで遊んでいたものでした。人のいない山間部はまったく無意味でした。

ポケGOではXMが表示されていませんが説が正しければやはり人の行かない山間部は無意味なはずです。山に入ってポケモンを探してみます。

農道です。この辺はお百姓さんがいるのでイングレスでみてもわずかにXMが存在します。周囲にいるポケモンはポッポだけでした。

IMG_3327 IMG_3328

結局ポッポはみつけられず。ここから森に入ります。ここは30年ほど前に減反政策で耕作放棄した我が家の畑です。誰も立ち入っていません。

IMG_3330 IMG_3329

中に入るなりポッポも消えました。木が生い茂っているおかげで下草は生えておらず、葉がしきつめられているのでこれで滑ったりしなければマダニに噛みつかれなくて済みそうです。周囲はイノシシ除けの柵に囲まれており、進めなくなりました。道を見失い、1時間ほどイバラの棘と格闘しながら降りました。この間、周囲にポケモンまったく見つからず。

IMG_3331 IMG_3332

結局2時間で4キロほど歩きましたが、1匹もポケモンゲットできませんでした。
やはり人の立ち入らない場所はポケモンは出現しないようです。

都会を遊ぶポケGO、田舎では広まらず

私は人のいないところで遊ぶのが好きなので、イングレスもあまり合わなかったのですがポケGOも同じく市街地に立ち寄れる人ほど有利であり、人の集まる場所にさらに人を集める構造になっています。

安全性など考えると、おそらくこれが一番手間のかからないやり方なのでしょうが、リアルにソーシャル能力が高いほど楽しめるわけですからぼっちゲー愛好家としてはちょっときついですね。

しかし一つ気付いたことがありました。それは、ポケモンは一つもみつかりませんでしたが、リアルに昆虫とかトカゲとかたくさん見つけたことです。

考えてみればポケモンは昆虫採集とかで遊べない子のための代替ゲーム。田舎の子にはそもそも広まらないのかもしれません。

JMeterでリクエスト自動化

やりたかったこと

クライアントのサーバーで0byteのキャッシュファイルが生成されたりするとのこと。キャッシュファイルの数が多くなることや、アクセスが集中することでおかしなことが起きているのかもしれない、とにかく本番サーバー並にいろんなページにアクセスしてキャッシュファイルを増やさないといけないと思ったわけです。

JMeterとは

ApacheSoftwareFoundationで進行しているパフォーマンス計測用のJavaアプリプロジェクト。デスクトップGUIで設定するので比較的操作は簡単だし、100%ピュアJavaなのでWindowsでもMacでも同じものが動く、イケているアプリです。
似たのでSeleniumがありますね。Seleniumの方はJavascriptのチェックができたりよりWEBアプリに特化していて、JMeterはWEBアプリ以外にもFTPとかMailとかテスト出来て敷居も低い感じがします。

アパッチのログから再現(リプレイ)する

まずはJMeterをダウンロードします。

JMeterの公式サイトの「Download Releases」と書かれたリンクから最新バイナリ(.zip)を落として解凍しました。解凍されたフォルダのbin/ApacheJMeter.jarを実行するとJMeterが開きました。

最初はログをCSVに変換して読み込ませたり試していたのですが、わたし、気づいてしまいました、「Access Log Sampler」が用意されていることに。

まず左のペインメニューのテスト計画を右クリックしてスレッドグループを追加します。

スレッドグループ

スレッド数というのは同時接続しているユーザー、RampUpというのは1ユーザーのアクセスする間隔秒数、てな理解でよろしいかと。正確にRampUpの秒数待つということではなくて、指定した秒数内にスレッドを散らしてくれるみたい。0にすると同時接続です。スレッドが10なら、ほぼ同時に10個リクエストするということ。
ループ数はログの記録数÷スレッド数を指定しておきました。

次にスレッドグループを同じように右クリックして「Access Log Sampler」を追加します。
続けて「結果をツリーで表示」「結果を表示表示」「グラフ表示」を追加しておきました。この結果は実行中、リアルタイムで見られるしかなり見やすいです。好きなものを使ってください。

追加したAccess Log Samplerを左ペインで選択すると右ペインで細かい設定ができます。
名前とコメントはそのまま、ServerにはIPまたはホスト名を入れます。
Portはデフォルトが80なのでそのまま。ParseImagesはTrueにするとHTMLを解析してページ内の画像を読み込むようなのですがFalseにしておきます。
PluginClassesのParserはTcLogParserだと10個の同時スレッドがアクセスログの同じ一行を読み込むためOrderPreservingLogParserかSharedTcLogParserにしておきました。
FilterはとりあえずLogFilterを選びましたがよく分かっていません。SessionFilterはCookieを使うみたいですが、今回はどっちでもいいですね。
LogFilesでアクセスログを指定してください。

後は実行して結果を眺めていると良いです。

 

不満点とか

アクセスする順番とか、時間を完全再現するのは出来ませんでした。いい方法があるのかもしれませんが…。sleniumだと出来たかなぁ?今回の計測だとログインしたユーザーの遷移を追いかけたりはしないので充分ではありました。

しかし操作がけっこう簡単。特にアクセス・ログが簡単に読み込めるとは驚きました。これならしばらく時間をおいて忘れてても使えるんじゃないでしょうか。

参考:

AccessLogSamplerのチュートリアル(pdf)

今から3分で jmeter の使い方を身に付ける  (負荷テスト入門)

 

昔の落書き絵、今はこんなに描けないので保存してみる

 

古いノートを整理していて、余白のところに落書きがしてあったりするんで、よく絵を描いてたなぁ、デザイナーやってたこともあったなぁと思い出したりしました。


高校三年生の時に授業中に描いてた落書き。志賀直哉の「赤西蠣太」と川端康成の「伊豆の踊り子」。


二十歳の時の落書き。この時はゲーム会社でCGデザイナーしてました。
決して上手ではありませんが、1枚目と違って訓練を積んだプロのスケッチと言えるのではないでしょうか(言わせて…)。

捨てるに忍びないので、スキャンしました。で、1枚に並べるときに使ったのが「FireAlpaca」というお絵描きソフト。無料だし、使いやすくていいですね!Windowsだと昔買ったPhotoShopやFireWorksがあるんですが、古くてOS Xでは使えず。Windowsで使っていたPaint.NETのような無料のものを探したのですが、Macだとなかなかないのが意外でした。

こうしてみてみると、描いている時に楽しかったな、という事や、上達していくプロセス、すべてプログラムと一緒だな、と感じます。

 

今、ほとんど絵を描かないのですがこの時より下手なはずです。もし今描くなら、紙に鉛筆で描く、ということに慣れる必要があります。
線や直線、フリーハンドを10分ほど練習して、それからとにかく描きまくる、ということを毎日行う。
鉛筆ならさすがによく使うものだから2週間くらいで絵描きの入り口に立てるかも。でも絵筆とか、CGソフトで仕上げるとなると、入り口に立つまでに3ヶ月ほど。

絵描きが水彩画から油彩画に転向するように、プログラマは新しいエディタや言語を習得するとき、どんなプログラマでもいったん下手になります。そこから慣れていき、思い通りに出来るようになるまでが、多くの人が挫折するくらい大変で、だけど楽しい時期です。

【未来予測】プログラマの考える30年後の携帯

あけましておめでとうございます。
去年は仕事がなかなか思うようにいかず停滞気味になっている一方、子供はめっちゃ成長してて最近では一緒にゲームを作って遊んだりしています。今年は嫁の厳しい視線をかわしながら自分自身息抜きしながら遊べたらいいなぁと思っています。
ということで今日はプログラマとして携帯やスマホのコンテンツに関わっている私が夢想する未来の携帯について考えてみたいと思います。

インプラント携帯

2820549302_8da93f26e9_m
by Cayusa

究極の携帯は神経に直接接続した体内埋め込み型携帯でしょう。顔を思い浮かべるだけで繋がり、会話をできます。実際に音を出さなくても、イメージするだけで会話ができます。ただ、これは研究は行われるでしょうが実証実験にかなりかかるものと思われます。実用化するまでは50年くらいかかるのではないでしょうか。

+センサー携帯


プラスの発想です。これまでの携帯も、通話機能にメール機能、インターネット機能を足し、お財布、GPSと機能を追加してきました。
今の携帯になくて重要なものというと、健康チェック機能でしょう。握っているだけで体温、それに脈拍も自動検知できるでしょう。呼気から匂いが検知できます。口臭、アルコール、それに病気の疑いなど、通話するだけで自動検知してくれます。

デザインの進歩


携帯からスマホへの変化は、画面をタッチするというインターフェースにより起こりました。今起こりつつあるのは、手に持たなくてもよいというデザイン的な進歩です。眼鏡型の携帯は数年後には登場しそうです(まさに電脳コイルの世界ですね!)。腕時計型も登場するでしょう。他に考えられるのは工事現場などで重宝するヘルメット一体型、薄くて体のどこにでも貼れるシール型などでしょう。個人的には、逆に非常に重くて使い勝手の悪い携帯がでてもいいと思います。ダンベルのように重くて振っている間しか使えない体力向上型、刀の形をしていて鞘から抜けば電源が入り、立ち回りをすることで操作できる真剣型など、はた迷惑な携帯も、3Dプリンターのような個人生産技術の向上により登場するでしょう。

考える携帯


携帯の人工知能はどこまで賢くなるでしょうか。30年後、友達といえるくらい人間的な携帯が登場しているかは非常に際どいラインです。この研究は古くから行われていますが現在のiPhoneのsiriやdocomoコンシェルジェをみても、MicrosoftOfficeに生息していたイルカと大差ないように思えます。しかし2038年の技術的特異点あたりで、この技術がブレイクスルーして非常に役立つ知能をコンピュータが獲得している可能性はあります。携帯はあなたの近未来を予想して前もってお店の予約など準備してくれるようになるでしょう。過去のデータからあなたがしていない行動があれば「ハンカチ持った?」と音声確認をしてくれるようになるでしょう。

最後に

読んでいただいてありがとうございます!なんか画像つけようと思ってFlickrを探していたのですがあまりに重くてやめて、amazonのアフィリエイトつけたりしてたらこの記事アップロードするのに1ヶ月くらいかかっちゃいました。本当に30年後の携帯は今より楽させてくれそうで楽しみです。1日20分、ブログを書くのが目標です。なので毎日は投稿できないでしょうがちょっとづつ書き進めていきますよ。

おもっさまミカメジャーナルがテレビ愛媛で紹介されました

仲間たちとやっている「おもっさまミカメジャーナル」が9月29日、テレビ愛媛の「ふるさと絶賛バラエティいーよ!」で紹介されました。

何でこのサイト始めたかということをぜひ言いたいと用意していたんですが自分のしゃべってる姿をテレビでみると、情けないやらうれしいやら・・・。言ってる内容はいいんですがしゃべり方がなぁ。なんかセリフしゃべってるぽいです。しかもかみかみ^^;もっと普通にしゃべれるようがんばります。

テレビで放映された効果は絶大で、取材陣みな、あちこちで「テレビでてたやろ~」声をかけられています。
「おもっさまミカメジャーナル」が地域の人により浸透して、長く、楽しく続けて行きたいと願っています!

フラクタル図形が作れるApophysis

フラクタル図形を作れるApophysisというソフトを知りました。

最初2.09を使ってたんですがチュートリアルなどをみてると7xを使っている人が多いようです。機能的にあまり差はなさそうですが7xのほうが最初にでてくるフラクタルがきれいなんでおすすめです。

Apophysisのサイト。DownloadからSourceForgeで2.09ダウンロードできます。
http://apophysis.org/

独自進化してるぽい7x
http://sourceforge.net/projects/apophysis7x/

ダウンロードして使ってみると、これはすごい、いろんな図形が作れます。

すごく奥が深そうですが、使いこなせるんだろうかと思っていると、pixivで使われているらしくけっこう日本語ドキュメントが充実していたので、なんか作れそうな気がします。

ピクシブ百科事典「Apophysis」
http://dic.pixiv.net/a/Apophysis

これでミュージックビデオみたいなの作るとかっこいいかもしれませんね。

WordPressでHighSlideを使う

画像サムネイルをクリックしたときに、画面遷移せずに元のサイズの画像を表示させたほうが使い勝手がいいです。

HighSlide JSとは

そのためのJavaScriptプラグインで、HighSlide JSというのを気に入って使っています。

HighSlideはドラッグ可能な画面の拡大ダイアログ、キャプション、キーボードによるナビゲーションなどをサポートした高機能なサムネイル・ギャラリーを作成できるjavaScriptライブラリです。

画像にキャプションをつけられること、画面にあわせた拡大画像を表示してくれるところが優れています。今でも開発が続けられており、以前に較べると導入しやすくなりました。

ライセンスがちょっと微妙なのですが個人ではフリーライセンスなものの、収益のある宣伝サイト、政府系サイト、WEBアプリケーションでは有料のコマーシャルライセンスの取得を求めています。

個人ブログのWordPressへの組み込みは無料でしかもプラグインを入れるだけという簡単さなので、おすすめです。

WordPressにHighSildeを組み込むプラグイン

実際にWordPressでHighSlideを使うにはHighSlideの公式サイトで紹介されていた「Highslide Integration in WordPress」が良かったので紹介します。

他のプラグイン同様、ダウンロードしてwp-contentのPluginsフォルダに入れてください。後は管理画面でプラグインを有効化するだけです。

後は普通にWordPressのメディアライブラリからサムネイル画像を投稿に挿入するだけでHighSlideの機能を使って表示されます。
HighSlide本体をダウンロードしたり、アップロードしたディレクトリに合わせて設定ファイルを書き換える手間もありません。カンタン!
[html]
<a href="http://www.mikame.net/pr/wp-content/uploads/2012/08/render_002.png">
<img src="http://www.mikame.net/pr/wp-content/uploads/2012/08/render_002-150×150.png" alt="" title="render_002" width="150" height="150" class="alignnone size-thumbnail wp-image-136" />
</a>
[/html]
WordPressで画像を入れたときのHTMLのコードは上のような単純なリンク付のサムネイル画像です。しかしちゃんとHighSlideで開きます。
画像を開くとキーボードのカーソルキーを使った操作が有効になります。

カスタマイズ

WordPressの設定に「HighSlide Integration」ができていますので、ここで設定ファイルを編集できます。
とりあえずコントロールボタンは不要でしたのでuseControlsをtrueからfalseに変えておきました。
[javascript]
// HIDE CREDITS
hs.showCredits = false;

// SHOW IMAGE TITLES AS CAPTIONS
//hs.captionEval = ‘this.thumb.title’;
//hs.captionOverlay.position = ‘below’;
hs.headingEval = ‘this.thumb.title’;

// DROP SHADOW
hs.outlineType = ‘rounded-white’;

// USE GRAPHICAL EFFECTS
hs.transitions = [‘expand’, ‘crossfade’];
hs.fadeInOut = true;
hs.expandDuration = 150;
hs.restoreDuration = 150;

// SHOW SLIDESHOW CONTROLBAR
hs.addSlideshow({
interval: 5000,
repeat: false,
useControls: false,
fixedControls: ‘fit’,
overlayOptions: {
className: ‘large-dark’,
opacity: ‘0.75’,
position: ‘bottom center’,
offsetX: ‘0’,
offsetY: ‘-25’,
hideOnMouseOut: true
}
});

// DIMM WEBSITE WHEN IMAGE IS OPEN
// hs.dimmingOpacity = 0.75;

// SHOW CLOSE-BUTTON
// hs.registerOverlay({
// html: ‘<div class="closebutton" onclick="return hs.close(this)"></div>’,
// position: ‘top right’,
// fade: 2
// });
[/javascript]

HighSlideのプロパティの詳細についてもっと知りたい人はHighslide JS API Reference(英語)がありますがHighslide Editorでデザインを変えてみたほうが分かりやすいかもしれません。

キャプションやヘッダを表示するにはhighslide-captionクラスのspanを加える方法(改行OK)、他にaタグのtitle、または画像のtitle,alt属性を設定によってキャプションまたはヘッダにする方法(改行できない)があります。
WordPressのcaptionタグとは別物ですので注意してください。

キャプションの表示がうまくいかなかった

今回テストしたのではキャプションの文字がボーダーの外にでてしまう問題がありました。
これが解決できるといいのですが回避する方法があるかもしれません。

特に手間も無くサムネイル画像の使い勝手が向上することを考えると、サムネイル画像しか使わないといったブログでも導入しない手はないでしょう。

【HTML5】kineticJSを使ったHEX描画

この前の投稿ではcanvasで描画したHEXのソースは載せましたがkineticJSのほうは載せてなかったのでここに載せときます。

これが実際にkineticJSで描画された六角形です。
jsdo.itにあげようとしたらうまくいかなかったのでこの記事の終わりにJavaScriptが入るようWordPressをカスタマイズしました。ソースで確認すればscriptがみえます。
赤丸を移動できます。まだそれだけ。

kineticJSの説明をみるとレイヤやグループに分けることで高速化を図る仕組みを持ってるようにみえるので、そのやり方を探っています。

【HTML5】canvasとKineticJSで六角形を描画してみる

今日はcanvasを触ってみます

まずは単純にJavaScriptで描画した六角形のHEXタイルを並べてみました。うまくいけばHEXを使った戦術シミュレーションを作れるし、その手のゲームのアルゴリズムに興味があるので。(今日はそこまではいきませんでしたが)

ソースコードはこんな感じ。

[javascript] <!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<script type="text/javascript">
window.onload = function() {
var View = function(){
this.initialize();
};
// 画面描画
View.prototype.draw_hex = function(hex_position){
var canvas = document.getElementById(‘screen’);
if ( ! canvas || ! canvas.getContext ) {return false;}
var ctx = canvas.getContext(‘2d’);

ctx.save();

// HEXの描画位置
ctx.translate(
this.hex_width*hex_position[0]+(hex_position[1]%2 ? this.hex_width*0.5 : 0),
this.hex_width*0.75*hex_position[1]
);

ctx.beginPath();
ctx.moveTo( 0, this.hex_height*0.25);
ctx.lineTo( 0, this.hex_height*0.75);
ctx.lineTo(this.hex_width*0.5, this.hex_height);
ctx.lineTo(this.hex_width, this.hex_height*0.75);
ctx.lineTo(this.hex_width, this.hex_height*0.25);
ctx.lineTo(this.hex_width*0.5, 0);
ctx.lineTo( 0, this.hex_height*0.25);
ctx.closePath();

var grad = ctx.createLinearGradient(0, 0, 0, this.hex_height);
grad.addColorStop(0,’rgb(64, 256, 256)’);
grad.addColorStop(1,’rgb(64, 194, 256)’);
ctx.fillStyle = grad;
ctx.lineWidth = 1;
ctx.stroke();
ctx.fill();

ctx.fillStyle = "blue";
ctx.font = "10px ‘MS ゴシック’";
ctx.textAlign = "center";
ctx.textBaseline = "top";
ctx.shadowColor = ‘rgba(0, 0, 0, 0.5)’;
ctx.shadowBlur = 1;
ctx.shadowOffsetX = 1;
ctx.shadowOffsetY = 1;
ctx.fillText(hex_position[0]+’,’+hex_position[1], this.hex_width/2, 6);

ctx.restore();
};
View.prototype.draw_character = function(param){
var canvas = document.getElementById(‘screen’);
if ( ! canvas || ! canvas.getContext ) {return false;}
var ctx = canvas.getContext(‘2d’);

ctx.beginPath();
var x = (param.pos[0] * this.hex_width) + (this.hex_width / 2) + (param.pos[1]%2 ? this.hex_width*0.5 : 0);
var y = (param.pos[1] * (this.hex_height * 0.75)) + (this.hex_height * 0.5);
ctx.arc(
x,
y,
10,
0/180*Math.PI,360/180*Math.PI);
ctx.stroke();
ctx.fillStyle = "rgb(224, 0, 0)";
ctx.fill();

ctx.fillStyle = "white";
ctx.font = "16px ‘MS ゴシック’";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.shadowColor = ‘rgba(0, 0, 0, 0.5)’;
ctx.shadowBlur = 2;
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.fillText(param.char, x, y);
};
View.prototype.initialize = function(){
this.hex_width = 32;
this.hex_height = 32;
var tile_width = 26;
var tile_height = 30;
for (var x = 0; x < tile_width; x++){
for (var y = 0; y < tile_height; y++){
this.draw_hex([x,y]);
}
}
var player = {char: ‘P’,pos : [1,5]};
this.draw_character(player);
};

// 描画開始
console.time(‘draw’);
var view = new View();
console.timeEnd(‘draw’);
};
</script>
<canvas id="screen" width="900" height="900"></canvas>
</body>
</html>[/javascript]

IE8では動きませんでした。

ここで大きな疑問が。
プレイヤーのキャラクター「P」を移動させるのに、マウスクリックイベントをどうやって受け取るか?

canvasだとDOM上ではcanvas要素ひとつだけなので、一番上のcanvasに対してクリックイベントをつけてやり、座標から何が押されたか調べる・・・?んなアホな・・・。
でもそういうやり方ぽいので他はどうしてるんだろうと思ったらcanvasを扱うゲーム向けのライブラリがいろいろあるようなのです。

KineticJSも触ってみます

なんだかドキュメントの充実してそうなKineticJSで書き直してみました。
APIが全然変わるので全面書き直し。でも基本は同じなのでソースコードは省略。

イベントはKinecticJSの書き方で
[javascript]var circle = new Kinetic.Circle({
x: x,
y: y,
radius: 10,
fill: "red",
stroke: "black",
strokeWidth: 1,
draggable: true
});
circle.on("mouseover mousedown mouseup", function() {
writeMessage(view.messageLayer, "Multi-event binding! ");
});
circle.on("mouseout", function() {
writeMessage(view.messageLayer, "");
});[/javascript]

といった感じで設定できるようになりました。

他にもマウスにあわせて動く指定がプロパティひとつで出来たり、レイヤーの概念ができて操作しやすかったりするようです。

これでばりばり動けばいいんですが

しかしやっぱりDOMではないのでjQueryが使えずやりづらい。
あと、なぜかテキストのalign:centerが効かなかった。

最初、六角形一つに対してレイヤを一つ割り当てて描画させるとブラウザがクラッシュする勢いだったんで全てを一つのレイヤにしたんですが、それでも素のcanvasが描画に56msかかるのに対して871msかかってました。
ちなみに六角形を26×30で780個並べたんですが、ドラッグ可能オブジェクトを置いたもののマウスの動きについてこれてないし、実際にゲームに使えるのかというと・・・

割と簡単なAPIなので、canvasにしろKineticJS使うにしろ単純なものにはいいと思うのですが、大量の描画になってくると速度が気になります。

一日使ってみただけで断定は出来ませんがcanvasは諦めてSVG+jQueryでやってみようかと思いました。