読者です 読者をやめる 読者になる 読者になる

one's way blog

ワクワクを生み出せるWebエンジニアを目指して。

【65:Sass】SassでCSSを楽にする

プロジェクトNo.65SassとはSyntactically Awesome Stylesheetsの略で、直訳すると「構文的なすごいスタイルシート」です。 Sassで書いたファイルをコンパイルしてcssに出力して使います。 大抵は大規模なサイトや複数人で実装するような現場で使われるようで…

【64:VJをはじめよう】VDMX5を使って映像を操作する

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

【63:WOW.js+Animate.css】WOW.js+Animate.cssで簡単にアニメーションを実装

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

【62:PageTopへ戻る】使えるいい感じページトップへ戻るリンク

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

【61:videoタグで背景動画】HTML5のvideoタグで動画を背景に使う

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

【60:tubular】Youtubeの動画を背景に使う

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

【オートコンプリート】JQueryUIのautocompleteで入力補完機能を実装

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

【58:Q-BLOCK】簡単操作で3Dドットを作成

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

【LICEcap】簡単に画面キャプチャからGIF画像を作成できるフリーソフト

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

【57:Processing入門】プログラミングによる視覚的な表現

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

【56:タスクランナー】Gulpで自動画像圧縮

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

【55:Node.js & MongoDB入門】Node.jsで掲示板アプリ+Node.jsからMongoDBへアクセス

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

【54:Twitter BOT】PHPとTwitterOAuthでつぶやきBOTを作る

プロジェクトNo.54:Twitter BOTこの前LINE BOTを作ったので、その流れでTwitter BOTも作ってみました。 でも、調べたらプログラミングなしで作成できるサービスもあるようですね。 無料でTwitter bot(ツイッターボット)を作れるサービスまとめ - NAVER まと…

【53:Chrome Extension】Google Chromeの拡張機能を作成する

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

【52:Hammer.js】タッチジェスチャーを実装

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

【51:Microsoft Translator API】無料の翻訳APIを使ってみた

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

【50:LINE BOT API】PHP+HerokuでオウムBOT

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

【49:関西弁ジェネレーター】PHPのstr_replace()で文字変換

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

【48:スライダーまとめ】いろんなスライダープラグインを使ってみた

プロジェクトNo.48:スライダーまとめ - DEMO何かとよく使うスライダーのJQueryプラグインを汎用性が高いものから個性的なものまで色々使ってみました。

はじめてのUnity | 3Dゲームを作る基礎編

基礎編と書いたけど、続きがあるかはわかりません。 最近、Web以外のプラットフォームでの開発も興味があって困ってます。 Unityは描画部分はGUIで基本的なものは簡単に作れるし、ロジックはJavaScriptが使えるので入りやすかったです。 今回はダウンロード…

CakePHP 3.x | フレームワークを使ってブックマークアプリケーションを作る

前回はcakephp2.xを使ってブログアプリを作りましたが、 今回は最新版の3.xを使ってブックマークアプリケーションを作成したいと思います。

はじめてのIoT | ArduinoでLチカ

IoT

巷で流行りのIoT。俺もLチカ(LEDチカチカの略)したーい!!! と思い立って、アフリカの大地で生活してる私は街で探してみるものの、 店の人から出てくるものはPC用のマザーボード。。。 まだこの国まではIoTの流れは来ていないのかと思いつつ、 諦めきれ…

【47:CakePHP 2.x】フレームワークを使ってブログアプリケーションを作る

プロジェクトNo.47:CakePHP 2.x - DEMOフレームワークを覚えることで、少ないコード量で、複雑なアプリケーションを作ることができます。 今回はPHP開発で有名なCakePHPフレームワークを使ってみたいと思います。

【46:プログレッシブエンハンスメント】ブラウザに適したスタイルで表示する

プロジェクトNo.46:プログレッシブエンハンスメント - DEMO従来のクロスブラウザという考え方から、最近ではプログレッシブエンハンスメントという考え方が流行っている様です。 プログレッシブエンハンスメントとは「新しいスタイルの書き方に対応している…

【45:Flexbox】floatを使わずに要素を横並びに配置する

プロジェクトNo.45:Flexbox - DEMO今までは上記の画像のように横並びに要素を配置しようとした場合、 floatを使って実現するのが主流でした。(その前はテーブルレイアウト) 最近では新しく「Flexible Box Layout Module」=Flexboxというものが、モダンブ…

