ゲームエンジンや3Dソフトウェアを利用して高度な表現ができるこの時代でも、プリミティブな描画や動き、アルゴリズムから学べることは多い。それらをJavaScriptで書くクリエイティブコーディングという形で学べる手引書が本書となる。
クリエイティブコーディングの教科書
ゲームエンジンや3Dソフトウェアを利用して高度な表現ができるこの時代でも、プリミティブな描画や動き、アルゴリズムから学べることは多い。それらをJavaScriptで書くクリエイティブコーディングという形で学べる手引書が本書となる。
React を深く知るための入り口
Reactに対する見方をアップデートする 国内外の優れた開発者の方による React の各論の記事は枚挙にいとまがありません。しかし、React の入門を一通り終えた方に向けの浅く広い総論はあまり見かけません。 React の公式ドキュメントのトップページに掲載されている短い3つの文章があります。この React の本質を表現した文章を掘り下げることが、初学者のステップアップにつながるのではないかと考え、各章に対して注釈を加えました。 React について少し深く知ることで、さらに React を好きになったという方を一人でも多く増やしたい。その思いから本記事を執筆しました。 本記事は React の考え方を知ることで、React に対する見方をアップデートすることを目的としています。 Reactとは何か。それはUIを構築するためのJSライブラリである React公式ドキュメントの一文 R
複数のタグをサクッと追加できるjQueryプラグイン「Input_Tag」を作りました | SHINGO IRIE
テキストフィールドに入力すると、自動補完で選択肢がでてきて、タグが追加されるような仕組みを入れたかったのですが、既存のもので使い勝手がよさそうなものがなかったので作ってプラグインとしてgithubで公開してみました。 複数タグの追加がサクッとできる 文字を入力すると、選択肢がでてきます。選ぶと、入力ボックス内にタグがペタッと張り付きます。デモはこちらから。 設置方法jQueryとjQuery UI、CSSを読み込む<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <link
人気上昇中のJavaScriptライブラリを調べてみた【2016年版】
新しいWeb開発フレームワークも登場！ 2015年中に人気が急上昇してきており、「2016年では必須の知識」となりそうなJavaScriptライブラリをランキング形式で発表する。 ← 前回 連載 INDEX 2016年が始まり、心機一転で「今年こそはWeb開発を頑張ろう」と思っている人も少なくないだろう。そんな方々に向けて本稿では、2015年中に人気が急上昇してきており、「2016年では必須の知識」となりそうなJavaScriptライブラリをランキング形式で発表する（※昨年の2015年版はこちら）。 なお、本稿のランキング決定では、検索キーワードの流行を調査可能な「Googleトレンド」（「すべての国」「過去 12 か月間」「コンピュータ、電化製品」「ウェブ検索」という条件で絞り込み）を使って、ライブラリの人気をジャンルごとに比較した（※ライブラリ名が一般的な英単語の場合、Web検索時に、
【複数行にも対応】長過ぎる文字列を省略して末尾を三点リーダー（…）にする方法いろいろ | Recruit Tech Blog
ランディングページといったコンテンツもレイアウトも全て決め打ちで成立するようなものはさておき、多くの Web サイトおよびアプリケーションは、いかなる分量のコンテンツであろうと柔軟に受け入れて表示出来るように設計・デザインされなくてはなりません。 しかし、全ての文字列を表示するには長過ぎてレイアウトが崩れてしまうといった場合には、何らかの方法で文字列を省略する必要があります。一昔であれば Ruby や PHP、Java などサーバーサイドで文字列を切り捨てるなどの加工をしてからフロントエンドに返すという方法が常套手段として用いられていました。しかし、これでは昨今のワンソースによるレスポンシブデザインといったスクリーンサイズに応じて動的に表示領域が変わるようなデザインに対応しきる事が出来ません。PCサイズの表示領域に適した文字数を返したとしてもモバイルサイズの表示領域がそれと同じとは限りませ
jQuery Mobileを利用するには？
これらの機能を利用することで、開発者はデバイスに依存することなく、手軽にネイティブアプリ・ライクなUI（ユーザーインターフェース）を実装できます。当然、jQueryとの親和性に優れますので、アプリ独自の機能を実装する場合にも、jQueryの知識をそのまま利用できるのはうれしいポイントです。 jQuery Mobileの動作環境 jQuery Mobileが動作するおもな環境は、以下のとおりです。ざっくりと言ってしまうならば、対応が制限されるデバイス／機能が一部にあるにせよ、現在メジャーな環境のほとんどで問題なく動作します。 Android iOS Windows Phone Chrome for Android Firefox Mobile Opera Mobile／Desktop Kindle 3 and Fire Blackberry Kindle 3, Fire, and Fire
jQuery UI の Dialog のダイアログをアニメーション動作で開閉
jQuery UI の Dialog プラグインのダイアログを、アニメーション動作で開閉させる。アニメーション動作の指定には、show オプションとhide オプションを使う。 show オプションとhide オプションに指定する値については、アニメーション開閉の種類と動作例（サンプル）へ。 実装例（サンプル） 「×」アイコンをクリックすると、アニメーション動作で閉じる。タイトルをドラッグしながら、ダイアログを移動できる。ダイアログのサイズを変更することもできる。 ダイアログを開く 実装例（サンプル）の動作について 「ダイアログを開く」ボタンを押すと、ブラウザの中央に、ダイアログが、アニメーション動作で出現する。 ダイアログ内の「×」アイコンをクリックすると、アニメーション動作で、ダイアログを閉じる。 ダイアログ内のタイトルをドラッグしながら、ダイアログを移動できる。 ダイアログのサイズを
スマートフォンで撮影した写真をjavascriptのFile APIでinputへセット
iOS6のSafariから対応の、HTML5のFileReaderをつかって スマートフォンのカメラを起動し、撮影した画像を <input type=”file”>へセットしたり <img>としてプレビューしたりするサンプルを作ってみました。 サンプル 今回は、jQueryなしで組んでみました。 <div class="console"> <div class="button"></div> <input id="addImage" type="file" accept="image/*"> </div> <div Id="preview"></div> window.onload = function(){ var $addImage = document.getElementById("addImage"); // input type="file" の要素 var $
レスポンシブ対応のWebページを制作する時に役立つスクリプトのまとめ
bodyやページ上の各要素にレスポンシブ用のclassを付与、HTML, CSS, JavaScriptで利用できるブレイクポイントを一元管理、設定したブレイクポイントに応じて最適なサイズの画像を表示・レイアウトの変更など、レスポンシブ対応のWebページを制作する際に役立つスクリプトを紹介します。 Restive.JS Restive.JS -GitHub 表示しているデバイスを自動検出し、bodyや各要素に任意に定義したブレイクポイントごとのclassを付与します。ブレイクポイントはピクセルと解像度、プラットフォームやデバイスの種類や向きの判別にも対応。
jQueryを使ったタブメニューの実装サンプルまとめ
**追記** この記事とは直接関係ありませんが、自作のタブプラグインを貼っておきます。 rin316/jquery.tab: jQuery tab plugin. **追記終わり** 仕事でjQueryを使ったタブメニューを作ったので忘れないようにメモ。 それぞれの挙動も比較しやすいように並べてみました。 今日が勉強初投稿の日！ 写真:新川通りで撮った桜。 まずはファイルの用意 下記リンクからダウンロード。 ・jQuery本体…Past Releases内→最新バージョンのMinified ・Download Builder | jQuery UI (このサイトで使っているui.tabs.zip) head内にリンクを張る ダウンロードしたファイルに対して、head内にリンクを張ります。 <head> <!-- jQuery --> <script type="text/javascrip
ビジュアライゼーションは「情報を見つける」ための行為 - WirelessWire News（ワイヤレスワイヤーニュース）
きれいなだけでは役に立たない ──今のビジュアライゼーションの動きのなかで、増井さんが問題だと感じていることはありますか？ 増井：加工中心になってしまっていることですね。本来、ビジュアライゼーションというのは、何かを理解したり、検索したりするために使うはずなのに、「きれいだったらいい」という感じになってしまっています。インフォグラフィックスというのも、ポスターを頑張ってきれいに描くのとあまり違いはない。 そこに注力しても、ではこれは本当に便利なのだろうかというと、怪しいものが多い。そういう印象があります。本当に便利だったら見栄えが悪くても使われると思うんです。Googleのテキスト検索が典型的です。でも、いまのビジュアルの方向というのは、ともかくかっこよければいい、影をつけましたとか、光っていますとか、それでかっこよく見えるということの方が、便利さよりも重要になっています。 ──つまり、意
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TechCrunch | Startup and Technology News