今やjavascriptフレームワークはフロントエンドの者にとっては出来て当たり前という雰囲気をひしひしと感じております。 javascriptフレームワークといえば、 ・react ・angular ・backbone ・riot ・Aurelia 等々あり、特に人気が高いのは、react,angularなのですが… 私が目をつけたのは「vue」です。 vue.jsとは vue.jsとは公式サイトから引用させて頂き、 Vue (発音は / v j u ː / 、 view と同様）はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は初めから少しづつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てているため、Vue.js を使い始めたり、

"use strict"; //イベントの振り分け var EVENT = {}; if ('ontouchstart' in window) { EVENT.TOUCH_START = 'touchstart'; EVENT.TOUCH_MOVE = 'touchmove'; EVENT.TOUCH_END = 'touchend'; } else { EVENT.TOUCH_START = 'mousedown'; EVENT.TOUCH_MOVE = 'mousemove'; EVENT.TOUCH_END = 'mouseup'; } (function () { var camera, scene, renderer; var cube, sphere, torus, material; var count = 0, cubeCamera1, cubeCamera2; var f

css3で登場したflexboxですが、そろそろ使える頃合いがくるんじゃなかろうかということでflexboxを使ったら簡単だったなぁと思うレイアウトを実際に試してみました。 flexboxについてのそもそも解説はいろんなブログにあるので、ここでは割愛させて頂きます。 どんなものか理解するためのサイトとしては以下をお薦めします。 Visual Guide to CSS3 Flexbox: Flexbox Playground | 簡単にいうと、cssの新しいレイアウト方法になります。これまでの方法と比べると、グッと簡単に様々なレイアウトができるようになります。 DEMOを作りましたのでそちらをご覧ください。 DEMO flexboxのサンプル ツーカラム よくあるツーカラムのコンテンツですね。 今までだとfloatを使って…という感じでしたが、 flexboxを使うとこんな感じになります。

Ajaxを使ってフォームをPOSTすると、ページ遷移しないため、 管理画面などで連続して処理を行いたい場合、 こうすることでユーザのストレスを減らすことができます。 また、そのときのデータの受け渡しをJSONで行うことで、 HTMLの書き換えなどを柔軟に行うことができます。 フォームの種類にはいくつかありテキストボックスやチェックボックスなど、 ほとんどのフォーム要素は以下の様なコードを記述することにより、 Ajaxで問題なくPOSTを行うことができます。 $(function() { $("form").submit(function(event) { var $form = $(this); var $button = $form.find(":submit"); event.preventDefault(); $.ajax({ type: "post", url: "example.

SVGとCSS3を使った線画によるテキストのアニメーションの方法が紹介されていました。 想像していたよりも、ずっと簡単にできることがわかりました。 こちらの方法を少し応用して筆記体のアニメーションをやってみましたので、 ご紹介いたします。 ↓参考にさせていただいたサイト SVG線画が美しいリッチアニメーションの作り方 ↓作ってみたもの DEMO 方法 基本的な方法・手順は参考サイトと一緒です。 1. Illustratorを使い、筆記体のフォントを、ペンツールを使って一筆書きのパスとしてトレースする Illustratorでモデルとなる筆記体のフォントでテキストを配置し、ペンツールでトレースします。 このとき、パスは途中で切らずに、一筆書きの状態になるよう、1つのパスでトレースします。 ただ、実際の筆記体のように、t, fの横線は別のパスとして作成し、 iの点の部分は星形のパスとして作成し

僕がよく使用しているjQueryで汎用的なコードを紹介します。 jQueryで簡単に実装できるので、プラグインなんかを使用するよりは、 自分で書いた方が、ごちゃごちゃせずに済んで良いと思います。 ・ドロップダウンメニュー ・アコーディオンコンテンツ ・ページ内スクロール 全部実装したサイトがサンプルでありますので、 そちらもご覧ください。 DEMO まずは、 ドロップダウンメニュー シンプルに、メニューにホバーすると、その下のメニューがアニメーションして出てくるというものです。 サンプルサイトでは、[about][service][product]の部分になります。 jquery //グローバルナビをドロップダウンで表示 $(function(){ $("#globalnavi li").hover( function(){ $(this).children("ul").slideTogg