jq コマンドとは http://stedolan.github.io/jq/ JSONから簡単に値を抜き出したり、集計したり、整形して表示したりできるJSON用のgrepとかawkみたいなコマンドです。 WebサービスがJSONを吐いたり、AWS CLIが JSON を吐いたりする現代社会で大変便利なコマンドです。 マニュアル だいたいここ読めばOK. http://stedolan.github.io/jq/manual/ あ、これで、終わってしまう。だけど気にせず進めます。 簡単な例 まず、空気をつかみましょう。 以下jqコマンドの記法を見ていきます。JSON { "hoge": "value" } があった場合、 . がルート {} を表します。.hoge で "value" を表現します。だいたいこんな感じです。 ただの整形 しばらく下記のJSONを例に進めます。itemsには配

任意のベクトルの方向にオブジェクトを向ける こちらの記事を参考にしました 例えば、キャラクターを坂に載せるとき、 頭の方向をその斜面に垂直にしたい、みたいなときがあると思います。 そうしたときに使えるテクニック。 というか、とあるベクトルと平行になるように回転させる、という目的にも使えます。 (function (win, doc) { var SCREEN_WIDTH = window.innerWidth; var SCREEN_HEIGHT= window.innerHeight; var camera, scene, renderer; var logEl; var mesh; var normal = null; function log(mes) { logEl.innerHTML = mes; } /* * 初期化 */ var init = function() { { /

みなさんは普段JavaScriptを使って開発する場合、インデントはどのようにしていますか？ タブ、スペース2個、スペース4個・・・などいくつかの選択肢があります。 個人で開発している方は問題ありませんが、チームで開発している場合は意見が分かれ議論になることもあるでしょう。プロジェクト開始早々インデント論争でチーム内の雰囲気を悪くしたくはありません。 本記事はそんなインデント論争の1つの解決策となるべく、ブラウザベンダーやプロダクトで定めているJavaScriptコーディングのインデントルールを調べてみました。 この記事のポイント* 海外のJS界隈ではスペース2個のインデントが多数派 ESLINTなどの設定ファイルからコーディングルールを調べられる なぜインデント論争が起こるのか？ そもそもなぜインデント論争が起こってしまうのでしょうか？　それはそれぞれ一長一短のため好みが分かれてしまうか

attribute vec3 position; attribute vec3 tex; uniform mat4 projectionMatrix; uniform mat4 modelViewMatrix; varying vec3 texOut; void main(void) { gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1); texOut = tex; } precision highp float; // Modified Blum Blum Shub pseudo-random number generator. //// ランダム数値生成器？ vec2 mBBS(vec2 val, float modulus) { val = mod(val, modulus); // For nu

JavaScriptとCSSへの興味から大学院を中退してWebの世界に飛び込む。大手デジタルコンテンツベンダーにてHTML、CSS、JavaScriptなどフロントエンド全般の担当として、主にスマートフォン向けゲームの開発に従事。2014年1月にフロントエンド・エンジニアとして株式会社ピクセルグリッドへ入社。スマートフォンサイトの実装を得意とする。2019年、退社。 また、在学中からhtml5jのスタッフとして、さまざまな技術系勉強会の運営に関わり、HTML5 Experts.jpのコントリビューターもつとめる。

全角英数の文字コードから65248個前が半角英数の文字コード。 半角英数の文字コードから65248個後が全角英数の文字コード。 // 半角にしたい str.replace(/[Ａ-Ｚａ-ｚ０-９]/g, function(s) { return String.fromCharCode(s.charCodeAt(0) - 65248); }); // 全角にしたい str.replace(/[A-Za-z0-9]/g, function(s) { return String.fromCharCode(s.charCodeAt(0) + 65248); }); 65248の部分は16進数で表される事が多い。 // 半角にしたい str.replace(/[Ａ-Ｚａ-ｚ０-９]/g, function(s) { return String.fromCharCode(s.charCodeAt(0)

郵便番号が2エリア、住所が2エリアの場合（プルダウンメニュー） ※ 都道府県のプルダウンは都道府県名または都道府県番号（都道府県コード）対応しています。 <form action="./" method="post"> 〒 <input type="text" name="zip1"> - <input type="text" name="zip2" onKeyUp="AjaxZip3.zip2addr('zip1','zip2','address1','address2');"> 都道府県 <select name="address1"> <option value="">-- 選択してください --</option> <option value="北海道">北海道</option> <option value="青森県">青森県</option> <option value="岩手県"

2015年に開催したCreateJS勉強会（第6回）でのライトニングトーク「オーディオスプライトを使った音声ファイルの最適化」の発表内容を記事としてまとめました。音声を扱ったHTML5コンテンツにおけるCreateJSの最新機能「オーディオスプライト」の必要性と使い方を本記事で紹介します。 ウェブページではファイルの読み込み数を減らすことが必要 ウェブページを見る時や作る時、そのページでどのくらいのファイルがダウンロードされているかを気にしていますか？　CSS・JavaScript・画像・音声ファイル等、ウェブページでは必要なファイルが多くなりがちです。ファイル数が多いとファイルをダウンロードする時間が増え、その分だけページの表示速度が遅くなります。ページの表示速度が遅くなると、その分だけユーザーの離脱率が上がります。 Amazonはページの反応が0.1秒遅くなると、売り上げが1%ダウンす

iPhoneやAndroidで音声を再生しようとするとき、ブラウザの仕様上の制約から色々と壁にぶちあたります。 壁たち ユーザのアクションでしかロードできない 同時に一つの音しかならせない ※iOS6のSafariとAndroidの一部機種のChromeでは同時に2つ再生できる) ファイルを最後まで読み込んでくれない 発生するイベントがOSやブラウザによってバラバラ 再生できるコーデックがバラバラ 他にも細かい制約やブラウザごとの仕様の違いでオーディオの扱いは相当な苦労を強いられます。 参考: iPhoneでHTML5のaudio要素を使うときに気をつけたいこと iOS における HTML5 の audio 要素に関する制約を克服する 地獄のvideo／audio要素 iOS/Android で HTML5 の audio/video を任意のタイミングで再生する方法 単純な再生なら「Au

ちょっと趣向を変えてJavaScriptの情報をどうやって集めているかという話を書きたいと思います。 使っているもの Twitter RSS(feedly) Pocket はてブ TwitterはただフォローしてTL見ていたり検索してたまに見ているだけでリストを作ったりはしてなくて暇な時に見ている感じです。 RSSはこれから紹介するようなサイトとかこの人のブログ面白い！というものだけを登録しています。未読が100件増えると消化する気がどんどんなくなっていくので...。 PocketはTwitter、RSSで気になったものを後で読むためにとりあえず突っ込むのに使っています。 こうすることでRSSはすぐに終わるので、その後で時間があればPocketで読みます。 Pocketに溜まった記事はちょっとした合間に読んだりしていて、たまにまとめて読んだりして消化しています。 今見ると20件くらいあるの

README.md Airbnb JavaScript Style Guide() { A mostly reasonable approach to JavaScript For our old ES5-only guide click here. Table of Contents Types References Objects Arrays Destructuring Strings Functions Arrow Functions Constructors Modules Iterators and Generators Properties Variables Hoisting Comparison Operators & Equality Blocks Comments Whitespace Commas Semicolons Type Casting & Coercion

何番煎じかわからないけど、gulpを使ってみたら中々良かったのでまとめてみます。 gulp.jsとは gulp.js はフロントエンド用のタスクランナーってやつです。 同じタスクランナーの競合に Grunt がありますが、後発だけあってストリームを駆使して可読性の良い設定ファイルが書けます。 Gruntでできることは大体gulpでもできるので、どちらを使ったら良いかは好みの問題かも知れません。 この記事ではsassのコンパイルをするタスクと、関連してベンダープレフィックスを自動で付与するところまで紹介します。 gulpのインストール npmコマンドでサクッと入れます。 $ npm install -g gulp これでgulpコマンドが使えるようになりました。 gulpでsassのコンパイルをする gulpでsassをコンパイルするのに、こちらのプラグインを使います。 gulp-ruby-

gulpのAPIマニュアルにも書かれていますが、gulpでは、gulp.destを書いたからと言って、そこで終わりにする必要はありません。 注: 下記、CoffeeScriptで書いてますが、gulpの標準はJavaScriptです。適宜読み替えてください。 例: 複数ディレクトリに出力する 例えば、こんな風に書けば、3つのディレクトリにテキストファイルをコピーできます。 gulp = require 'gulp' gulp.task 'multi-dist', -> gulp.src ['./src/*.txt'] .pipe gulp.dest './dist1/' # 1つ目のdest .pipe gulp.dest './dist2/' # 2つ目のdest .pipe gulp.dest './dist3/' # 3つ目のdest

gulp.task('copy', function() { // ファイルをコピー gulp.src('src/file').pipe(gulp.dest('dest')); }); // copyに依存するタスク gulp.task('done', ['copy'], function() { // ファイルコピー完了「前」に実行される！！ console.log("copy done"); }); gulpが高速に動作する理由の一つはこの非同期性ですが、どうしても同期的に処理したい場合（すなわち特定のタスクの完了を待ってから別なタスクを実行したい場合）もあると思います。 この記事では同期的にタスクを実行する方法として、gulp API docsに記載されているもの、そしてその発展形を紹介します。 タスク内の非同期処理が一つだけの場合 Streamをreturnする まずは1番お手軽な

JavaScriptチュートリアルBeginner's tutorialsYour first website: Adding interactivityDynamic scripting with JavaScriptJavaScript frameworks and librariesJavaScript ガイド入門編文法とデータ型制御フローとエラー処理ループとイテレーター関数式と演算子Numbers and stringsRepresenting dates & times正規表現インデックス付きコレクションキー付きコレクションオブジェクトを利用するクラスの使用プロミスの使用JavaScript 型付き配列イテレーターとジェネレーターInternationalizationJavaScript モジュール中級編Advanced JavaScript objectsAsynchrono

var gulp = require('gulp'); var $ = require('gulp-load-plugins')(); var browserSync = require('browser-sync'); var rimraf = require('rimraf'); var runSequence = require('run-sequence'); gulp.task('jshint', function () { return gulp.src('src/scripts/**/*.js') .pipe($.jshint()) .pipe($.jshint.reporter('jshint-stylish')); }); gulp.task('image', function () { return gulp.src('src/images/**/*') .pipe($

React.jsについての基本的なところを書いていきます！ 公式読めばわかるようなことが多いですがReact.jsに興味をもつきっかけにでもなれば...。 v0.12.1で確認しています。 こっちは一人で書くように作ったものなので書きたい人はVirtualDOMに書くといいと思います。 (書く人がいなくて1人で書いているわけではない) この記事は古いので下記の更新情報も参考にしてください http://blog.koba04.com/post/2015/03/05/react-js-v013-changes/ http://blog.koba04.com/post/2015/09/22/react-js-v014-changes/ http://blog.koba04.com/post/2016/03/09/react-js-v15-changes/ http://blog.koba04.