最近はあんまりHTML5とかCanvasとか、SVGとか聞かなくなってきた気がするんですが、もう十分に広がって普通になったからなんでしょうかね。
仕事の関係でSVGをさわることになりそうだったので、自分でちょっと調査してたらなかなか面白そうだったので、時計を作ってみました。SVGというとアナログ時計の例をよく見た気がしますが、これはデジタルです。
→SVG Watch Demo(上の画像クリックでも飛びます。)
以下説明など。
「javascript」カテゴリーアーカイブ
見ているサイトのQRコードを作るブックマークレット
タイトルのようなものを作ってPCで見てたものをスマホで確認する時に便利に使っていたのだけど、記事にしてなかった。
こういうの、確認するとき一般的にはどうやるもんなんでしょう？メールで送ったりとか？
ライブラリはjQueryとjquery.qrcode.jsを使っています。JS単体で変換するのでどこかのサーバに送るよりは良いかと。
上のリンクをブックマークブックマークエリアにドラッグドロップしてください。あるいは、適当なページをブックマークしてリンクのURL部分をペーストしてください。
IE9以上とモダンブラウザでは動作すると思います。実行すると、大きくQRコードが表示されます。クリックすると閉じます。
ソースは以下のような感じです。
jquery.rayeffect.js
HTMLで演出っぽいものを作れるか、というのと、jQueryのプラグインを作ってみる練習。
Haxeを最近は使ってますが、これは生JSです。jQueryプラグインですしね。
さて。RayEffectです。
サンプル:→RayEffect JS
n0wriさんがwonderflで作られていたFlashエフェクトを元ネタにしています。(どこかの何かのキャンペーンサイトで同じようなエフェクトがあったような気がします。…が果たして何だったか。)
SyntaxHighlighterEvolvedでWordPressのHaxeのソースを読みやすくする
前のHaxeの記事を作った時に調べたまとめ。
*2014/08/02プラグインの更新で動作しなくなっていたので修正
→前の記事:Haxe/JSの練習のためにスライドショーっぽいものを作る – spiffieldLabs
ブログにソースを貼り付けるのであればSyntaxHighlighterEvolvedが便利です。(使用したのはver3.1.10です。)
Haxe/JSの練習のためにスライドショーっぽいものを作る
JavaScriptを書き出すための言語はいくつかありますが、CoffeeScriptはちょっと見た程度。TypeScriptは導入してみようと思ったもののちょうど大きな変更があったようで、もうちょっと待ったほうが良さそうだったのと、外部ファイルの参照がやや面倒そうだったので後回し。JSXはPhotoshop等のJavaScript拡張と名前が被っていて混同するのであんまり。AS3はそこそこ使えるというのもあったので、Haxeならわりと楽に使えるかなということでHaxeを覚えてみることにしました。
(使用したのはHaxe3.0、OSはWindows7です。)