【44:particles.js】幾何学的なアニメーションを表現する

プロジェクトNo.44:particles.js - DEMO日々、色んなライブラリが出てきて、作ってる人ってすげーなーと思いながら、 私はいつもありがたく利用させてもらっています。 たまには作る側に回ってもいいけど、やっぱり色んなライブラリを触れておく事でいざと…

【43:Facebook SDK for JavaScript】JavaScriptでFacebookログインを実装する

プロジェクトNo.43:Facebook SDK for JavaScript - DEMO Facebookページのタイムライン表示やいいねボタンの実装なんかはソーシャルプラグインを使えば簡単に実装できます。 Social Plugins - 参考資料 - 開発者向けFacebook しかし、Facebookログインを利…

【42:TwitterOAuth 】自分のTwitterタイムラインを表示する

プロジェクトNo.42:TwitterOAuth - DEMO単純に自分のTwitterタイムラインを表示したいのであれば、Twitterのプラグインを使って埋め込みコードを入れれば実装できますが、 Twitterでのログイン管理や各種情報の取得などはAPIを使って実装する必要があります…

HTML5での最低限のお作法

HTML5で書く時に最低限記述した方が良い事、またそれぞれの意味をまとめてみました。

【41:jquery-ui 】jquery-uiを使って簡単に様々な表現を行う

プロジェクトNo.41:jquery-ui - DEMO久しぶりの投稿です。 ここ最近は学生向けのWebデザインコンペティションの企画などしていました。 とはいうものの、自分自身まだまだ勉強すべきということは十分承知なので、ブログも再開して頑張っていきたいと思って…

PHPのプリペアドステートメントで実行させるSQLを確認してみた

PHPでユーザ入力値を使ってDB操作をする際に、プリペアドステートメントを使うと安全だ。 と色んなサイトに載っています。 実際にPHPマニュアルにも明記されています。 アプリケーションで明示的にプリペアドステートメントを使用するように すれば、SQL イ…

MAMPでMySQLのクエリログを出力する

MAMPでクエリログを出力したい時のTipsです。 環境 MAMP : バージョン 2.0.5 設定 MySQLの起動用シェルスクリプト(/Applications/MAMP/bin/startMysql.sh)に以下の様にオプションを追加します。 /Applications/MAMP/bin/startMysql.sh # /bin/sh /Applicat…

【40:ユーザ管理画面 】PHPからDB基本操作

プロジェクトNo.40:ユーザ管理画面 - DEMO前回の超簡素なログインシステムに引き続き、ユーザ管理画面を作りました。 SELECT, INSERT, DELETE, UPDATEと基本的な機能のみを考えて、なるべくセキュリティにも気を使いました。

【39:PDO 】ログインシステム - PHPでDBに接続

プロジェクトNo.39:PDO - DEMOPHPの変数やループなどの基本的な書き方はわかってきたら、次のステップはPHPからのDB接続。 単にDB接続と言っても色んな書き方があったり、セキュリティを気にしなくてはいけなかったり、結局どういう風に書けば良いの? とい…

【38:matter.js 】重力やバウンドを表現できる物理演算エンジンを使ってみる

プロジェクトNo.38:matter.js - DEMO重力、バウンド、慣性。これらを表現するには数学的知識とそれを実装する根気が必要です。 そんなものは持ち合わせていない私は、先人が作った素晴らしい物理演算エンジンのmatter.jsを使うことにしました。 なんとスマ…

【37:自作JQueryプラグイン 】クリックするとメッセージ表示するJQueryをプラグイン化

プロジェクトNo.37:自作JQueryプラグイン - DEMOこれまで既存のJQueryプラグインをいくつか使ってみたが、 自分でも簡単に作れるようなのでやってみた。 仕様は、クリックするとメッセージが表示されるものになります。

【36:blend-mode 】CSSブレンドモードで画像と色を重ね合わせる

プロジェクトNo.36:blend-mode - DEMO複数の背景画像や色などを重ね合わせることができるCSSの機能「ブレンドモード」。 ただ単に重ね合さるだけではなく、色々な効果を与えることができます。 言葉で説明するのが難しいのでまずはDEMOをご覧ください。

【35:localStorage】HTML5のlocalStorageでTODOリストを作る

