サイトのムラちゃんの「お喋り機能」の台詞をつぶやけるようになりましたぁー☆

メインサイトの方の更新になります~!

今回は台詞の内容ではなく,ちょっと技術的な好奇心で機能を追加した感じですねー.

これまでサイト上部のムラーバルさん,もといムラちゃんがレトロゲームに出てくる台詞をランダムで組み合わせてひたすらつぶやくーってのを作ったのですが.

このお喋り内容をサイト右上『お喋り内容をつぶやく☆』からTwitterでツイートできちゃいます!!

Mura-bal.com トップ

何か面白いなーって組み合わせがたまに出来る時に展開したいなーって!

まぁでも私がしたいだけで別に需要がある訳ではないですが,単純に作るとどうなるかなぁと.

唐突にちょっと技術寄りのお話をしてみよう.

やってることは単純で,台詞自体はあらかじめ内部の変数に用意されていまして,それをランダムで抽出して書き出してるだけです.

その器をHTML5のcanvasタグを使ってやってるので,HTML5が必要になるのですね.

canvasタグで作成した器に画像やテキストを書き出してる訳です.

面白いことにcanvasタグ内で書き出してるのは全部含めて画像になるようで,右クリックとかで「名前を付けて保存」しようとすると,ランダム生成したテキストまで含めて画像になるのですよね.

Web上にペイントツールが作りたくなりますねー.

自分が使いやすいドット絵ツールは作ってみたいなぁとか思ったり.

それはさておき,そのcanvas内に書き出すテキストをTwitterのシェアボタンが持つテキスト内に動的に書き換えをしてる訳です.

よく使うinnerHTMLでの書き換えですね.

この辺を想像しながらサイトのつぶやき機能を使っていただけると,なるほどなーってかじった人なら思ってくれる…ハズ??(笑)

今回は中途半端な内容でご勘弁!

プログラミングのページも作る予定なんだけど,もうちょっとコンテンツ作ってからかなぁーと思って半年以上経つね(棒).

ちんたらでも前に進もうと思います(*´∇`*)


カテゴリー: ウェブサイト関連 パーマリンク

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です