2015-01-01から1年間の記事一覧
プロジェクトNo.45：Flexbox - DEMO今までは上記の画像のように横並びに要素を配置しようとした場合、 floatを使って実現するのが主流でした。（その前はテーブルレイアウト） 最近では新しく「Flexible Box Layout Module」＝Flexboxというものが、モダンブ…
プロジェクトNo.44：particles.js - DEMO日々、色んなライブラリが出てきて、作ってる人ってすげーなーと思いながら、 私はいつもありがたく利用させてもらっています。 たまには作る側に回ってもいいけど、やっぱり色んなライブラリを触れておく事でいざと…
プロジェクトNo.43：Facebook SDK for JavaScript - DEMO Facebookページのタイムライン表示やいいねボタンの実装なんかはソーシャルプラグインを使えば簡単に実装できます。 ソーシャルプラグイン - ドキュメンテーション - Facebook for Developers しかし…
プロジェクトNo.42：TwitterOAuth - DEMO単純に自分のTwitterタイムラインを表示したいのであれば、Twitterのプラグインを使って埋め込みコードを入れれば実装できますが、 Twitterでのログイン管理や各種情報の取得などはAPIを使って実装する必要があります…
HTML5で書く時に最低限記述した方が良い事、またそれぞれの意味をまとめてみました。
プロジェクトNo.41：jquery-ui - DEMO久しぶりの投稿です。 ここ最近は学生向けのWebデザインコンペティションの企画などしていました。 とはいうものの、自分自身まだまだ勉強すべきということは十分承知なので、ブログも再開して頑張っていきたいと思って…
PHPでユーザ入力値を使ってDB操作をする際に、プリペアドステートメントを使うと安全だ。 と色んなサイトに載っています。 実際にPHPマニュアルにも明記されています。 アプリケーションで明示的にプリペアドステートメントを使用するように すれば、SQL イ…
MAMPでクエリログを出力したい時のTipsです。 環境 MAMP : バージョン 2.0.5 設定 MySQLの起動用シェルスクリプト（/Applications/MAMP/bin/startMysql.sh）に以下の様にオプションを追加します。 /Applications/MAMP/bin/startMysql.sh # /bin/sh /Applicat…
プロジェクトNo.40：ユーザ管理画面 - DEMO前回の超簡素なログインシステムに引き続き、ユーザ管理画面を作りました。 SELECT, INSERT, DELETE, UPDATEと基本的な機能のみを考えて、なるべくセキュリティにも気を使いました。
プロジェクトNo.39：PDO - DEMOPHPの変数やループなどの基本的な書き方はわかってきたら、次のステップはPHPからのDB接続。 単にDB接続と言っても色んな書き方があったり、セキュリティを気にしなくてはいけなかったり、結局どういう風に書けば良いの？ とい…
プロジェクトNo.38：matter.js - DEMO重力、バウンド、慣性。これらを表現するには数学的知識とそれを実装する根気が必要です。 そんなものは持ち合わせていない私は、先人が作った素晴らしい物理演算エンジンのmatter.jsを使うことにしました。 なんとスマ…
プロジェクトNo.37：自作JQueryプラグイン - DEMOこれまで既存のJQueryプラグインをいくつか使ってみたが、 自分でも簡単に作れるようなのでやってみた。 仕様は、クリックするとメッセージが表示されるものになります。
プロジェクトNo.36：blend-mode - DEMO複数の背景画像や色などを重ね合わせることができるCSSの機能「ブレンドモード」。 ただ単に重ね合さるだけではなく、色々な効果を与えることができます。 言葉で説明するのが難しいのでまずはDEMOをご覧ください。
プロジェクトNo.35：localStorage - DEMOHTML5のWeb Storageの一つであるlocalStorageを使ってTODOリストを作ってみましたが、 今回は正直、結構はまりました。 そのバグトラッキングも含めてご紹介したいと思います。 新しく覚えた部分が多かったので少し長…
プロジェクトNo.34：layerBoard.js - DEMOたまにサイトに訪問すると、最前面に表示されるアレ。 実はモーダルウィンドウっていう名前のものなんですね。（私も今回初めて知りました） layerBoard.jsは簡単にモーダルを表示させるためのJQueryプラグインです。
Windowsではフォルダプロパティから、Linux系のコマンドならls -aで表示できますが、 Macではどうやって隠しファイル及び隠しフォルダを表示するか。
プロジェクトNo.33：textillate.js - DEMOtextillate.jsはテキストにアニメーションをかける事ができます。 実際のエフェクトの種類はanimate.cssの機能です。
3本指で横にスワイプ！（ビャッ！）デスクトップの切り替え！ 3本指で上にスワイプ！（ビャッ！）立ち上げてるアプリの一覧表示！ 4本指でキュッ！（この動作の名前がわからない）アプリケーション一覧表示！ 4本指でファッ！（この動作も名前がわからない）…
プロジェクトNo.32：jQuery.Deferred - DEMOjQuery.Deferredはバージョン1.5から導入された、非同期処理をうまく扱うための標準モジュールです。 jQuery.Deferredなしで要素を順にアニメーション表示するにはコールバック関数とdelay()を使えばできるようで…
プロジェクトNo.31：上部に固定ナビゲーション - DEMO画面上部のヘッダーを固定してスクロールしても常時、上部にリンクがある様にする方法。 色んなサイトでよく見られる表現ですが、ページ内リンクでずれるなど、色々気を付けねばいけない事がある様です。…
プロジェクトNo.30：fullPage -> DEMO1画面毎にスクロールできるプラグインです。 縦スクロールはもちろん、横にもスクロールさせてスライドの様にも使えます。
プロジェクトNo.29：画面サイズいっぱいの背景画像 - DEMO ビジュアル重視のサイトでよく使われるテクニックです。
MacでPHPなどのローカル環境開発に導入が超楽なMAMP。 サーバを起動ボタンを押すと、本来ApacheサーバとMySQLサーバが起動するはずが、 たまにMySQLサーバのみ起動しない時がある。 この対処法を紹介します。
プロジェクトNo.28：jquery.inview - DEMOパララックス（要素出現）も以前自作しましたが、プラグインがあったので使ってみたいと思います。 また、せっかくなのでCSSでPinterest風に表示させてみました。
プロジェクトNo.27：Nikebetterworld Parallax Effect背景画像のパララックスは以前自作しましたが、プラグインがあったので使ってみたいと思います。 また、同梱していたライブラリでサイト内遷移がヌルッと動くスムーズスクロールも実装してみました。
プロジェクトNo.26：gallerifficサムネイル付きでオプション豊富なフォトギャラリーのgallerifficを使ってみたいと思います。 このプラグインはサムネイルにページング機能があるので、画像が多い場合に便利です。 また、プリロードする画像数などを決めれる…
プロジェクトNo.25：flexsliderそろそろ実際に仕事で役立つ（だろう）技術を使えるようにと、様々なプラグインを活用していこうかと思います。 手始めにここで紹介されているプラグインを片っぱしから触っていきます。 【新人向け】簡単にできた！Webサイト…
プロジェクトNo.24：パララックス3前回に続けてパララックス効果を使ったサイト第３弾。 今回はマウスポインタの方向を目玉が追いかける様なパララックスサイトを作って見ました。
プロジェクトNo.23：パララックス2前回に続けてパララックス効果を使ったサイト第２弾。 今回はスクロールすることで背景位置が変わるのと、要素が出現するパララックスサイトを作って見ました。
プロジェクトNo.22：パララックス1パララックスとはparallax=(観察者の位置の移動による)変位、 つまり視差の事で、視点の差を使って立体的な効果を出すことをパララックス効果と言います。 一時期流行った手法ですね。 今回はスクロールすることで要素が変…
