ドメインのセールでなんとなく検索したunko.shopが空いていたので、200円ちょっとで購入した。
今年のウェブページの開発の演習もかねて、インタラクティブに(とはいってもクリックだけだけど)unkoをつついて流せるウェブサービスを作りました。
画像をクリック、またはタッチすると、unkoが流れていくだけのコンテンツです。
使い方
unko以外を流す
コンテンツをドラッグ&ドロップすると、初期の画像以外を流すことができます。
Google画像検索の結果
別のウインドウで開いたGoogle画像検索の結果の画像をそのままドラック&ドロップできます。
例えばいらすとやさんの画像の検索結果の画像をunko.shopへドラック&ドロップすると、次のようになります。
https://unko.shop/?u=s1.bp.blogspot.com%2F-Q9jOqnVqGuo%2FW64DqXTxwfI%2FAAAAAAABPIk%2Fmn0XoaVlL2s_Sphqb-5WielV75A6JIEowCLcBGAs%2Fs800%2Fjob_yarigai_sausyu.png
ブラウザで表示した画像
同様に、一般的な画像URLも設定できます。
画像そのものをドラック&ドロップしてください。
https://unko.shop/?u=spbs.twimg.com%2Fmedia%2FEb_XlmUUEAA4B8g%3Fformat%3Djpg%26name%3Dmedium
その他URL
画像以外のURLのうち、iframe表示できるものについては画像のようにサムネイルを表示します。
https://unko.shop/?u=sja.wikipedia.org%2Fwiki%2F%25E3%2582%25A2%25E3%2583%2588%25E3%2583%25A9%25E3%2583%25B3%25E3%2583%2581%25E3%2582%25B9%25E3%2581%25AE%25E8%25AC%258E
サンドバックの代わりに使う
次のURLは画像と効果音を差し替え、簡易的なサンドバックを生成します。
https://unko.shop/?u=s4.bp.blogspot.com%2F-_hfNu0keIIQ%2FV8jqWauh2-I%2FAAAAAAAA9dU%2FahUPgj1nNrsEV2DrqgisQ0BiDQKSM9GGgCLcB%2Fs800%2Fboxing_sandbag.png&n&se=1
URLの後ろに、?se=1をつけると効果音が変わります。
さらに、&nをつけると画像を繰り返し使うようになります。
URLパラメータ
URLパラメータで画像や効果音を変えることができます。
uキー
エンコードした外部コンテンツのURLを指定します。
以下のコードで変換します。
function encodeURL(u){ if(!u.match(/^https?\:\/\/.+/)){ return undefined; } var url=u.substring(u.indexOf("//")+2); if(u[4]=='s'){ url='s'+url; }else{ url='_'+url; } return encodeURIComponent(url); }
seキー
効果音の種類を設定します。0で標準、1で打撃音をセットします。
http://unko.shop?se=0
http://unko.shop?se=1
nキー
外部コンテンツを繰り返しつつけるようになります。
fキー
外部コンテンツを読み込む際の確認メッセージを省略します。
ソース
希望があれば公開します。(ないよね)