TouchstoneJS – Creating Your Visual Interaction People have the habit of checking their smartphones every few minutes, but they rarely think about how the app interface is made. Software-developing specialists utilize a variety of programming tools for the applications themselves, however, when it comes to making that part of the application that users interact with, developers use UI (user interf

画像などを遅延読み込みをするlazyloaderが久々に必要になってナウいやつを探してたら見つけた。 the ultimate and lightweigth lazyLoaderだそうです。つよそう。 軽く使って良さそうなのにあまり記事がなかったので個人的まとめ。 良いとこ ピュアな実装でjqueryなどフレームワークに依存していない jquery.lazyloadあたり使いたいけどjqueryを入れねば、みたいな問題がない。 レスポンシブ対応などが豊富 プラガブルな実装 画像以外にもスクリプトやiframeにも対応しているよう Star数:2625（2014/12/27時点）。 作者はhtml5shivなどの作者らしい https://github.com/aFarkas 悪いとこ initial commitが3ヶ月前(2014/10）でまだまだ枯れてない バージョンは0.6。まだベ

任天堂・岩田氏をゲストに送る「ゲーマーはもっと経営者を目指すべき！」最終回――経営とは「コトとヒト」の両方について考える「最適化ゲーム」 編集部：TAITAI カメラマン：佐々木秀二 12345→ 連載第20回めとなる，ドワンゴ・川上量生氏との対談企画「ゲーマーはもっと経営者を目指すべき！」。最終回となる今回の“ラスボス”的ゲストは，日本――いや，おそらくは世界最強の“ゲーマー経営者”である任天堂の岩田 聡氏です。 コンピューターオタクだった学生時代を経てゲーム開発者になり，現在は，任天堂の取締役社長を務める岩田氏。昨今は，「Nintendo Direct」や「社長が訊く」でもお馴染みの岩田氏は，実際にはどんな人物で，どんなことを考えているのでしょうか？　読者にもおなじみの，任天堂社長としての岩田氏だけではなく，プログラマーとして，ゲーマーとして，あるいは一人の人間として――さまざまな角度

はじめに こんにちは、モバイルファースト室の@y_310です。 部署名からもお分かりの通りクックパッドでは今年からスマートフォンアプリの開発に特に力を入れて取り組んできました。 実際に昨年と比べて開発体制が大きく変化しています。以前はアプリ開発専門のエンジニアのみで開発していたものを、サーバサイドエンジニアもアプリ開発を学び、自分が所属する部署に必要な機能をアプリに実装するようになりました。 そのため、以前は2、3人のチームでの開発だったものが、現在は多い時には複数の部署にまたがって10人ほどのエンジニアが1つのアプリにコミットする状況になりました。 そのような環境の変化によりアプリの品質維持が大きな課題となり、この半年間継続的に品質改善に取り組んできました。今回はその改善プロセスについてご紹介したいと思います。 課題 取り組みを始める前は、様々な部分で課題がありました。 具体例を上げると

Git Advent Calendar / Jun. 最終日(30日目)の記事です．29日目は「いざという時のためのgit reflog」でした． Git Advent Calendar最後なので，git操作でやりがちなミスからどう回復するかをまとめます．他にもあればコメントもらえるとマージしていきます． ブランチを切り忘れてmasterでコミットしてしまった その時点でブランチを切る&reset --hardで間違ったコミットたちをmasterから消す $ git checkout -b new-branch # masterの最新コミットを消す $ git checkout master && git reset --hard HEAD~

Webエンジニアが知っておきたいインフラの基本 インフラの設計から構成、監視、チューニングまで 馬場俊彰 マイナビ出版 2,948円 (2,680円+税) Webサービスを高速化し、可用性を高めるスキルを身につける！ Webエンジニアの仕事の幅を広げるためのインフラの知識をピックアップしてまとめました。インフラまわりの技術の基本から、インフラ基盤の手配の方法、設計のセオリー、システム監視、チューニングまで、ツボを押さえてまとめています。 関連サイト本書の関連ページが用意されています。 Webエンジニアが知っておきたいインフラの基本｜マイナビブックス内容紹介本書は、Webアプリケーションエンジニアや、フロントエンドエンジニアを対象に、知っておくと便利なインフラの知識をまとめた本です。 担当しているWebサービスをもっと高速化させたい方や、バックエンドと最適化された無駄のないアプリケーションを

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

Qualityandstyle Macでは基本的にターミナルを開けばShellでコントロール可能です。 これがあるから使っている！という人も多いかと思います。 Finderをターミナルにドラッグドロップするとパスが表示されたりなど、 CUIとGUIの親和性も非常に高いです。さて個人的に作成した便利なエイリアス達を紹介します。 基本的に~/.bashrcや~/.zshrcなどに下記の行をコピーすれば動く簡単な仕様です。 md [Linux/MacOSX] カレントディレクトリにあるmarkdownファイルを全てvimバッファに載せ開きます。 alias 'md'='vim ./*.md' 複数バッファを同時に開きますが、あまりその動きは想定していません。 現在のGitのプロジェクト等ではMarkdown形式のREADMEファイルなどが必ず置かれていると思います。 そういったディレクトリに移動

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

概要 新刊にかぎらず、今年読んでいて「あー、良書だなー」って思ったものをあげています。これ、ダメじゃないの？とか、あー、やっぱりこれいいよねっていうコメントもらえると嬉しいです。 基本は、.NETにおけるWeb APIやFW開発でQA * POな人が思う良書です。今年は技術書より論文、言語仕様書、実装を読んでいることが多かったので、去年の半分の30冊くらいしか読んでいないかな。 開発チーム系 エッセンシャル スクラム 作者: Kenneth S. Rubin出版社/メーカー: 翔泳社発売日: 2014/08/01メディア: Kindle版この商品を含むブログを見る スクラムなんとなくわかっているんですけど、自分以外の状況よくわからんしなー、進め方変じゃないかなぁっていうときに、読むとめっちゃ参考になります。 組織パターン 作者: James O. Coplien,Neil B. Harri

２０１４年末をもってスポットライトのCTOを退任させていただくことになりました。 ２０１１年の設立から、約３年ちょっと社内外含めいろいろとお世話になりました。今後については未定なのですが、しばらくは社外の技術顧問として残らせていただく予定ですので、今後とも宜しくお願いします。 CTOという役職をやらせていただいたのは今回で２回目、どちらも創業から関わってます。 そして、最近CTO論というやつが流行ってるところもあり、なにやら乗ってみたい感じなのですが、、、概念的なところは、大御所の皆様方がまとめられているのそちらを参考にしていただくとして。。。 実際に、このスポットライトという会社ののCTOが、何をやってきたんだろうというところを振り返ってみたいなと思ってます。 コンテンツとしてはこんな感じで、、 １回目 スマポのはじまりについて リリースまで リリース後１日目でサーバーが落ちた。 はじめ

こんにちは。今日はクリスマスですね(^^) 日本人プログラマにとっては忙しい時期だと思いますが・・・(^^; 注：本記事は都合により最新ではないAngularJS 1.2系をベースとしています。おそらく1.3系でも同様に動作すると思うのですが、未確認です。ごめんなさいm(_ _)m こんな問題ないですか？ 製品がほぼ完成した後に顧客から「これじゃない」と言われる 外部設計書やhtmlモックで確認して貰っていたにも関わらず、クライアント側、サーバー側実装完了した段階で顧客に触ってもらったら「この動きは想定していたのと違う」と言われたり。 イテレーションを短くすればある程度手戻りは防げますが、それでももう少し早い段階でちゃんと確認して欲しいと思う事もあります。 で、プロトタイピング クライアント側をhtml+jsでリッチにしてサーバー側とのやりとりをRESTなどのAPIベースに作ることで、サー

Advent Calendar 20日目のポストです。 ちょうど2.0について書こうと思ってたところに、昨日さらにつっこまれたので取りあげてみます。 で、画像中の記事がこちら この記事について振られたので調べてみた。 元記事をお読み頂きつつ。 #ツールに新たに追加される概念は、1つではなく3つ！ これは2.0になるので知っておこう、なのでそうなりそうです。 ただし、AtScript については Optional な感じで良いと思います。TypeScript + AngularJS な人は知っておくと恩恵があるのではないでしょうか。 #変わるが、良くならない このコードのサンプルだと、記述が変わったなということ位しかわからくて、あまり意味がありません。v2.0 では、Web Conponents や以前から統合するといっていたPolymer との連携を考慮すると、従来通りの Attribut

2014-12-25 React.jsを触った感想 Javascript React.js Virtual DOM クライアントサイドJS ここ二週間ほどReact.jsを触っていて、業務でも今の案件で使うことにしたので、簡単な紹介と、触ってみた感想。 React.jsについて A JavaScript library for building user interfaces | React React.jsは、Facebook製のクライアントサイドJSフレームワーク。 Angular.jsなどの並べられがちだけど、ああいう俗にいう「MV*」でフルスタックなものとは違って、View層に特化している。 3つの特徴 UIに特化 ここでいうUIとは、UI部品のことで、つまりは複数のDOMを内包する1つの部分的なDOMツリーのこと。これをReactではComponentと呼んでいる。 このComp

JavaScriptの参照に関する記事でよく、オブジェクトは共有渡しで、プリミティブ値は値渡しと書かれていますが、仕様書をみても当該の記述を見つけられません。 仕様書を読む限り区別がない、つまり全てが値渡しの様に見えてしまいます。 もしくはReference型にbaseとして格納されているのは値を構成するデータ配列ではなく、値の存在そのもの、つまり参照（ポインタ）に近い概念であって、結局実は全部が共有渡しということなのでしょうか？ 例えばProperty Accessorsの仕様で 「Return a value of type Reference whose base value is bv」 というのは、作成されるReferenceのbaseにbvそのものを格納する→bvをデータとして複製して格納ではなく、その存在そのものを格納→実際は参照（ポインタ）に当たるものが格納されるイメージ、

こんにちは、おじいちゃんです。 今回は、画像からカラー情報を抽出する方法について書いてみたいと思います。 rgbaster.jsを用いた画像の色を抽出 まずは下記URLからrgbaster.jsをダウンロードします。 rgbaster.js https://github.com/briangonzalez/rgbaster.js/tree/master ダウンロードできたら、rgbaster.jsを読み込みます。 <script src="js/rgbaster.js"></script> サンプリングしたい画像に任意のidをつけてrgbaster.jsで読み込んであげましょう。 <img src="images/sample.jpg" id="sampling" height="600" width="900" alt=""> 次にRGBastarのcolorsメソッドに、第1引数でサン

Sheetsee.jsはGoogleスプレッドシートに書いたデータを元に、チャートグラフや地図、table等に変換してWebサイトに埋め込めるスクリプトです。動作にはjQueryが必要みたい。基本的にはコア必須でチャートはsheetsee-chartsを、地図ならsheetsee-mapsを、といった具合でそれぞれモジュールを別途読み込む形のようです。この手のは使い慣れておくといろいろ捗りますね。ライセンスはBSDとの事です。 Sheetsee.js

メリークリスマス！ いよいよ最終日です！ ここまでReact.jsについて紹介してきましたが少しでも参考になって使ってみようと思ってもらえると幸いです。 React.jsはfacebook、instagramやGitHubのAtomEditorもちろん、↓を見てもらえればわかる通り「AirBnB」、「Atlassian」、「Netflix」、「Reddit」、「The New York Times」、「Yahoo」など多くのところで使われているようです。 また、来年の1月後半にはReact.js Confがあるので色々な知見が出てますます盛り上がっていくと思うので来年も楽しみです！ React.jsについての情報は、公式のブログでも色々紹介されますし、#reactjsのハッシュタグ追ってると色々情報集めることが出来ます。 このAdvent Calendar読んで興味を持ったら是非↓のリンク

改訂：2014/10/20 備忘録としてまとめていきます。 今まで集めていた情報まとめていきます。 すでに読んだやつも今これから読んでこうってやつもまとめにまとめちゃいまっせ。 アウトプットも大事だけど、自分より先輩の方がアウトプットし続けて頑張って得た知見をあっという間にインプットできる"本"という形での学習も超大事なのです。 エンジニアとしての心得みたいな本 ハッカーと画家 コンピュータ時代の創造者たち 作者: ポールグレアム,Paul Graham,川合史朗出版社/メーカー: オーム社発売日: 2005/01メディア: 単行本購入: 109人 クリック: 4,884回この商品を含むブログ (594件) を見る YCombinatorの共同設立者の彼の本。 CODE COMPLETE 第2版 上 作者: スティーブマコネル,Steve McConnell,クイープ出版社/メーカー: 日

PHPでスクリプト挿入攻撃やXSS対策として、サイタイズのためにhtmlspecialchars()を使うことがあると思いますが、使用する際の詳細が気になったので質問します。具体的には以下の２点です： サニタイズ関数を適用するタイミングについて 【ユーザからの入力時】【HTMLへの出力時】【その中間】の３パターンが考えられますが、ベストなのはどれでしょうか？GET・POSTパラメータの処理と、その出力がほぼ同時に行われる場合では違いが顕在化しませんが、そうでないより一般的な場合に注意する点が知りたいです。 『パーフェクトPHP』330・334頁によると「出力時にエスケープ」とだけ書いてありますが、それに関連する詳細の記述やサンプルコードがないため背景知識があってそうなるのか、それとも単なる著者の思いつきなのか判断できません。 【ユーザからの入力時】にサニタイズしてしまうと、HTML出力以外

It is to introduce the development process using the yeoman, in particular, angular. I am writing at the discretion of its own relationship of angular and Web components in the second half.

先取り、Shadow DOM 第1回 Shadow DOMが生まれた理由 このシリーズではShadow DOMのコンセプトから実装例まで解説します。第1回目は、なぜShadow DOMという考え方が必要になってきたのか？という背景と、Shadow DOMの概念を解説します。 はじめに Shadow DOMとは、複雑化していくWebアプリケーション開発への取り組みを助けるためにGoogleから提案されているWeb Componentsと呼ばれる一連のコンセプトに繋がる仕様の一つです。 この記事を書いている2012年9月現在、まだW3C草案として公開されている段階であるため、随時更新されるか、他の仕様に置き換えられてしまうこともあるかもしれません。ですが、とても興味深い仕組みなので、現時点での情報を元に、ここで紹介をしてみたいと思います。 現状の問題点 Shadow DOMの概念をあれこれ説明

こんにちは、らこです。先日から話題になってるJavaScriptの形態素解析器kuromoji.jsを使って、確率自由文脈文法で構文解析してみました。(注意:アルゴリズムの解説記事 ではない です) 結論 kuromoji.js遊びまくれるのでみんな使おう kuromoji.d.ts書いた 私は型大好き人間なのでTypeScript使ってkuromoji.js使いました。型定義ファイルは自分が使う部分だけエイヤっと自作しました(laco0416/kuromoji.d.ts)。 あと、プロジェクトに↑の自作型定義ファイルを読み込むのにdtsm使いました。tsd使ってたのが馬鹿らしくなるくらい便利です。作者のvvakameさんによるわかりやすい紹介はこちら 確率自由文脈文法とは ちゃんと説明すると長くなりますしうまく説明できる自信もないので、ばっさりカットします。 雰囲気つかむにはここらへんを