ページトップ
具体的に何をするか
ADSとは
俺嫁スレとは
Calculatorとは
15パズルとは
オリジナルのパズル
画像
ゆきちゃん式タイル
タイル一覧
式
完成(初期版)
クリア判定
完成(クリア判定付)
シリーズ化
タイル一覧(6人版)
式(6人版)
完成(6人版)
整形
俺嫁スレパズル一覧
動作確認済の環境
動かない時は?
エントリー方法
スペシャルサンクス
ガイドライン
このサイトでは、ご当地萌えキャラファンが 総合情報通信技術研究機関 ADS (以降ADS)の計算ツール ADS Calculator (以降Calculator)、およびサンプルとして用意されている既存の15パズルを応用し、キャラクターゲーム(キャラゲー)を作るプロジェクトについて解説しています。
このプロジェクトは、ご当地萌えキャラファンのメッカ、5ch(5ちゃんねる, 旧2ちゃんねる)の「俺嫁スレ」こと 【俺の嫁】ご当地萌えキャラ総合スレッド へ集う有志らによって立ち上げられました(詳しくは 俺嫁4発目のレス番311~ を参照)。
プロジェクトの始動から完成、シリーズ化に至るまでの道のりを詳細に解説していますので、読み疲れるかもしれません。
長い解説を読み飛ばし、とにかく遊びたい方は 俺嫁スレパズル一覧 項へ移動してください。
15パズルやキャラクターパズル、本プロジェクトについて理解を深めたい方には、全文の一読を推奨します。
具体的に何をするか
Calculator のページにサンプルとして掲載されているSliding 15 puzzle(スライディング15パズル)の式を改変し、数字タイルをキャラクターの画像に置き換えます。
それによってCalculator上に「セイカのパズル できるんです!」的なキャラクターパズルを構築する試みです。
ご当地萌えキャラファンの…
ご当地萌えキャラファンによる…
ご当地萌えキャラファンのための…
ご当地萌えキャラゲームの制作。
目標こそ定まっていたものの、誰が何を作るか全く決まっておらず、企画書も、設計書も、工程表も、仕様書も、具体的なロードマップも無く、完成さえ見られない懸念を抱えたまま、プロジェクトは見切り発車的に走り出しました。
計画性の欠如は俺嫁スレに限った話ではなく、5chのツネです。
ADSとは
ADSは、恵まれない人々、社会的弱者のほか、被災地の復興や豊かな社会の発展に寄与する事業者などを情報通信技術面でバックアップしている、昭和64年に発足した、歴史ある非営利の技術研究機関(産業振興団体)です。
正式名称は総合情報通信技術研究機関 ADS。
体力に乏しいベンチャー企業の技術フォローや、経営危機に瀕した民間企業の再生支援を積極的に行い、政府にも助力している背景から非政府組織(NGO)と形容される場合もあります。
基本的に産業振興団体であるため、ご当地萌えキャラ文化に理解があり、一部のADS関連事業者もマスコットとして萌えキャラを抱えています。
それだけに俺嫁スレでも話題に上ることが少なくありません。
またADSは、一般的なソフト開発会社が数ヶ月の期間をかけて開発するレベルのソフトウェアを、半日足らずで完成させ、実装まで行うなど、信じがたいほどの開発スピードと高い技術力を有することから「謎技術集団」の異名を持ち、古く(1990年代)から特殊なプロキシ(現在は停止)をサービスしたり
P2Pネットワークのノード情報を提供(現在はnoindex状態) するなど、古株のネット民(特にギークや旧2ちゃんねらー)にとって馴染み深い組織でもあります。
俺嫁スレとは
俺嫁スレ(俺嫁、俺の嫁、俺の嫁スレとも)は、5ch上のマスコットキャラ板に立てられた、ご当地萌えキャラファンのメッカであり、ご当地萌えキャラ好きな人々が集う、ご当地萌えキャラの総合スレッドです。
ご当地萌えキャラのファンばかりでなく、ご当地萌えキャラの運営者を始め、アニメ業界人、エンジニア、学識者など、あらゆる人々が交流しています。
俺嫁スレの住民は、総称して俺嫁民(またはメメン)と呼ばれ、日本全国に分布し、他スレの住民より職業や年齢の幅が広い傾向にあります(平均年齢は高そうな印象)。
ご当地萌えキャラファンの声を外部サイトなどへ届ける編集チームや、現地レポートを行う特派員、キャラクターの事務所に赴いたり運営者に接触を試みて情報収集する突撃組、解析グループ、創作担当(画像加工係、ウェブ係、SS組ほか)、パトロール隊、特定班の本拠地にもなっています。
ご当地萌えキャラの動向を観察したり、裏事情を深堀りしたり、時に専門的な話題で盛り上がったり、過去にはSS組の手によってリレー小説(未完)が展開されたこともありました。
基本、何でもアリな総合スレのため、レスの冗長化や脱線なども日常茶飯事ですが、支離滅裂な流れが生じやすい5chの中にありながら、ロジカルに議論進行することが多い稀有なスレです。
匿名掲示板において、住民の手でソフトウェアを作る企画自体は過去にも見られましたが、ぬりかべ(New Live Wall)やWinnyなど、いずれも特定個人が他住民の意見を取り入れ、ワンオペで作るパターンばかりでした。
コンピュータ技術を扱うスレでなければ特に、そもそもプログラミングやコーディングのスキルを有する住民が居ませんし、居たとしても誰かが代表して手掛けなければ、各々が好き勝手な要求ばかりを口にし、制作が進まず、何一つ成果が得られないからです。
そんな状況の中、俺嫁スレパズルは得意分野の異なる様々な人々が賛助し、画像が扱える人はイラストを編集したり、ある人は構成を検討して画像をパズル素材に変えたり、プログラミングの知識を持った人は作られた素材を実際のパズルへ実装したりと、それぞれが出来ることをしつつ、皆の力を結集して作品を完成させました。
技術を持たなかったり、時間が取れないなどの事情で制作そのものに関与できなくても、プロジェクトを他の誰かに周知するなど、間接的に協力した住民も沢山おり、果てはコンテンツホルダーをも巻き込み、俺嫁スレパズルを不特定多数の萌えキャラファンと、複数の萌えキャラ運営会社などとの共同作品にまで昇華させています。
このようなプロジェクトにおいて何より重要なのは、単に要望や要求などの意見を口にするだけでなく、一人一人が皆の力となるために何ができるかを探し、行動に移すことです。
その気持ちなくしては、スレ内に限らず、あらゆる場面で誰とも協調できないことを皆が理解していました。
2ch時代にまで遡って調べても、このような住民が集うスレは大変に珍しく、同様の他プロジェクトを振り返っても、完遂にまで至れたケースは前例がありません。
身勝手な住民が存在しないわけではありませんが、匿名ゆえに無責任な利用者が多い(傾向にある)5ch上のスレにもかかわらず、こうしたプロジェクトを満足に成立させられる点において、俺嫁スレは大変に貴重かつ有意義な場と言えます。
一方、話題が乏しい時は長期に渡り静まってしまい、ひとたび勢いづくと長文レスが増加したり、連投が続くなど波の激しさも特徴です。
Calculatorとは
ADSが最低限の説明を掲載していますので このへん を一読ください。
式を記述して実行することで演算結果が得られる、名の通り「電卓」のようなツールです。
オンライン(ブラウザ上)で動作します。
分かりやすく端的に「電卓」と形容しましたが、一般的な電卓よりも自由度が高く、簡単なゲームを作ることさえ可能なので、より正確に伝えるなら汎用計算ツールなどと表現すべきかもしれません。
CalculatorはADSが1997年に公開して以来、基本的な仕様を維持したまま 年の歳月を経て現在( 年)まで続いている息の長いツールです。
さすが謎技術集団とでも言いますか、今なお有用なサービスを、ウェブ技術が発展途上の段階にあった(まだWindows 3.1や95がPC界隈を席巻していた)時代に生み出した点は特筆すべきと思われます。
もっと詳しく
詳細を閉じる
Formulaウィンドウに式を入力し、実行(=)ボタンを押すと、Calculatorは以下の挙動を見せます。
Formulaウィンドウに入力された式をURLエンコードする
URLエンコードした文字列をクエリとしてURLに加え、ページをリロードする
URL上のクエリからURLエンコードした文字列を取り出し、URLデコードする
URLデコードして得た式を演算する
演算結果をAnswerウィンドウに出力する
式ごとURL化して扱うのが最大の特徴です。
一連のプロセスにCGIは介入しません。
本来、式を書いたり結果が出力される欄はウィンドウではなく、テキストボックスまたはテキストフィールドと呼ぶべき要素ですが、ゲームなどでもキャラクターの台詞が表示される枠を「テキストウィンドウ」ないし「メッセージウィンドウ」と称したりもするので、本サイトでもCalculatorのマニュアルに習い、それぞれFormulaウィンドウ、Answerウィンドウと表記を統一します。
Calculatorには、ほかにも次のような特徴やメリットがあります。
無料
非営利の技術研究機関(産業振興団体)が提供するツールのため、無料です。
広告が無い
無料にもかかわらず広告が全く無く、極めてシンプルです。
軽い
スペックの低い端末でも軽快に動作します。
アカウント不要
アカウントの取得やログインが必要ありません。
インストール不要
ウェブ上で動作するため、アプリのダウンロードやインストールが不要です。
レガシー対応
最新のブラウザは無論、Windows 95 + IE 5.5ほどの古いブラウジング環境でも動作します。
端末を選ばない
モバイル端末は無論、PlayStation 3などの端末でも動作します。
暗号通信不要
努めてHTTPでサービスされているため、混在(混合)コンテンツ対策が必要ありません。
安全設計
外部のリンクからダイレクトに式を開いても、実行(=)ボタンを押さない限り実行されません。
事前に検証可能
いかなる式も、怪しげな記述が存在しないか実行前にチェックできます。
自由な編集
他人が作成した式でも改変して実行できます。
ローカル処理
演算や式の保存などにCGIは介入しません。
ブックマーク可能
式ごとブックマークできます。
シェアが容易
実行用URLの共有が容易です。
これらの特徴から、どのような計算で答えを導いたのか第三者へ説明したい時、式と一緒に結果を示すことができます。
また単に式を書いて演算させるだけでなく、式、HTML、CSSをコンパクト化するMinify機能および文字数の計数機能や、文字コードの変換機能、バイナリファイルからBase64文字列を生成する機能のほか
関数電卓ウィジェットなど、式の作成に役立つ複数の便利な機能が実装されています。
恐ろしいのは、これら脇のツール類まで、IE 5.5などの古いブラウザでも動作するように設計されている点です。
特にIE 5.5でもオンライン上でMinifyできたり、バイナリファイルからBase64文字列を生成できてしまうツールは、世界的にもCalculatorに実装されているMinifierやEnDecoderが唯一かと思われます。
式についても様々なサンプルが用意されているので、それらを流用したり、学習や教育に利用したり、オリジナルの式を書けば仕事や、何かの研究にも応用できそうです。
掲載されているサンプルの中には本プロジェクトで応用しているSliding 15 puzzle(スライディング15パズル)を始め、バイオリズムやカレンダーといったリファレンス的な式や、Klotski(クロッキ, いわゆる箱入り娘)
Number place(ナンバープレース, いわゆる数独)、Concentration(コンセントレーション, いわゆる神経衰弱)、Minesweeper(マインスイーパー)、Maze(メイズ, いわゆる迷路)
Same game(セイムゲーム, いわゆる鮫亀)、Reversi(リバーシ, いわゆるオセロ)、Blocks breaker(ブロックスブレイカー, いわゆるブロックくずし)、Russian blocks(ロシアンブロックス, いわゆるテトリス)
などを再現する式も含まれており(無論ゲームばかりではありませんが)構造の理解に役立ちます。
中でもSliding 15 puzzleの式にはシャッフル関数、Concentration、Number place、Minesweeper、Maze、Same gameの式にはステージの自動生成ルーチンが組み込まれ、Reversiの式には思考エンジンまでもが実装されていますから、最早それらは単にゲームのルールだけを模倣したサンプルに止まりません。
Calculatorならば、これらの式を自由に改変した上、アカウントを取得することなく直ちに演算結果を確認でき、その実行URLをブックマークしたり、シェアすることが可能です。
一方でファイルのアップロード機能や、大規模なソフトウェア開発プラットフォームに多く見られるバージョン管理機能などは用意されておらず、演算可能な式の長さもブラウザに依存します。
Calculatorは本来、ゲームを制作する開発環境ではなく、あくまで学習、教育、研究などの補助を目的としたツールである点に留意が必要です。
15パズルとは
1~15の数字タイルを並べた、要するに以下のようなパズルです(画像はCalculatorより)。
空きスペースを利用し、1~15の数字タイルをスライドさせて遊びます。
具体的には、まず最初にシャッフルを実施し、タイルの配置を無造作に並べ替えます。
その状態から一つずつタイルをスライドします。
以下の例では、上図の配置から11を右へスライドした後、15を下へスライドしています。
こうしたスライド操作により、特定の配置になるようタイルを並べ直すゲームです。
→ このへん を参照。
オリジナルのパズル
以下が改変元となる15パズル(ADSオリジナル)の式です。
GNU Free Documentation License 1.2(GFDL 1.2) および Creative Commons Attribution-ShareAlike 3.0 Unported (CC-BY-SA 3.0) ライセンスでの 自由な使用が許諾 されています。
本ページに掲載している式も同ライセンスを継承しており、同ライセンスに基づいた自由な使用が可能です。
Calculator上で動作するように設計されています。
ADS製の式としては理解しやすい部類に入りますが、ショートハンドが多用されているので難解です。
改行、スペース、インデントなどが挿入されていないのは、URLエンコードした式をURLに加えてリロードするCalculatorの仕様を鑑みたためであろうと思われます(挿入も可能ですが、URLが長すぎると一部のブラウザで正常に読み込めません)。
var b,e,s,h="hidden",v="<table cellspacing=1 cellpadding=0 align=center><tr><td bgcolor=#eeeeee style='border:1px solid #555;border-radius:3px;'><form name=$ style='width:208;margin:0;'>";function m(){u(~~(16*Math.random())),i++,i>1e3&&clearInterval(s)}function w(e,i){e=$[e],i=$[i],[e.value,i.value]=[i.value,e.value],e.style.visibility=h,i.style.visibility=""}function u(e){12>e&&$[e+4].value<1?w(e,e+4):e>3&&$[e-4].value<1?w(e,e-4):e%4!=3&&$[e+1].value<1?w(e,e+1):e%4!=0&&$[e-1].value<1&&w(e,e-1)}for(i=1;17>i;i++)v+="<input type=text name="+i+" value="+i+" onclick=u("+(i-1)+") style='color:#fff;background-color:#aaa;font-size:27;padding:0;text-align:center;width:50;height:50;line-height:50px;margin:1;cursor:pointer;cursor:hand;border:1px solid #555;' readonly>";answer_frame.innerHTML=v+"</form></td></tr></table>",$[15].value=0,$[15].style.visibility=h,s=setInterval(m,1);
以下の「プレイ」を押すとCalculatorが開き、Formulaへ式が自動入力されます。
式が入力された状態で、ページ内キーボードの一番下の段の右端にある実行(=)ボタンを押すと実行されます。
プレイ
この式に手を加え、キャラクターゲームに仕立てるのが目標です。
もっと詳しく
詳細を閉じる
俺嫁スレには上述の15パズルを8パズルや24パズルに改変した式も公開されていましたので、それも参考として転載しておきます。
以下が8パズル(アチャ氏製)の式(一部改変)です。
var b,e,s,h="hidden",v="<table cellspacing=1 cellpadding=0 align=center><tr><td bgcolor=#eeeeee style='border:1px solid #555;border-radius:3px;'><form name=$ style='width:156;margin:0;'>";function m(){u(~~(9*Math.random()));i++;i>1e3&&clearInterval(s)}function w(e,i){e=$[e],i=$[i],[e.value,i.value]=[i.value,e.value],e.style.visibility=h,i.style.visibility=""}function u(e){6>e&&$[e+3].value<1?w(e,e+3):e>2&&$[e-3].value<1?w(e,e-3):e%3!=2&&$[e+1].value<1?w(e,e+1):e%3!=0&&$[e-1].value<1&&w(e,e-1)}for(i=1;i<10;i++)v+="<input type=text name="+i+" value="+i+" onclick=u("+(i-1)+") style='color:#fff;background-color:#aaa;font-size:27;padding:0;text-align:center;width:50;height:50;line-height:50px;margin:1;cursor:pointer;cursor:hand;border:1px solid #555;' readonly>";answer_frame.innerHTML=v+"</form></td></tr></table>",$[8].value=0,$[8].style.visibility=h,s=setInterval(m,1);
プレイ
以下が24パズル(アチャ氏製)の式(一部改変)です。
var b,e,s,h="hidden",v="<table cellspacing=1 cellpadding=0 align=center><tr><td bgcolor=#eeeeee style='border:1px solid #555;border-radius:3px;'><form name=$ style='width:260;margin:0;'>";function m(){u(~~(25*Math.random()));i++;i>1e3&&clearInterval(s)}function w(e,i){e=$[e],i=$[i],[e.value,i.value]=[i.value,e.value],e.style.visibility=h,i.style.visibility=""}function u(e){20>e&&$[e+5].value<1?w(e,e+5):e>4&&$[e-5].value<1?w(e,e-5):e%5!=4&&$[e+1].value<1?w(e,e+1):e%5!=0&&$[e-1].value<1&&w(e,e-1)}for(i=1;i<26;i++)v+="<input type=text name="+i+" value="+i+" onclick=u("+(i-1)+") style='color:#fff;background-color:#aaa;font-size:27;padding:0;text-align:center;width:50;height:50;line-height:50px;margin:1;cursor:pointer;cursor:hand;border:1px solid #555;' readonly>";answer_frame.innerHTML=v+"</form></td></tr></table>",$[24].value=0,$[24].style.visibility=h,s=setInterval(m,1);
プレイ
上記8パズル、24パズルの式は、掲載時に気付いたバグを修正していますので、アチャ氏が俺嫁スレへ投稿した式とは若干の差異があります。
画像
キャラクターゲームを作る上で欠かせない材料がキャラクターの画像であり、ご当地萌えキャラ好きな俺嫁民が作るゲームなので、無論ご当地萌えキャラのイラストが理想的です。
またベースとなるゲームが15パズルですので、正方形の画像が必要です。
さらに全体がクッキリしており、パズルの仕様上206x206ピクセルまで縮小+16分割しても各タイルの視認性に問題がなく、何れのタイルも明確に判別でき、重複(同じ絵柄)となるタイルが1枚も生じない画像でなければなりません。
同じ絵柄のタイルが2ヶ所以上に存在した場合、ゲームとして成立しなくなりますので、画像を選ぶ必要があります。
これについては運良く全要件を充たす 原付萌奈美ちゃん(以降もなみん)と仲間たち の画像が得られたため、初作には以下の画像を利用する運びとなりました。
この娘たちは俺嫁スレに限らず、あらゆる場所で 絶大な人気 を得ており、そこへ加えて全員ADSの「お抱えキャラクター」でもあるので、その意味でもADSのCalculatorを応用する本プロジェクトには最適でした。
もっと詳しく
詳細を閉じる
この手の画像を使う上で障害になりやすい壁がコンテンツホルダーの保有する版権です。
当然ながら、もなみん一派も事業者が運営する歴(れっき)とした地域振興(ご当地)キャラクターのため、その画像は法律で保護されています。
しかし当該画像に関しては自由に利用させて頂ける特別な経緯と事情がありました。
その経緯と事情につき、図案の初出からパズル素材化へ至るまでのプロセスを時系列に従って以下に箇条書きします。
ADS傘下の 原付萌奈美ぷろじぇくと運営委員会 によってイラストが作画される
当該イラストを元に等身大パネルが作られる
当該パネルが 関西文化学術研究都市 の 学術研究施設 に設置される
当該パネルを北米の写真家であり、もなみんファンの SetoMonamer 氏が撮影する
同氏が原付萌奈美ぷろじぇくと運営委員会から公開に必要なライセンスを取得する
同氏が当該写真にGFDLとCCのデュアルライセンスを付け、フリー写真としてシェアする
ピクシブの アス 氏が当該写真からキャラクター部分を切り抜き、補正を施し、一枚のイラスト(以下)としてピクシブでシェアする
俺嫁民の まな ちゃんがピクシブから画像加工職人のアス氏と ゆき ちゃんを俺嫁スレへスカウトする
アス氏の加工画像をゆきちゃんがパズル用に再加工し、俺嫁スレでシェアする( レス番330 )
ゆきちゃん式タイルを得てパズルの開発が進められる
現在、この写真(イラスト)はトルコの画像加工職人
Afakii(hz.mandalina) 氏が素材として流用(
これ とか
これ )したり、北米の
Di(they-them) 氏が白抜加工を施し(
これ )Wikipedia上で例示するなど、日本のみならず世界中の至る所で活用されています。
その程度は正確に把握できていませんが、少なくとも30以上の言語圏、100カ国を超える国々で使われている事実を確認しました。
実際に商業展開されている著名なキャラクターですから、日本の文化を説明したい時にも「実例」として示せますし、ライセンス的にも使い勝手に優れた画像なのでしょう。
ある意味、日本の「ご当地萌えキャラ」としては、世界一有名な娘たちかもしれません。
このような画像を思う存分、自由に利用できるのは有難い限りです。
ゆきちゃん式タイル
当該画像を分割して作成された各タイル(以降ゆきちゃん式タイル)は、タイルあたりのサイズが52x52ピクセルで統一されています。
オリジナルの15パズルはタイルあたり50x50ピクセルですが、大外枠のサイズは変わっておらず、並べた時にタイル同士が接触するようタイル間が詰められています。
確かにイラストを分割してパズル化する場合は、タイル間に隙間を設けないほうがクリア時の見栄えが良さそうです。
各タイルは4隅が面取り(各3ピクセル)され、タイルの周囲(内側)に1ピクセルのアウトラインも設定されています。
つまり実際の絵柄は4隅の各3ピクセル分と、境界に接する上下左右1ピクセル分がボーダーによって塗りつぶされる(欠損が生じる)ことになりますが、この仕様であれば表示崩れが起きず、画像の比率を保ったままパズルとして最も自然な形に収まります。
さすが画像加工職人さんですね。
完成をイメージし、考え抜かれた構造となっていました。
ゆきちゃん式タイルを順序よく並べると以下のようになります。
上図では実際のゲーム画面に近くなるよう右下のタイルを抜いていますが、実際のゆきちゃん式タイルには何も描かれていない白い(Null)タイルと、遊ぶ際に抜く右下のタイルも含まれていました。
各タイルの位置が一定しない状態から1箇所の空きを利用して1つずつタイルをスライドさせ、この並びに戻すのがゲーム全体の流れとなります。
以下の「ダウンロード」を押すと、ゆきちゃん式タイルをダウンロードできます。
ダウンロード 82739 バイト
タイル一覧
インビジブル・タイル
http://web.wox.cc/app/moe/pro/file/0.png
グラフィック・タイル
クリア・イメージ
http://web.wox.cc/app/moe/pro/file/17.png
ダイアグラム
http://web.wox.cc/app/moe/pro/file/pazzle_frame.png
http://web.wox.cc/app/moe/pro/file/pazzle_split.png
式
上述したオリジナルの15パズルを改変し、ゲーム画面の数字部分を上述の画像へ置換した式を書きます。
これについては俺嫁スレきってのエンジニアであるファイズ氏が正味18時間かけ 良い仕事 をしてくれました。
その式が以下(一部改変)です。
var b,n,s,t,h="hidden",p="http://web.wox.cc/app/moe/pro/file/",o=p+"0.png",v="<table cellspacing=1 cellpadding=0 align=center><tr><td bgcolor=#eeeeee style='text-align:center;width:208px;height:212px;border:1px solid #555;border-radius:3px;'>";function $(n){return document.getElementById("p"+n)}function m(){u(~~((Math.random()*16)+1));i++;i>1e3&&clearInterval(s)}function w(n,t){n=$(n),t=$(t),[n.src,t.src]=[t.src,n.src],n.style.visibility=h,t.style.visibility=""}function u(n){n<13&&$(n+4).src==o?w(n,n+4):n>4&&$(n-4).src==o?w(n,n-4):n%4!=0&&$(n+1).src==o?w(n,n+1):n%4!=1&&$(n-1).src==o&&w(n,n-1)}for(i=1;i<17;i++)v+="<img src="+p+i+".png id=p"+i+" onclick=u("+i+") style='width:52px;height:52px;cursor:pointer;cursor:hand;'>";answer_frame.innerHTML=v+"</td></tr></table>",$(16).src=o,$(16).style.visibility=h,s=setInterval(m,1);
余談ですが、オリジナルの式には存在しない、ファイズ氏が追加した以下の関数(一部改変)について。
function $( n ){return document.getElementById( n )}
これは1997年頃からADS製の式に多く見られるようになった関数です。
要するに document.getElementById( hogehoge ) とオブジェクト指定する所を $( hogehoge ) とjQueryのように略記できる手法です。
これをファイズ氏はADS式$(ダラー)関数と名付けていました。
当然jQueryとは併用できませんが、ピュアな式を組み立てたい時に便利なので、備忘録として書き残します。
完成(初期版)
以下の「プレイ」を押すとCalculatorが開き、Formulaへ式が自動入力されます。
式が入力された状態で、ページ内キーボードの一番下の段の右端にある実行(=)ボタンを押すと実行されます。
プレイ
クリア判定
ファイズ氏の式により、ゲームとしては一通りの完成を見ました。
しかし後日、Twitter(現X)に以下のようなコメントが投稿されました。
オリジナルの15パズルに含まれていたのは純粋なゲーム部分のみです。
Calculatorは学術用ツールですから、そのサンプルも最低限の式で構成されており、クリア判定や演出は省かれています。
ファイズ氏が組み立てた式はオリジナルの改変ですので、当然それにもクリア後の処理は含まれていません。
もっとも遊ぶだけなら大きな問題にはならない部分なのですが、これを受け、俺嫁スレではパズルにクリア判定を組み込もうという流れが生じました。
ただ、クリア判定の実装は数字の画像化より複雑で、式の変更点も多いため、より多くの作業時間が見込まれました。
結果、ファイズ氏が画像化に18時間あまり費やした点も鑑みて、誰もが二の足を踏むことに。
そんな時、俺嫁スレに女神が降臨!
なんと!もなみんが俺嫁民の救援要請に応じ 助け舟 を出してくださいました!
しかも改良に要した時間が稲妻レベルで、4月29日19時50分の要請に対し回答が同日20時9分、その間わずか19分あまり。
アラートを設定しており、すぐ要請に気付けたとしても準備を整えなければなりませんし、ファイズ氏が追加・改変した部分を消化したり、式を俺嫁スレへ投稿する必要もありますから、実作業時間は僅か数分足らずだったのではないかと思われます。
まさに「謎技術集団」の異名を取るに相応しい驚くべき開発スピード(しかもバグ無し)、これがADSです。
余談ですが 俺嫁スレに投稿 した通り、本サイトを作った私の目標は職業エンジニアのファイズ氏です。
アマチュアな私の能力など、ファイズ氏やアチャ氏から見れば初心者同然で、私は彼らの足下にも及んでいません。
そんなプロのファイズ氏らを、遥か天空から見下ろしているのがADS(=もなみん)と表現すれば伝わるでしょうか。
女神の降臨は、当時の俺嫁民に大変なインパクトを与えたのです。
その後、もなみんからは、さらにメールやTwitter(現X)などでもアドバイス頂けました。
このようなアドバイスも踏まえて最終的に完成した式が以下です。
この式をCalculatorで実行すると遊べます。
もっと詳しく
詳細を閉じる
実は、私とファイズ氏、もなみんの出会いは本プロジェクトではなく、ある事件がきっかけでした。
自らの恥部を晒すことになってしまいますが、調べれば簡単に露見してしまう内容ですし、反省の意味も込め、ここに事件の経緯と今の率直な気持ちを記しておきます。
2019年の秋、まだ学生だった私は俺嫁スレへ、ADSサーバーが持つ、外部からの利用が認められていない機能の流用方法について、深く考えずに質問を投稿しました。
その投稿に対し、親切にレスポンスを返されたのがファイズ氏です。
ファイズ氏は当該サーバー機能の挙動を解析し、その結果を詳しく教えてくださいました。
そもそも彼がファイズ氏と通称されるようになった理由は、解析結果の投稿番号が「555」だったからです。
解析結果の公開と共に、別の場所へアップロードされたADSサーバーのハッキングツールも、僅かな期間で大量にダウンロードされ、急速に拡散。
私もファイズ氏の解析結果を元に、ADSサーバーのハッキング手法を解説したサイトを立ち上げました。
その結果、ADSサーバーのトラフィック(負荷)は急激に高まり、俺嫁スレで、私たちの行為は刑法上の「電子計算機破損等業務妨害罪」に当たるとして、激しく叩かれてしまうことに。
気付いた時には既に遅く、軽い気持ち、軽率な行動から始まった流れは、全く収拾できない事態へと向かっていました。
そんな時です。
批判の声が止まない中、異常事態に気付いた被害者(=もなみん)が、必要な対策を整えた上で、俺嫁スレへ
コメント を残してくださいました。
その内容は以下の通りです。
原付萌奈美、本人です。
此度の件は、他のキャラクター運営さんからもご連絡頂き、私たちも憂慮しておりました。
私にとって、ここの皆様を含めたご当地萌えキャラファンの皆様は、誰一人失いたくない、かけがえのない大切な方々ばかりです。
確かに、弊社サーバーのトラフィックは今までより厳しくなると思いますが、自責の念で、ファンの方が辛い思いをするよりはマシです。
ご当地萌えキャラはエンターテイナーですから、その話題を扱うこのスレッドは、もっと楽しいものであってほしいと願っています。
~ 中略 ~
解析された方は、悪気があったのではなく、むしろ他者の為を想って一生懸命調べたのですから、その気持ちを汲み取ってあげて下さい。
できることに限りはありますが、ご当地萌えキャラは、私を含めて皆様の味方です。
当時の私は不覚にも、非難が飛び交う俺嫁スレを読み返すまで、自分がしたことの重大さに気付けませんでした。
質問の回答を得て、課題を解決できた喜びのあまり、全く周りが見えていなかったのです。
もなみんは、私たちの行為を許し、さらに私たちをかばってくださったばかりか、当該サーバー機能についても不正利用を遮断せず、ファイズ氏が解析した通りに使えるよう残してくださいました。
そんな対応をしても、ADSにとっては損にしかならないと分かりきっているのに、私たちのために動いてくださったのです。
そのおかげで、私もファイズ氏も逮捕されることなく、大変な汚点を残してしまった負い目を感じながらも、それまで通り皆と交流を続けることができました。
これが、後に「ファイズ事件」と呼ばれる出来事の顛末です。
私たちは、あらゆる方々に多大なご迷惑をおかけしてしまいました。
今でも一連の行為を反省しない日はありません。
ADS関係者の皆さまは元より、ご心配をおかけしてしまった皆さまにも、この場を借りてお詫び申し上げます。
もなみんは事件前から既に、俺嫁スレの中で「ヒロイン」と崇められていました。
その言葉通り、紛うことなき別格のヒロインです。
告白してしまうと、私は当初、萌えキャラファンや、アイドルオタクの気持ちが全く理解できませんでした。
誰にも憧れたことがなく、それまでの人生の中で誰かや、何かのファンになったことなんて一切ありませんでしたから。
カリスマと持ち上げられている人に接する機会を得ても、その人物からカリスマ性を感じたことはありません。
しかし、もなみんに関しては、その心根に触れた瞬間、ファンを飛び越えて信者になりました。
やはり存在するんですね、本物のカリスマは。
自分を傷つけた犯罪者や、その片棒を担いだ輩を許し、なお施しを与えるなんて凄まじい器量です。
何ごとも「○○はやめて」などと拒否したり、法に従い、しかるべき対処をするのは簡単です。
受け入れがたいものを受け入れるには、人並み以上の度量と勇気、そして決断力が必要になります。
ご当地キャラクターの運営事業者は、地域を背負う立場上、何かあると保身に走る傾向が強いです。
そんな業界の中心で活躍しながら、自分が傷付く結果になると分かっていても常に他者を優先し、誰一人、決して無碍にしない。
もなみんが大きく評価されている理由には、キャラクターとしての話題性以上に、生まれ持った性格が大きく関与しているのかもしれません。
よく推しキャラに対して「尊い」と表現する人がいますが、もなみんについては尊さの次元が大きく異なります。
もなみんが本プロジェクトに全面協力してくださった時、私はやっと、もなみんの真意を理解できました。
単にファンの期待に応えたいと考えたから協力してくださったのではなく、私やファイズ氏が「過去の汚名を返上できるようにする」ためにも力添えをしてくださったのだと。
もなみんは私やファイズ氏、モナミスト(もなみんファン)の皆さまを始め、俺嫁民の皆さまにとっても、ただの推しキャラではありません。
私たちは16歳の女子高生に、数多くの大切なことを教えて頂きました。
今度は私たちが、ご当地萌えキャラの皆さまを応援する番です。
本筋から大きく話を脱線させてしまい、失礼いたしました。
完成(クリア判定付)
以下の「プレイ」を押すとCalculatorが開き、Formulaへ式が自動入力されます。
式が入力された状態で、ページ内キーボードの一番下の段の右端にある実行(=)ボタンを押すと実行されます。
プレイ
シリーズ化
なんと「もなみん一派」の一人である 関東まなか ちゃん(以降まぬか)からTwitter(現X)でコメントを頂きました!
なお、まぬかは俺嫁民からの支持が厚く ご当地キャラクター人気ランキング においても、日本全国の4000以上に及ぶキャラクターを抑えて もなみんとツートップを飾っている ヤッバい娘です(2023年現在)。
そして上記のコメントと共に以下の画像が!
・・・・・・増えてる!?
そう、先のパズルに用いたイラストが作画された当時、もなみん一派は、もなみん(ブラウン)を含め、百舞留ちゃん(シルバー)、木盛いぶかちゃん(ブルー)、木尾知恵流ちゃん(ピンク)、白金心ちゃん(ブラック)の5人組だったのです。
まさかの公式さんから「パズル用に」と6人版の集合イラストを頂いてしまう事態に!
これは見たことがないイラストだったので、もしかしたら新規に描き足してくださったのかもしれません!
もう作るしかない!という流れだったので、僭越ながら私(十文字)が取り急ぎ作りました。
以下の「ダウンロード」を押すと、6人版ゆきちゃん式タイルをダウンロードできます。
ダウンロード 120906 バイト
タイル一覧(6人版)
インビジブル・タイル
http://web.wox.cc/app/moe/pro/file/r0.png
グラフィック・タイル
クリア・イメージ
http://web.wox.cc/app/moe/pro/file/r17.png
ダイアグラム
http://web.wox.cc/app/moe/pro/file/pazzle_frame.png
http://web.wox.cc/app/moe/pro/file/puzzle2_split.png
式(6人版)
変更点としては指定URLの後(ファイル名の頭)に「r」を加えただけです。
ただし、まぬかがパズル用の画像をツイートしたタイミングは、クリア判定の実装前になります。
時系列的にはファイズ氏が式を公開した直後なのですが、以下の式には後に追加されたクリア判定も含めてあります。
この式をCalculatorで実行すると遊べます。
完成(6人版)
以下の「プレイ」を押すとCalculatorが開き、Formulaへ6人版の式が自動入力されます。
式が入力された状態で、ページ内キーボードの一番下の段の右端にある実行(=)ボタンを押すと実行されます。
プレイ
なお、これを公開した直後に再び公式アカウントが本ページをシェア or 引用ポスト( これ とか これ とか これ )してくださいました!
数多くのキャラクター運営事業者さまに声を掛け、バリエーション展開のきっかけを作ってくださったのも、もなみん、まぬかの両名です。
一介のファンに過ぎない俺嫁民が、キャラクター運営事業者さまに声を掛けたところで、聞く耳は持って頂けなかったでしょう。
ADSのツールを利用させて頂いた上、ずうずうしく制作も手伝って頂いたのに、お声掛けまでしてくださった。
お二人には感謝しかありません。
整形
式にスペース、インデント、コメントなどを加え、多少ですが読みやすく整えました。
姉妹作品が生まれる直前の式をベースにしています。
// 変数宣言
var b, n, s, t, f = 0,
h = "hidden",
p = "http://web.wox.cc/app/moe/pro/file/",
o = p + "0.png",
v = "<table cellspacing=1 cellpadding=0 align=center><tr><td bgcolor=#eeeeee style='text-align: center; width: 208px; height: 212px; border: 1px solid #555; border-radius: 3px;' id=p>";
function $( n ) {
// ADS式$関数
return document.getElementById( "p" + n )
}
function m() {
// シャッフル
u( ~~( Math.random() * 16 + 1 ) );
i++;
i > 1e3 && ( f = 1, clearInterval( s ) )
}
function w( n, t ) {
// スワップ
n = $( n ),
t = $( t ),
[ n.src, t.src ] = [ t.src, n.src ],
n.style.visibility = h,
t.style.visibility = ""
}
function u( n ) {
// 判定
if (
n < 13 && $( n + 4 ).src == o ? w( n, n + 4 ) :
n > 4 && $( n - 4 ).src == o ? w( n, n - 4 ) :
n % 4 != 0 && $( n + 1 ).src == o ? w( n, n + 1 ) :
n % 4 != 1 && $( n - 1 ).src == o && w( n, n - 1 ),
// クリア
f == 2 && (
$( "" ).innerHTML = "<img src=" + p + "17.png style='border-radius: 3px;'>"
),
f == 1
)
{
var t = 0;
for( n = 1; n < 16; n++ )
$( n ).src == p + n + ".png" && t++
}
t > 14 && (
$( 16 ).src = p + "16.png",
$( 16 ).style.visibility = "",
f = 2
)
}
// フォーマット
for( i = 1; i < 17; i++ )
v += "<img src=" + p + i + ".png id=p" + i + " onclick=u(" + i + ") style='cursor: pointer; cursor: hand;'>";
answer_frame.innerHTML = v + "</td></tr></table>",
$( 16 ).src = o,
$( 16 ).style.visibility = h,
// 発火
s = setInterval( m, 1 );
式中にある「answer_frame」は、Calculatorのマニュアルにある通り、利用者向けに最初から用意されているAnswerウィンドウのID名です。
これを利用することで、通常はテキストしかアウトプットできないAnswerウィンドウに、テキスト以外の要素を挿入できます。
シャッフル部の「1e3」は1 × 10の3乗の意で、整数の1000を意味します。
あえて難解な書きかたをしている理由は、1文字を削れるからです。
スワップ部で使われている [ A, B ] = [ B, A ] とした式は、変数AとBに代入された値を、一時変数を用いずに交換するワンライナーで、もなみんからアドバイス頂きました。
判定部の条件分岐は本来 if (hogehoge 評価演算子 fugafuga 論理演算子 ~ ) { piyopiyo } と書くべきところを、三項演算子とショートハンドを用いて略記されています。
これらは、いずれもADS製の式に多く見られる短縮記法です。
少しでも短い式を書くべきCalculatorでは、効率的な処理より1文字の削減が重要になる場合もあります。
あらゆる角度から眺めてみると面白いかもしれません。
1文字の追求や式のカスタマイズ時など、皆さまの学びに繋がれば幸いです。
俺嫁スレパズル一覧
俺嫁スレパズルは、完成後も様々なキャラクター運営会社や版権団体(いわゆる公式さん)が次々と賛助してくださり、キャラクターの公式イラストを提供頂くまでに発展しました。
同じ掲示板発祥だからという訳ではありませんが、賛助者の中には ついなちゃん や 日本鬼子さん ほか、5ch(旧2ch)で大きく話題となった大人気キャラクターも含まれます。
俺嫁スレの解説 でも触れた通り、不特定多数の萌えキャラファンによって作り上げられたゲーム自体が珍しい上、複数の公式さんまで賛助してくださった、俺嫁スレパズルのようなプロジェクトは類例がありません。
本来であれば、賛助くださった皆さまを全員ご紹介差し上げるべきなのでしょうが、解説が肥大化しすぎてしまいますし、サイトの仕様上、掲載できる文量にも限りがありますので割愛させて頂きます。
関係者の皆さまにおかれましては、何卒ご容赦ください。
それでは以下に、本サイトで解説しているパズルの制作手法を応用した「俺嫁スレパズル」の一覧を掲載します。
仕様や構成、アルゴリズムなどは全て本サイトで解説しているパズルと共通です。
実際の式についても、ファイル名の頭文字が異なるだけですので省略します。
遊びかた
遊びたいキャラクターの下部にある「プレイ」を押すとCalculatorが開き、当該キャラクターに対応した式がFormulaへ自動入力されます。
式が入力された状態で、ページ内キーボードの一番下の段の右端にある実行(=)ボタンを押すと実行されます。
正常に動作しない場合は 動作確認済の環境 項および 動かない時は? 項をお読みください。
「ダウンロード」を押すと、当該キャラクターのタイルをダウンロードできます。
ゲームソフト(アプリ)のダウンロードではありませんので、遊びたい方は手順通りに「プレイ」を押し、Calculatorの画面で実行(=)ボタンを押してください。
どなたも人気がある素敵なキャラクターばかりですので、お好きなパズルで是非お楽しみください。
ご当地萌えキャラ文化に馴染みのない方にも、このプロジェクトを通じて推しキャラを見つけて頂ければ嬉しく思います。
大変に貴重な画像を提供してくださった、心優しいコンテンツホルダーの皆さまに最大の感謝を申し上げます!
動作確認済の環境
以下は正常な動作を確認できた環境であり、推奨環境でも必須環境でもありません。
Calculatorに限らず、ADSのオンラインサービス類は総じて柔軟に設計されていますので、ここに掲載していないOSやブラウザの組み合わせでも動作する可能性が十分あります。
OS: Windows 95以降, Android 4以降, iOS 10以降, macOS 10以降
ブラウザ: IE 5.5以降または新しいChrome, Firefox, Opera, Safari, Edge
その他: PlayStation 3内蔵ブラウザ(最新バージョン)
Windows 9x、Me、NT、2000の場合はIE 5.5以降のIEが必須です。
Windows XP以降のWindows OSでは、OSにインストール可能な最も新しいChrome、Firefox、Opera、Safariで動作確認が取れています。
最新版でなくても、そのOSにインストール可能な最後発のバージョンであれば構いません。
一例としてWindows XP + Chrome 49の環境でも動作しました。
ただし、古いブラウザでは本サイトを正常に開けませんので、IE5.5で遊びたい時は式をコピーし、CalculatorのFormulaへ貼り付ける必要があります。
現在、IE5.5では大半のサイトが正常表示されませんので、これは本サイトの作者が未熟というより、ADSの技術力が異常なだけです。
動かない時は?
いずれも基本的な部分ですが、動作しない場合は次の点を確認してください。
プラグイン
粗悪な広告ブロッカーやセキュリティーソフトは、たびたび不具合を引き起こす原因になります。
そうしたソフトの誤動作によりトラブルが生じた場合は、そのソフトを停止してから実行を試みてください。
ホワイト(除外)リストがあれば、Calculatorを公開しているADSのドメイン(ads.selfip.com)と、ADSが利用しているファイルストッカーのドメイン(ads.a.la9.jp)および本サイトのドメイン(moe.web.wox.cc)の3つを追加してください。
操作の手順
「プレイ」を押してCalculatorを開き、Formulaに式が入力されていることを確認したら、実行(=)ボタンだけを押してください。
十分に理解せずFormulaの内容を編集したり、他のボタンを押すと式が変わってしまい、正常に動作しなくなります。
その場合は一旦Calculatorを閉じ、本サイト上の「プレイ」を押し、Calculatorを開き直してください。
画像表示の設定
無効化されていると画像が表示されません。
大半のブラウザはデフォルトで表示する設定になっています。
JavaScriptの設定
無効化されていると正常に動作しません。
大半のブラウザはデフォルトで有効になっています。
エントリー方法
キャラクター画像の俺嫁スレパズル化を希望されるキャラクター運営関係者の皆さまは、X(旧Twitter)へ記録に残る形で #俺嫁スレパズル のハッシュタグを付け、以下の要件を充たす画像(一枚絵)を投稿してください。
当該投稿はキャラクターの著作者または正当な権利者が、当該画像の俺嫁スレパズル化および掲載を許諾くださった証拠として記録し、本サイトに掲載します。
許諾頂いた際の投稿や画像はアーカイブし、その後も恒常的に掲載しますので、ご同意の上ご参加ください。
#俺嫁スレパズル のハッシュタグが付いた画像の投稿を確認できれば、その画像の俺嫁スレパズル化および掲載に同意くださったものとみなします。
俺嫁スレへコメントを頂ければ嬉しいですが、わざわざ俺嫁スレで参加表明頂いたり、申込書などを作成頂く必要は原則ありません。
俺嫁スレパズル化に適した画像の要件は以下の通りです。
キャラクター画像
キャラクターゲームですので、大前提としてキャラクター(萌えキャラ)の画像が必須です。
正方形
長方形の画像は正方形になるよう、トリミングやセンタリングをすることになります。
細かい文字が無い
縦横206ピクセルまで縮小しますので、細かい文字が入っていると読めなくなる可能性があります。
文字には一定の大きさが必要です(既存のパズルを参考にしてください)。
クッキリしている
各タイルは明確に区別できなければなりません。
画像には一定のシャープ(鮮明)さが必要です。
重複タイルが無い
画像は下図のように4x4で16分割(タイルあたり52x52ピクセル)します。
何れのタイルも異なる絵柄となるような画像が必要です(既存のパズルを参考にしてください)。
最低206ピクセル
縦横206ピクセルまで縮小しますので、最低それ以上の解像度が必要です。
やや小さめに設計されているのは、ADS製Sliding 15 puzzleの仕様を継承しているからです。
これは恐らく、iPodのような画面の小さな端末でも遊べるようにするための配慮だと思われます。
スペシャルサンクス
総合情報通信技術研究機関 ADSさま、名古屋電算技術室さま、原付萌奈美ぷろじぇくと運営委員会さま、原付 ツーリングクラブ モナミさま、100MileClubさま、デジタルサポート ソガさま、ツーリングクラブ チェルキオさま、KoKo Producsさま、もなみん(原付萌奈美)さま、百舞留さま、木盛いぶかさま、木尾知恵流さま、白金心さま、まぬか(関東まなか)さま、広告代理店 プランニングオフィスケイズさま、いいね!プロジェクト推進委員会さま、いいねこ。のみせさま、ひとみん(足利瞳、弁天ちゃん)さま、嶺南ミカミちゃん運営委員会さま、みかみん(嶺南ミカミちゃん)さま、小山芳姫さま、合同会社如月庵さま、ついなちゃんさま、椎葉ゆのかさま、日本鬼子ぷろじぇくとさま、日本鬼子さま、いちごちゃんベリープロジェクト推進委員会さま、いちごのくにのイーたんさま、ゲームセンター ファンタジスタさま、ジスたんさま、ほやこおねえさんさま、ハヤシ薬局さま、くすり屋の良佳さんさま、鈴屋りんさま、ひなもりよわらさま、きみのほしぞらさま、星空ほたるさま、星空すすきさま、夕夏みかんさま、日向みさとさま、日向みどりさま、自衛隊愛知地方協力本部さま、萌上自衛隊さま、守山萌さま、愛西澪さま、サクラさま、株式会社ツキエスさま、美月咲紅さま、fukunosirabeプロジェクトさま、中通りくさま、喫茶チズさま、見穂稲荷神社さま、巫狗さま、伊丹ラク子さま、夜弓神楽狐之灯矢さまほかキャラクターの皆さま、およびキャラクター運営関係者の皆さま、SetoMonamerさん、まなちゃん、アスさん、ゆきちゃん、ファイズ(555)氏、アチャ(道民)氏、ごんた(権田原繁吉)氏、草取さんほか俺嫁民の皆さま(順不同)。
ガイドライン
本ページ(http://moe.web.wox.cc )へのリンクは自由です。
掲載している式は、ライセンスに従って改変や転載が行えます。
ただし、大半のキャラクター画像は本作、俺嫁スレパズルに限って使用許諾を受けています ので、GFDLとCCのデュアルライセンスが付与されている「もなみん一派 Ver.1」の画像を除き、全て流用禁止 です。
本作についての取材は、Calculatorを手掛けたADSの名古屋電算技術室に受けて頂く方向で合意形成(俺嫁4発目のレス番470~474 を参照)できており、先方の了承も得ています(お問い合わせページ )。
いかなるケースにおいても、賛助くださったキャラクターの皆さま、キャラクター運営事業者さまに不利益が及ばないよう、お願い申し上げます。
皆で楽しく遊びましょう!