COSUMIのFlash版を廃止します

来年の5月で、COSUMIはなんと10周年を迎えることになるのですが、そのあたりのタイミングで、「Flash版がメインでHTML5版がサブ」っていう感じの現状を、「HTML5版がメインでFlash版がサブ」っていう感じに変更しようかなあと、少し前から考えていました。ところが先日、Flashが2020年に廃止されるというニュースを聞いた時に、その変更を行うのは、もう今すぐにでも良いのかもと思い始め、さらにその後いろいろ考えているうちに、あまり段階を踏まずに、すっぱりFlash版を無くす方がいいのかも、という気になってきています。

囲碁ブラウザゲーム COSUMI
http://www.cosumi.net/

Flash版はいずれ廃止しなければいけなくなりますし、結局のところ、問題はそのタイミングだけなんですが、まだ最終決定ではないですが、おそらく今年の10月末ぐらいまでには、Flash版は廃止することになると思います。正式に決定したら、また事前に通知します。

Flash版を廃止するのを今まで躊躇していた理由は、主に次の二つかなと思います。

一つ目は、「HTML5版が全く動かない環境があるから」です。そんな環境っていうのは、ずばり古いIEなんですが(と言っても、現時点で、実際にどのバージョンが動かないのかよく分かってないですが…(笑))、これは最近調べてびっくりしたのですが、現在すでに、IE10以下って基本的にベンダがサポートしていないんですね… ベンダがサポートしていない環境を、COSUMIでサポートしなきゃいけない義理はないので(笑)、これはもう大丈夫そうです。

そして二つ目は、「HTML5版では音がきちんと再生されない環境があるから」です。実は、最初にHTML5版を作った時に(これ、もう5年前なのか…)、audio要素を使用してサウンドも鳴るようにコード書いたのですが、環境によって鳴ったり鳴らなかったり、それもいろいろな形でおかしなことになったんですよね。iOSなどは、そもそも仕様が本当にふざけてますし…(これ今もなんでしょうか?) そんなこんなで、その時は匙を投げたのですが、これから試してみないとはっきりとは分かりませんが、今は状況も少しはましになっているんでしょうし、なんとか最低限の形にはなりそうな気がするので、これもたぶん大丈夫だと思います。MP3だってもう使って良いですかね? いろいろ、昔とは違ってきているのではないかなと期待しています。

実は、自分の中でCOSUMIを作り始めた瞬間となっているのは、ネットで買ったFlash Basic 8のパッケージを開けた時なんですよね… 「Flash版はもっと早く廃止したかった」とも思っていますが、実際に無くすとなると、寂しい気持ちが全くないわけではありません。

– – – – – – –

ブログのコメントが簡単にスパム判定されるのは、まだ直ってないですね… ごめんなさい。WP-SpamShieldっていうプラグイン使っているのですが、Akismetの方がいいのかなあ?

[追記 2017/8/13]
Flash版を廃止するのは、少し急なのですが、8月27日と決定しました。廃止するに当たって、手を動かさなければいけないことがいろいろあったですが、一旦やり始めてみると、なんかあっと言う間にほとんど出来てしまいました。そして、そんな作業の中で、Flash版を残して続けていた弊害に、今更ながら気づくことも多くて、もう善は急げで今月中に廃止してしまうことにしました。こまごまとした、いくつかの機能追加もあるので、ほとんどの方には良い変更になると思います。そして、ごく一部の方には、ぼろくそに文句言われそうです…(笑) 毎日、万の単位の人に遊んでもらっているので、結構勇気は要りますね。

