カテゴリー別アーカイブ: javascript

SVGをさわってみた


SVG Watch Demo

最近はあんまりHTML5とかCanvasとか、SVGとか聞かなくなってきた気がするんですが、もう十分に広がって普通になったからなんでしょうかね。

仕事の関係でSVGをさわることになりそうだったので、自分でちょっと調査してたらなかなか面白そうだったので、時計を作ってみました。SVGというとアナログ時計の例をよく見た気がしますが、これはデジタルです。

SVG Watch Demo(上の画像クリックでも飛びます。)

以下説明など。

続きを読む SVGをさわってみた

見ているサイトのQRコードを作るブックマークレット


タイトルのようなものを作ってPCで見てたものをスマホで確認する時に便利に使っていたのだけど、記事にしてなかった。

こういうの、確認するとき一般的にはどうやるもんなんでしょう?メールで送ったりとか?

ライブラリはjQueryjquery.qrcode.jsを使っています。JS単体で変換するのでどこかのサーバに送るよりは良いかと。

QRCode生成

上のリンクをブックマークブックマークエリアにドラッグドロップしてください。あるいは、適当なページをブックマークしてリンクのURL部分をペーストしてください。

IE9以上とモダンブラウザでは動作すると思います。実行すると、大きくQRコードが表示されます。クリックすると閉じます。

ソースは以下のような感じです。

続きを読む 見ているサイトのQRコードを作るブックマークレット

jquery.rayeffect.js


HTMLで演出っぽいものを作れるか、というのと、jQueryのプラグインを作ってみる練習。

Haxeを最近は使ってますが、これは生JSです。jQueryプラグインですしね。

さて。RayEffectです。

サンプル:→RayEffect JS

rayeffectjs

n0wriさんwonderflで作られていたFlashエフェクトを元ネタにしています。(どこかの何かのキャンペーンサイトで同じようなエフェクトがあったような気がします。…が果たして何だったか。)

続きを読む jquery.rayeffect.js

SyntaxHighlighterEvolvedでWordPressのHaxeのソースを読みやすくする


前のHaxeの記事を作った時に調べたまとめ。

*2014/08/02プラグインの更新で動作しなくなっていたので修正

haxe_highlight

→前の記事:Haxe/JSの練習のためにスライドショーっぽいものを作る – spiffieldLabs

ブログにソースを貼り付けるのであればSyntaxHighlighterEvolvedが便利です。(使用したのはver3.1.10です。)

続きを読む SyntaxHighlighterEvolvedでWordPressのHaxeのソースを読みやすくする

Haxe/JSの練習のためにスライドショーっぽいものを作る


slideshow

作ったスライドショーっぽいもの

JavaScriptを書き出すための言語はいくつかありますが、CoffeeScriptはちょっと見た程度。TypeScriptは導入してみようと思ったもののちょうど大きな変更があったようで、もうちょっと待ったほうが良さそうだったのと、外部ファイルの参照がやや面倒そうだったので後回し。JSXはPhotoshop等のJavaScript拡張と名前が被っていて混同するのであんまり。AS3はそこそこ使えるというのもあったので、Haxeならわりと楽に使えるかなということでHaxeを覚えてみることにしました。

(使用したのはHaxe3.0、OSはWindows7です。)

続きを読む Haxe/JSの練習のためにスライドショーっぽいものを作る