プロジェクトNo.64： VJをはじめようDJがDisk Jockeyならば、VJはVisual Jockey。 だいぶ前からある言葉のようですね。（1980年代くらい？） 最近ではプロジェクションマッピングが流行ってますが、ただ立体に映像を投影するだけでなく、 リアルタイムで映像…

プロジェクトNo.63： WOW.js+Animate.css - DEMO画面表示されてら（スクロールで表示領域に入ったら）アニメーションが実行されるというライブラリです。 容量も軽量なので、ある程度決まった動きで実装を簡略化したい時とかに使えそうですね。

プロジェクトNo.62：PageTopへ戻る - DEMOページトップへ戻るリンクを簡単に実装しようと思うと、 <a href="#header">PAGE UP</a> みたいなのをfooterに配置するなど考えられるが、 今回実装するのは以下のようなもの。 リンクは画面下部に常に表示 ただし、ある程度スクロールした…

プロジェクトNo.61：videoタグで背景動画 - DEMO前回はjQueryプラグインを使用しましたが、 HTML5のvideoタグでも実現できました。 またWebサイトで動画を使う際に付けておきたい、サウンドのon/offも実装してみました。

プロジェクトNo.60：tubular - DEMOYoutubeの動画を背景全面に表示・再生できるJQueryプラグインがあったので試してみた。

プロジェクトNo.59：オートコンプリート - DEMO先日、面接に行った企業から出された課題の一つに「オートコンプリート」があったので実装してみました。

プロジェクトNo.58：Q-BLOCK3DCGソフトを探していたら、見つけた3Dドット作成ツール「Q-BLOCK」。 マイクラみたいに3Dドットを作成できます！マイクラやったことないんですけど。（プレイ動画は見たことありますよ） PC版とスマホ版があるので、どちらも触っ…

Macで使える画面操作をキャプチャしてGIF画像として作成できるフリーソフトを探してみたら、 簡単操作でできるフリーソフトの「LICEcap」を見つけたので紹介します。 矩形枠で囲んだ領域内の動作風景を、GIF アニメとしてキャプチャ＆出力してくれます。 ち…

プロジェクトNo.57：Processing入門近年、インスタレーションやメディアアートという言葉が取り上げられるようになってきています。 私はグラフィックデザイナーを目指している訳ではありませんが、デザインやアートは好きなので、自分の得意分野であるテク…

プロジェクトNo.55：タスクランナー前回はNode.jsを導入したので、次はGulpというツールを使って見る。 フロントエンドのお仕事って覚えることいっぱいありますね。さて、今回使うGulpというツールは、Node.js上で動くタスク自動化のためのビルドツールです。…

プロジェクトNo.55：Node.js & MongoDB入門ソーシャルゲームやチャットアプリなんかでよく使われているというNode.js。 これは勉強しておかなくては！ということで、いつも通りドットインストールさんのレッスンを一先ず修了。 要点とうまくいかなかった点を…

プロジェクトNo.54：Twitter BOTこの前LINE BOTを作ったので、その流れでTwitter BOTも作ってみました。 でも、調べたらプログラミングなしで作成できるサービスもあるようですね。 サービス終了のお知らせ - NAVER まとめ でも無料版はなにかと制限とかある…

プロジェクトNo.53：Chrome ExtensionChrome Extension(Google Chromeの拡張機能)の作成に必要な知識はHTML/JavaScript(jQuery)/CSSだけです。 Webページの作成と特に変わりませんね。 今回は最低限の機能のみで、Webサイトのタイトルを表示するだけの拡張機…

プロジェクトNo.52：Hammer.js - DEMOスマホサイトを作る際に実装できればUI的に良いのが、タップやスワイプなどのタッチジェスチャー。 Hammer.jsはそれを簡単に実装できるプラグインです。

プロジェクトNo.51：Microsoft Translator API - DEMO多言語チャットみたいなサービスを作る際に翻訳APIを使うのだろうが、調べてみるとGoogleの翻訳APIは有料みたい。 Microsoftのサービスでは月200万文字まで無料です。 とりあえず、今回は導入方法だけ確…

プロジェクトNo.50：LINE BOT API4/7にLINEの「BOT API Trial Account」が10,000名限定で無償提供されたということで、早速試してみました。 サクッとできるかなと思ったら意外とハマりました・・・ 作成したのは送信したメッセージをそのまま返すオウムBOT。

プロジェクトNo.49：関西弁ジェネレーター - DEMO入力した文字列を関西弁に変換してくれるジェネレータを作りました。 ソースを見てもらうとわかる通り、PHPのstr_replace()を使って変換パターンをゴリゴリ書いてるだけです。P.S. 私事ですが、少し前にアフ…