「現在のFlash版ページ(例えばhttp://www.cosumi.net/play.html)がHTML5版となり、現在のHTML5版ページ(例えばhttp://www.cosumi.net/mobile/play.html)へのアクセスはそのページにリダイレクトする」って形で行きます。Flashじゃなくなったことに気づかない人も、たくさんいるかもしれません。

ちなみに、サウンド関係はhowler.jsっていうので一発でした。良い時代ですね。

[追記 2017/8/28]
Flash版を廃止しました。それ以外にも、外から見える所も、見えない所も、結構な量、手を入れましたので、なにかやらかしていないか、かなり不安ですが、とりあえず大丈夫かな? 音も出ます。前からやりたかった、チャレンジモードの秒読みも再生されます。

今回、「今後5年間、戦えるように」と考えながら作業していたのですが、その中で、今はまだできていないけれど、これだけはすぐにでもやらないといけないかなと思ったことがひとつだけあって、それはSSLの導入です。はっきり言って、COSUMIはそんな(どんな?)サイトじゃないので、今までSSL無しだったのは、まあ良いと思います。COSUMIエゴサーチが日課の私ですが(笑)、いまだかつてそのことについての指摘を見たことは一度もないですし、ユーザの肌感覚とも合っていたんだと思います。ただ、常時SSLなどということが、これだけ言われるようになっている2017年現在は、SSLってみるのにちょうど良いタイミングな気がするので、時間見つけて一度勉強してみます。たぶんですが、お金はたいしたことなさそうです。SSLサーバー証明書は、例えばさくらのラピッドSSLなら、3年で税込み3,456円だそうで、これならほとんどただみたいなものだし、サーバリソースも、年数千円レベルしか余分に食わないんじゃないかなあ? 桁が違ってたら、ちょっといやですが…

[追記 2017/9/2]
今回初めて、oggとかmp3とかのファイルを用意することになったのですが、stagefrightという文字列の入ったUser agentの行儀が非常に悪くて、繰り返し、繰り返し、同じ音声ファイルを取りに来ます。おそらく、この方とかこの方とかの言っていることと、問題の種類は同じではないかと思いますが、意外と情報少ないですね。Androidのバージョンとしては、4.4.2とか4.2.2とかあたりが多いです。他のサウンドよりも圧倒的に石音のサウンドへのアクセスが多いところから(2番目は、どこかのボタンをクリックしたときのサウンド)、音を鳴らすたびに取りに来ているのかなあと推測しますが、はっきりとは分かりません。結構うざいのですが、下手に弾くのも怖いので、もうこやつらが絶滅するのを待つほか無いのでしょうか…

後、エゴサしていたら、ちょっと嫌なのを発見。ぱっとは理由が分かりませんが、とにかくこちらの問題でないことを、祈るばかり… しかし報酬 1500円って、COSUMIのためだけにいいのであろうか…(笑)

COSUMIのFlashがきれいに拡大・縮小するようになりました

COSUMIの囲碁対局ゲームでページ全体を拡大・縮小した時などに、Flashががたがたせずに滑らかに拡大・縮小するようになりました。

オンライン囲碁ゲーム COSUMI
http://www.cosumi.net/

「なんでこんなにがたがたしちゃうんだろう」と、以前からかなり気にはなっていたのですが、「できることは全部やってるはずだし、こんなものなのかな」と、もうほとんどあきらめてました。ところがここにきて、その理由がわかった!

ActionScript 2.0のMovieClip.attachBitmapメソッドは、4番目の引数smoothingで、画像を滑らかに拡大・縮小するかを指定することができます。この項目は省略可能なんですが、省略した時のデフォルトはtrueだと自分の手元にあった日本語の公式のリファレンスに書いてあるんですよ。で、これが嘘でした…(泣) デフォルトはfalseです。公式のリファレンスにもいろいろなバージョンがあるのかもしれませんが、ちゃっと調べた感じ、英語の方には正しく載ってるみたいなんですけどね。ほんと、なんでこうなるの…

一色碁

作ってってコメントをこのブログにいただいたので、COSUMIに「一色碁」の対局ゲームを作ってみました。ていうか、目隠し碁を作った時にいっしょに作っておけば良かったんですが…

一色碁
http://www.cosumi.net/onecolor.html

一色碁って目隠し碁より簡単とはいえ思ったより難しいですね。正直、9路盤なら余裕かと思ってましたが、途中から白の巨大な団子石としか見えなくなってきて…(笑)

話のねたによかったら遊んでみてください。

* * * * * * *

Android 2.2+ではFlash Playerが動くようになったので(端末によっては動かないこともあるらしいけど)、これでこれからは携帯なんかでもCOSUMIで遊んでもらえるなあと喜んでいたんですが、実際に動くかどうかは今まで全く確認していなかったので、少し調べてみました。とりあえずアクセスログを見た感じでは、GALAXY Tab SC-01C、GALAXY S SC-02B、SIRIUS α IS06、GALAPAGOS SoftBank 003SHなどで終局まで打たれている形跡がありました。操作のしやすさなどに関しては全くわかりませんが、一応動くのは動くようです(良かった!)。私もAndroidのスマートフォンが少し気になってるんですが、もう買っちゃおうかな?

Flashな囲碁の棋譜ビューア Goswf

Goswfは、自分のウェブサイトで囲碁の棋譜を再生することができる、Flashでできた棋譜ビューアです。この手のソフトとしては、ほとんど完璧だと思います。

Gludion – Go game
http://www.gludion.com/go/

特徴を箇条書きしてみると

  • グラフィックがきれい
  • UIが分かりやすい
  • 表示サイズを変えられる
  • 色を変えられる
  • 棋譜の分岐に対応している
  • 日本語が通る
  • Flashでできている

と、いいことづくし。囲碁版KiFLAもすばらしいですが、こっちの方が個人的には好みです。

[追記 2009/12/5]

紹介だけでなく、このソフトの使い方も簡単に書いておきます。

上に貼り付けたのは、こんな感じのソースになっています。

<object data="http://www.perfectsky.net/flash/goswf.swf"
        type="application/x-shockwave-flash"
        width="520"
        height="390">
<param name="movie"
       value="http://www.perfectsky.net/flash/goswf.swf" />
<param name="FlashVars"
       value="url=http://www.perfectsky.net/misc/kifu/20091129.sgf&amp;move=127" />
</object>

FlashVarsurlでSGFファイルへのパスを、moveで初期表示局面が何手目かを指定します。ブログなどに貼り付ける場合は、urlは絶対パスの方がいいでしょう。棋譜の一番最後の手を初期表示局面にする場合は、moveを手数を超える大きな数字にするのが簡単で便利です。moveは必須ではありません。省略すると、対局開始時(0手目)が初期表示局面になります。

色を変えるには、navbgを指定します。色の濃い水色の部分がnavで、色の薄い水色の部分がbgです。

<object data="http://www.perfectsky.net/flash/goswf.swf"
        type="application/x-shockwave-flash" 
        width="520"
        height="390">
<param name="movie"
       value="http://www.perfectsky.net/flash/goswf.swf" />
<param name="FlashVars"
       value="url=http://www.perfectsky.net/misc/kifu/20091129.sgf&amp;move=127&amp;nav=4a8c48&amp;bg=cae6b2" />
</object>

高さより横幅が大きいと横長レイアウト、横幅より高さが大きいと縦長レイアウトに自動的になります。横長レイアウトの場合は、横幅と高さを4:3の比率にしないと無駄な余白ができ、縦長レイアウトの場合は、高さが横幅より十分に大きくないと下が少し切れてしまいますので注意してください。

<object data="http://www.perfectsky.net/flash/goswf.swf"
        type="application/x-shockwave-flash"
        width="390"
        height="520">
<param name="movie"
       value="http://www.perfectsky.net/flash/goswf.swf" />
<param name="FlashVars"
       value="url=http://www.perfectsky.net/misc/kifu/20091129.sgf&amp;move=127" />
</object>

以上、簡単な使い方の解説でした。

[追記 2010/4/4]

最近のバージョンでは、棋譜を直接ソースに書き込むことができるようになっています。

<object data="http://www.perfectsky.net/flash/goswf.swf"
        type="application/x-shockwave-flash"
        width="520"
        height="390">
<param name="movie"
       value="http://www.perfectsky.net/flash/goswf.swf" />
<param name="FlashVars"
       value="url=(;GM[1]FF[4]PB[安田秀策]PW[井上因碩]SZ[19]KM[0]RE[B+]
              ;B[qd];W[dc];B[pq];W[oc];B[cp];W[cf];B[ep];W[qo];B[pe];W[np];B[po];W[pp];B[op];W[qp];B[oq];W[oo]
              ;B[pn];W[qq];B[nq];W[on];B[pm];W[om];B[pl];W[mp];B[mq];W[ol];B[pk];W[lq];B[lr];W[kr];B[lp];W[kq]
              ;B[qr];W[rr];B[rs];W[mr];B[nr];W[pr];B[ps];W[qs];B[no];W[mo];B[qr];W[rm];B[rl];W[qs];B[lo];W[mn]
              ;B[qr];W[qm];B[or];W[ql];B[qj];W[rj];B[ri];W[rk];B[ln];W[mm];B[qi];W[rq];B[jn];W[ls];B[ns];W[gq]
              ;B[go];W[ck];B[kc];W[ic];B[pc];W[nj];B[ke];W[og];B[oh];W[pb];B[qb];W[ng];B[mi];W[mj];B[nd];W[ph]
              ;B[qg];W[pg];B[hq];W[hr];B[ir];W[iq];B[hp];W[jr];B[fc];W[lc];B[ld];W[mc];B[lb];W[mb];B[md];W[qf]
              ;B[pf];W[qh];B[rg];W[rh];B[sh];W[rf];B[sg];W[pj];B[pi];W[oi];B[oj];W[ni];B[qk];W[ok];B[qe];W[kb]
              ;B[jb];W[ka];B[jc];W[ob];B[ja];W[la];B[db];W[cc];B[fe];W[cn];B[gr];W[is];B[fq];W[io];B[ji];W[eb]
              ;B[fb];W[eg];B[dj];W[dk];B[ej];W[cj];B[dh];W[ij];B[hm];W[gj];B[eh];W[fl];B[fg];W[er];B[dm];W[fn]
              ;B[dn];W[gn];B[jj];W[jk];B[kk];W[ii];B[ik];W[jl];B[kl];W[il];B[jh];W[co];B[do];W[ih];B[hn];W[hl]
              ;B[bl];W[dg];B[gh];W[ch];B[ig];W[ec];B[cr];W[fd];B[gd];W[ed];B[gc];W[bk];B[cm];W[gs];B[gp];W[li]
              ;B[kg];W[in];B[lj];W[lg];B[gm];W[jf];B[jg];W[im];B[fm];W[kf];B[lf];W[mf];B[le];W[gf];B[hf];W[ff]
              ;B[gg];W[lk];B[kj];W[km];B[lm];W[ll];B[jm];W[ge];B[he];W[ef];B[ea];W[cb];B[fr];W[fs];B[dr];W[qa]
              ;B[ra];W[pa];B[rb];W[da];B[gi];W[fj];B[fi];W[fa];B[ga];W[gl];B[ek];W[em];B[ho];W[el];B[en];W[jo]
              ;B[kn];W[ci];B[lh];W[mh];B[mg];W[di];B[ei];W[lg];B[qn];W[rn];B[re];W[sl];B[mg];W[bm];B[am];W[lg]
              ;B[eq];W[es];B[mg];W[ha];B[gb];W[lg];B[ds];W[hs];B[mg];W[sj];B[si];W[lg];B[sr];W[sq];B[mg];W[hd]
              ;B[hb];W[lg];B[ro];W[so];B[mg];W[ss];B[qs];W[lg];B[sn];W[rp];B[mg];W[cl];B[bn];W[lg];B[ml];W[mk]
              ;B[mg];W[pj];B[sf];W[lg];B[nn];W[nl];B[mg];W[ib];B[ia];W[lg];B[nc];W[nb];B[mg];W[jd];B[kd];W[lg]
              ;B[ma];W[na];B[mg];W[qc];B[rc];W[lg];B[js];W[ks];B[mg];W[hc];B[id];W[lg];B[fk];W[hj];B[mg];W[hh]
              ;B[hg];W[lg];B[gk];W[hk];B[mg];W[ak];B[lg];W[al];B[bm];W[nf];B[od];W[ki];B[ms];W[kp];B[ip];W[jp]
              ;B[lr];W[oj];B[mr];W[ea];B[sr])
              &amp;move=127" />
