いろいろ水に流すツールを作った

ドメインのセールでなんとなく検索したunko.shopが空いていたので、200円ちょっとで購入した。

今年のウェブページの開発の演習もかねて、インタラクティブに（とはいってもクリックだけだけど）unkoをつついて流せるウェブサービスを作りました。

unko.shop

画像をクリック、またはタッチすると、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

ローカルドライブにある画像ファイル

jpeg/bmp/gif/pngなどをドラック＆ドロップできます。
ローカルファイルはそのPCでのみ使用できます。アップロードなどは行いません。

サンドバックの代わりに使う

次の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キー

外部コンテンツを読み込む際の確認メッセージを省略します。

共有機能

共有機能は画像の差し替えのみに対応しています。効果音や繰り返しの設定は登校前にURLを編集してください。

ソース

希望があれば公開します。（ないよね）