JavaScript

ブラウザで本格3DCGアプリ『WebGLStudio.js』

3

ブラウザから使える本格3DCGソフト『WebGLStudio.js』。.jsとついている事から分かりますがJavaScriptでMITライセンスのオープンソース。ネイティブアプリ並といってよい出来栄えで、今後開発が盛り上がっていったら凄い事になるかも。細かいモデリングは苦手かな? 続きを読む

ポリゴンやラインアートの背景作成WEBサービス

1

ポリゴンやラインアートなどの幾何学模様を作成するジェネレーターです。背景が単色やグラデだと寂しい時や、mathematicalで知的な印象もするのでシステムの管理画面なんかにもいいと思います。手っ取り早く各サービスのサンプルがみたい人はgithubに載ってます。 続きを読む

壁紙にブラー&スマホとピッタリサイズにするWEBサービス『picrop』

1

好きな画像にiOS7のようなブラー(すりガラス)加工をしたり、様々なデバイスとピッタリサイズにトリミングできるWEBサービス『picrop』を公開しました。IE9では動きませんがスマホ含む殆どのブラウザで動作します。

トリミングでは拡大縮小や回転が直感的にできます。ブラー効果のほか、背景色と透明度を組み合わせることで簡易的な色調補正もできます。 続きを読む

今年は迫力の3Dでワードプレスに雪を降らす

1

雪のシーズン到来ということで、ブログに季節感をプラスする雪を降らせてみました。HTML5のcanvasに対応したブラウザなら、このページには既に雪がチラチラしていると思います。(降ってないならおしてみて)JavaScriptの3Dライブラリ『Three.js』で描画されており、雪は立体的に舞います。マウスの動きにも反応します。

ただ難点として、canvasを画面いっぱい被せてるのでリンク等のクリックが効きません。そのため画面内でクリックが発生したらcanvasと共に雪は消えます。 続きを読む

文字を円に沿って配置するjQueryプラグイン『CircleType.js』

1文字を円に沿って配置するjQueryプラグイン”CircleType.js”をGUIで試せるサンプルを作ってみました。ニョキニョキ動いて面白いです。

“CircleType.js”はIE9以上に加えモダンブラウザ対応なので使いやすく、Google Fonts+CSS3の組み合わせで、かなり凝った表現も可能になります。プラグインは2.7kbと軽量で導入も簡単でした。 続きを読む

アーティスティックな壁紙が作れる『Flat Surface Shader』

1

抽象的なオリジナル壁紙を作れるサイトをご紹介します。元はJavaScript用のポリゴンシェーダのサンプルサイトのようですが、指定サイズで画像出力ができるので、上のようなiPhone用壁紙が作れます。もちろんデスクトップ用でもOKです。

ポリゴンの密度や色・光源などを多彩に設定できるので、自分好みの一枚が作れるかと。 続きを読む

Bootstrap3のダミー画像作成JS『holder.js』

bootstrap

Bootstrap3に使われてるダミー画像をリアルタイムに作成する『holder.js』について。今回、短時間でモバイルファーストのページを作りたくてBootstrap3を使うことに。

そのページはiPhoneアプリを公開する時に必ず必要なサポートページ。最初はアクセス規模が分からないので、専用サイトではなくブログ記事として簡易的に作りました。しかし、いざアプリを公開すると思ったよりずっとアクセスが多いことが判明。しかも殆ど海外からのアクセスで、ベースが日本語の当サイトでは恐らく文字化けして見えているハズです。

そんなわけでiPhoneからのアクセスも多いのでモバイルファーストのBootstrap3で作り直し。カルーセルのサンプルをベースにしたので1日で作れました。 続きを読む

tweetDance.jsをバージョンアップ

当ブログで公開中のtweetDance.jsがTwitterAPI1.0の停止に伴い動かなくなったのを修正しました。手軽に導入できるのが大きな特徴だったtweetDanceでしたが、TwitterAPI1.1のOAuth化のため、PHPにてAPIにアクセスする必要がでてきました。

そのためtweetDance1.1の導入には、jQueryプラグインに加えPHPスクリプトの設置が必要になります。 続きを読む

tumblrのYouTube埋め込み表示がカッコイイ

tumblr_logo

最近tumblrのダッシュボードで流れるYouTubeの埋め込み表示が変わって「お!」な感じだったので調べてみました。

まずYouTubeの動画を普通に貼りつけると、こうなります。

特にこれでも問題ないというか、Youtubeの特徴的な再生ボタンのおかげで十分動画だと分かります。しかし最近のタンブラーの動画サムネはこのように変わりました。 続きを読む

スマフォ対応してるjQueryカラーピッカー「ExColor」をBootstrap対応する

exタイトルの通りですが、今回カラーピッカーを探した経緯は、愛用していたjQueryの「COLOR PICKER」がiPhoneから操作できなかったので乗り換えの必要性に迫られました。

「COLOR PICKER」はPhotoshopライクな操作が使いやすく、動作も安定しており、かなり気に入っていたんですが、スマフォで動かないのは致命的。スマフォ対応しているjQueryカラーピッカーを探してみるも、それほど数は多くなく、最終的に「ExColor」が見つかりました。今後定番として愛用できる完成度です。

しかし、Bootstrap環境に導入するとCSSの影響で表示不良を起こしてしまうため、修正します。 続きを読む