プロジェクトNo.35:localStorage - DEMOHTML5のWeb Storageの一つであるlocalStorageを使ってTODOリストを作ってみましたが、 今回は正直、結構はまりました。 そのバグトラッキングも含めてご紹介したいと思います。 新しく覚えた部分が多かったので少し長…

【34:layerBoard.js】ページアクセス時に最初に表示されるアレ(モーダル) | JQueryプラグイン

プロジェクトNo.34:layerBoard.js - DEMOたまにサイトに訪問すると、最前面に表示されるアレ。 実はモーダルウィンドウっていう名前のものなんですね。(私も今回初めて知りました) layerBoard.jsは簡単にモーダルを表示させるためのJQueryプラグインです。

Macで隠しファイルを表示する方法 | トラブルシューティング

Windowsではフォルダプロパティから、Linux系のコマンドならls -aで表示できますが、 Macではどうやって隠しファイル及び隠しフォルダを表示するか。

【33:textillate.js】テキストのアニメーション | JQueryプラグイン

プロジェクトNo.33:textillate.js - DEMOtextillate.jsはテキストにアニメーションをかける事ができます。 実際のエフェクトの種類はanimate.cssの機能です。

Macのマルチタッチジェスチャーが突然効かなくなった時の対処法 | トラブルシューティング

3本指で横にスワイプ!(ビャッ!)デスクトップの切り替え! 3本指で上にスワイプ!(ビャッ!)立ち上げてるアプリの一覧表示! 4本指でキュッ!(この動作の名前がわからない)アプリケーション一覧表示! 4本指でファッ!(この動作も名前がわからない)…

【32:jQuery.Deferred】要素を順にアニメーション表示

プロジェクトNo.32:jQuery.Deferred - DEMOjQuery.Deferredはバージョン1.5から導入された、非同期処理をうまく扱うための標準モジュールです。 jQuery.Deferredなしで要素を順にアニメーション表示するにはコールバック関数とdelay()を使えばできるようで…

【31:ナビゲーションヘッダーの固定】上部に固定ナビゲーション

プロジェクトNo.31:上部に固定ナビゲーション - DEMO画面上部のヘッダーを固定してスクロールしても常時、上部にリンクがある様にする方法。 色んなサイトでよく見られる表現ですが、ページ内リンクでずれるなど、色々気を付けねばいけない事がある様です。…

【30:fullPage】1画面毎にスクロール | JQueryプラグイン

プロジェクトNo.30:fullPage -> DEMO1画面毎にスクロールできるプラグインです。 縦スクロールはもちろん、横にもスクロールさせてスライドの様にも使えます。

【29:画面サイズいっぱいの背景画像】画面サイズに対応した背景画像を指定

プロジェクトNo.29:画面サイズいっぱいの背景画像 - DEMO ビジュアル重視のサイトでよく使われるテクニックです。

MAMPのmysqlが起動しない時の対処法 | トラブルシューティング

MacでPHPなどのローカル環境開発に導入が超楽なMAMP。 サーバを起動ボタンを押すと、本来ApacheサーバとMySQLサーバが起動するはずが、 たまにMySQLサーバのみ起動しない時がある。 この対処法を紹介します。

【28:jquery.inview】:パララックス(要素出現) | JQueryプラグイン & CSSでPinterest風スタイル

プロジェクトNo.28:jquery.inview - DEMOパララックス(要素出現)も以前自作しましたが、プラグインがあったので使ってみたいと思います。 また、せっかくなのでCSSでPinterest風に表示させてみました。

【27:Nikebetterworld Parallax Effect】パララックス+リンク押下でスムーズなスクロール | JQueryプラグイン

プロジェクトNo.27:Nikebetterworld Parallax Effect背景画像のパララックスは以前自作しましたが、プラグインがあったので使ってみたいと思います。 また、同梱していたライブラリでサイト内遷移がヌルッと動くスムーズスクロールも実装してみました。

【26:galleriffic】サムネイル付きでオプション豊富なフォトギャラリー | JQueryプラグイン

プロジェクトNo.26:gallerifficサムネイル付きでオプション豊富なフォトギャラリーのgallerifficを使ってみたいと思います。 このプラグインはサムネイルにページング機能があるので、画像が多い場合に便利です。 また、プリロードする画像数などを決めれる…