</object>

Flashは動き始めるまでにダウンロードが完了しているとは限らない

以前からたまに、COSUMIのオンライン対局のFlashが動かない時があってちょっと気持ち悪く思っていたのですが、ようやくその原因が分かりました! どうやら、自身のswfファイルのダウンロード完了を待たずして動き始めたFlashが、まだダウンロードできてない部分のデータを必要として問題が起こっていたようです(なので、ブラウザがそのswfファイルをキャッシュに持っている時は問題が出なかった)。うーん、Flashというのは、ファイルがすべてダウンロードされてから動き始めるわけではないんですね! 一度分かってしまえばごくごく単純なことなんですが、Flashは最近初めたばかりなので、このあたりの基本がなってませんでした…

ということで、今回はMovieClip.getBytesLoadedMovieClip.getBytesTotalを使って、自身のswfファイルのダウンロードが完了するまでは、メインの動作を始めないように直しました。たぶんこれで大丈夫だと思います。

回線の速度やブラウザの種類、それからPCのスペックなども関係してくると思うので、はっきりしたことはよく分かりませんが、今までどれくらいの確率で動かなかったのかを考えるとめちゃくちゃ恐ろしい…(笑)

xyzzy用のactionscript-mode

今日2つ目の記事は、xyzzy用のactionscript-modeです。これは特に説明は要りませんね!

ActionScript mode for xyzzy
http://shield.jp/~dseg/xyzzy/actionscript-mode/

機能の詳細はリンク先で調べてください。コードヒントが文字化けする場合は、こちらページの一番下を参照のこと。一応ActionScript 2.0までに対応って感じみたいですが、3.0でも重宝するんじゃないでしょうか?

余談ですが、Flash制作のためにFlash Basic 8を購入したのですが、今これを少し後悔しています。と言うのも、本当に買うべきだったのは、Flex Builder 3だったような気がしてならないんですよね… 気分が悪くなるので、Flex Builderでなにができるのかあまり調べていません(笑)。