npm とか bower とか一体何なんだよ！Javascript 界隈の文脈を理解しよう - Qiita
背景 Javascript で Web アプリを作ろうとすると、よくわからないことだらけで超混乱します。 npm と bower の違いは？ npm はサーバーサイド用、bower はクライアントサイド用らしいよ えっ、でもなんで bower のインストールに npm が必要なの？ サーバーサイドは Rails で書きたいから npm 要らないと思うんだけど・・・ ていうかサーバーサイドJSとか node.js って何？ よく見る browserify って何？ こういった疑問が沸き上がるのは、各ツールが生まれた文脈がよくわかっていないからです。いろいろ調べてやっとちょっとわかってきたのでメモします。間違いがあったらご指摘ください。 「CommonJS」誕生 - Javascript は汎用プログラミング言語へ その昔、Javascript 大好きおじさんは言いました。 Javascrip
node.js/expressでユーザ認証with JWT - Qiita
はじめに node + expressで以下のようなことをしてみます mongoDBに保存しているname/passでユーザ認証 認証OKならJWT形式のtokenを発行して返却 JWTトークンを使って認証要のAPIにアクセス これらをform認証でなく、CUrl等を利用してできるようにします。 このサイトにしたがって実施してみます 必要なもの node npm POSTman(api検証用のchrome extention) mongoDB サーバに実装するもの secureとsecure外のURL nameとpasswordによるユーザ認証 認証後にtokenを返却 ユーザは取得したtokenを保存、全リクエストに付与 tokenを検証、OKであればJSONで情報を返却 mongoDBのインストール(mac) # install brew install mongodb # mongo
Web制作のクオリティを飛躍的に高めるJavaScriptライブラリ10選を一挙公開！ - paiza times
どうも、まさとらん（@0310lan）です。 みなさんは、「JavaScriptライブラリ」を活用しているでしょうか？ Webサイト制作はもちろんのこと、さまざまなWebアプリやサービスなどを開発する時に、大幅な時間短縮やクオリティを飛躍的にアップすることが出来るようになります。 そこで今回は、国内外で人気が高くて誰でも簡単に扱える「JavaScriptライブラリ」を厳選してご紹介しようと思います！ ■多機能な「写真ギャラリー」を組み込めるライブラリ！ ◆1.Viewer.js 複数の画像を表示する際に、オシャレな「ギャラリー風」に変換してくれるライブラリです。 類似のライブラリはいくつか存在しますが、「Viewer.js」は使い方が非常にシンプルで扱いやすいのに、多機能性も備えているスグレモノとなっています。 基本的な使い方としては、HTMLファイルに表示させたい画像を「リスト要素」で指
ServiceWorkerとCache APIを使ってオフラインでも動くWebアプリを作る - Qiita
はじめに Thetaの360°画像にぼかしを入れるWebアプリSphereBlur.comを作った際に、オフラインでも動くようにするために、HTML5の新しい技術Service Workerを使った。なお、下の動画でホーム画面からネイティブアプリっぽく起動しているのはWeb App Manifestのおかげである。 Service Worker Service Workerは、通常のページの環境とは別に、バックグラウンドで実行されるJavaScript実行環境で、ページからのネットワークリクエストを横取りしたり、ウェブサイトからのPush通知を受けとって表示するといった、今まではできなかった処理をすることができる。Push通知の方は、去年Facebookが使い始めたので有名になったが、今回はPush通知ではなく、ネットワークリクエストを横取りする機能を使ってオフライン対応をした。 ネットワ
CreateJS入門サイト - ICS MEDIA
このサイトはHTML5 Canvasのフレームワーク「CreateJS」の入門サイトです。初学者から学べるように基本的なCreateJSの使い方から解説しつつ、発展的な内容までまとめています。このサイトを通して、webでのインタラクションデザインについて学んでいきましょう。 導入編 webのリッチコンテンツを作るためのフレームワーク「CreateJS」。どのような場面で利用されるのか、どういった表現が可能なのかという点を中心に、概要と導入方法を説明します。 CreateJS とは CraeteJS の事例 簡単なサンプルを試そう ブラウザの開発ツールの使い方を抑えよう CDNのURL 次のコードをHTMLファイルに記述することでCreateJSが利用可能になります。 <script src="https://code.createjs.com/1.0.0/createjs.min.js">
SoundJSを使って音を見えるものへ―CreateJS勉強会 - ICS MEDIA
ウェブ技術でサウンドを扱える技術「Web Audio API」。表現系の技術として、JavaScriptを使うことで、音に連動したビジュアライゼーションを作成できます。本記事では、Web Audio APIを使ったサウンドビジュアライザーの作り方を解説します。 まずは以下の2つのデモをご覧ください。 2Dデモ 別タブで再生する ソースコードを確認する 1つ目は2D版のデモです。Web Audio APIでフーリエ変換を行い、divタグのスタイルでビジュアライゼーションを作成しています。CSSのFlexboxを利用して水平方向にdivを並べています。コードがシンプルなので、Web Audio APIの使い方を理解したい方は参考にしてみてください。 3Dデモ 別タブで再生する ソースコードを確認する もう1つは、3D版のデモです。サウンドの解析部分をWeb Audio APIで行い、ビジュアラ
PreloadJSで「悩ませないローディング」の作り方―CreateJS勉強会 - ICS MEDIA
先日行われたCreateJS勉強会 (第5回)にてPreloadJSで「悩ませないローディング」の作り方というテーマでライトニングトークさせていただきました。時間の関係でお伝えできなかった部分も含め本記事でまとめました。みなさまのローディング作りのご参考になれば幸いです。 PreloadJSとは？ PreloadJSとは、CreateJSのライブラリモジュールの1つで外部ファイル（画像・音声・JSONなど）の読み込み処理を担当しています。読み込み状況をイベントで監視して読み込み率（0.0〜1.0）を取得できます。その読み込み率を演出用のJavaScriptに渡してあげることで、読み込み状況に合わせた演出を実現できます。 ソースコード PreloadJSで外部ファイルを読み込むソースコードです。今回はLoadQueueクラスを使って拡張子の違うファイルをまとめて読み込んでいますが、同じ勉強会
HTML5 CanvasとWebGLの使い分け―CreateJS勉強会/池田発表資料 (前編) ― ICS LAB
2015年2月10日（火）、アドビシステムズ株式会社でCreateJS勉強会 (第5回)が開催され30名を超える方々が来場されました。勉強会のフォローアップとして、発表資料「CreateJSで制作するスペシャルコンテンツ」のスライドをブログ記事という形で公開します。本記事では口頭で発表した内容もできる限り記載しました。 なお、前編（CanvasとWebGLの比較）と後編(WebGLの最適化)の二部構成にしています。前編となる本記事ではスペシャルコンテンツ制作にあたり調査したHTML CanvasとWebGLの双方の利点・欠点をまとめています。 HTML CanvasとWebGL 今回のテーマは「HTML CanvasとWebGLの使い分け」です。皆さんもご存知の通り、HTML5のCanvas要素 (JavaScript ではCanvasRenderingContext2Dオブジェクト）は従
HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う 記事一覧 | gihyo.jp
運営元のロゴ Copyright © 2007-2024 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。
canvasを画像に変換する-HTML5編
HOME JavaScript入門[HTML5編] canvasを画像に変換する ここでは、canvasに描いた図形や文字を、画像に変換する方法を見ていきます。 画像に変換すれば、右クリックで保存したり、他の画像と入換えしたりすることができるようになります。 canvasデータを画像に変換する canvasで描画したデータを画像に変換するには、toDataURL()を使います。 canvas.toDataURL(画像形式) キャンバス内のデータをdata:形式に変換します。 画像形式はimgage/png，image/jpeg，image/svg+xmlの何れかを指定します。 省略した場合はPNG形式になります。 toDataURL()の前は、contextではなくcanvasである点注意して下さい。 画像変換サンプル 以下のサンプルでは、canvasにラインを９列、ランダムな色で描いてい
【HTML】初期開発コーディングテンプレートと CSS コーディング規約
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>タイトル | サイト名</title> <meta name="description" content="ディスクリプション" /> <meta property="og:type" content="website" /> <meta property="og:title" content="タイトル" /> <meta property="og:image" content="/img/icon.png" /> <meta property="og:url" content="http://example.net/" /> <me
ogv.jsがすごい
[ダウンロード] ogv.js, ビルド済みデータ [デモ] ogv.js demo JavaScriptでOgg VorbisとかWebMとかをデコードするライブラリ Emscriptenを使って、Cのライブラリ(liboggzとかlibtheoraとか)をJavaScriptのコードにコンパイルしてる videoタグとか使わずにcanvasで再生する Web Audio APIを使用。IEは対応していないのでdynamicaudio.swfを使うらしい コントローラは今のところ付いてない(自前で実装可能、デモでは実装済み) 最適化とか目下対応中で、2015-09-04にinitial stable release Long-form goal is to create a drop-in replacement for the HTML5 video and audio tags wh
WEB ブラウザで起きた JavaScript のエラーをサーバに送りたい - BattleProgrammerShibata
本記事は1分で実現できる有用な技術 Advent Calendar 2015の4日目の記事です。 WEB アプリケーションを開発していると「ユーザのブラウザで起きたエラーをサーバに送って DB に収集したい」という要望が出てきたり、外部からお願いされたりすることがあります。 こういう場面で、「どうやればいいのん」と悩む方は少なくないようです。 このような場合にはイベントハンドラの onerror を利用すると便利です。 エラーハンドリングしたい対象のコードより先に呼ばれる位置で、次のようなコードをぺいっと貼っ付けておきましょう。 そうそう、try-catch している場合には onerror に引っかからないので、そういった場合には個別に呼び出してください。 window.onerror = function(errorMsg, fileName, lineNumber) { var er
Googleも推奨！アニメーションライブラリTweenMaxの使い方 入門編 — un-Tech
ごきげんよう。フーミンです。 「JavaScriptでアニメーション作るならTweenMaxが最強だよ」と先輩から教わり早2年。いまだ現役最強（僕の中で）JavaScriptアニメーションライブラリTweenMaxの良さを広めるために、入門編・応用編の全2回に分けてご紹介しようと思います。 TweenMaxとは TweenMaxとは、GreenSock社が開発した超高性能アニメーションプラットフォーム「GSAP」のひとつで、DOMアニメーションに特化したJavaScriptライブラリです。 requestAnimationFrameを使用しているため、jQueryのanimateメソッドを使うより、動作が高速かつ安定しています。 同じようなライブラリにmokichiくんが紹介してくれたVelocity.jsというのもあります。 TweenMaxと同様に動作が高速かつ安定しており、jQuer
D3.js を使ってみる - Qiita
まずはじめに、データ可視化は真の目的ではありません。手段です。 Vitaly Friedman の有名な言葉で、データ可視化の大目的は明瞭かつ効果的に情報とコミュニケーションができるように、データを視覚化できる能力そのものである (The main goal of data visualization is its ability to visualize data, communicating infomation clearly and effectivelty.) というものがあります。 情報を視覚的に伝える 明確に情報を伝える 効果的に情報を伝える こういったことがデータ可視化の要件かと思います。 とくに、何のための可視化なのかという大目的を見失ってはいけません。 この辺の話は以下の「データ可視化勉強会」のスライドがとても素晴らしいのであわせて参照すると良いでしょう。 http:
Vue.js概要？ - Qiita
Vue.js とは 原作者である Evan You氏 が中心となって開発中のクライアント サイドJavaScirpt(JS)フレームワークです。 MVC の派生種である、GUIライブラリに適した MVVM を設計基盤と して採用し、構築されています。 MVVM を採用していること が、構文の理解しやすさに繋がって います。 MVVM を採用したフレームワークでは、表示そのものであるView、 表示するデータ 及び データを操作する手続き をひとまとめにした View Model(VM)、が舞台上の役者です、それらを管理する コントローラ(Controller)は、存在するものの、黒子のような 存在で、ユーザからは隠蔽されているため、コードを書く際に 意識する必要はありません。 公式サイトで Vue.js の特徴は Approachable、Performant、Versatile という３
Vue.js入門
7. リアクティブ・プログラミング Reactive＝反応的な データの変更がそのままViewにすぐ同期される 普通：data = 1; view.setData(data); リアクティブ：data = 1; // この時点でviewにはもう反映 されている ビジネスロジックが、ModelとViewの対応を知らなくて も良い 10. 1.0での変更点 新記法v-foo:barの追加 NG : <div v-on="click: doThis, keyup: doThat"> OK : <div v-on:click="doThis" v- on:keyup="doThat"> Mustache記法がVue.jsのプロパテイ下で使えなくなった NG : <component is="{{view}}"></component> OK : <component v-bind:is="view
人気上昇中のJavaScriptライブラリを調べてみた【2015年版】
altJSの人気が混戦で面白い！ 2014年中に人気が急上昇してきており、「2015年では必須の知識」となりそうなJavaScriptライブラリをランキング形式で発表。 ← 前回 連載 INDEX 次回 → こちらのページで【2016年版】も発表！ ■ 2015年が始まり、心機一転で「今年こそはWeb開発を頑張ろう」と思っている人も少なくないだろう。そんな方々に向けて本稿では、2014年中に人気が急上昇してきており、「2015年では必須の知識」となりそうなJavaScriptライブラリをランキング形式で発表する（※昨年の2014年版はこちら）。 なお、本稿のランキング決定では、検索キーワードの流行を調査可能な「Googleトレンド」（「すべての国」「過去 12 か月間」「すべてのカテゴリ」「ウェブ検索」という条件で絞り込み）を使って、ライブラリの人気をジャンルごとに比較した（※ライブラリ名
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.js資料まとめ（古いので注意）
http://deerest.co/2015/05/12/angular-template/
