Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能
Webアプリのデバッグやチューニングに役立つ、Chrome Developer Toolsの主要機能を、スクリーンキャプチャ中心で簡潔に紹介。2014年10月に最新情報に改訂。 モダンブラウザーの中でGoogle Chromeは最後発ながら、その機能の潤沢さ、便利さ、高速さからシェアを大きく伸ばしている。そして、今やほとんどのブラウザーではWindowsの場合F12キーを押すことで（Macの場合はCommand＋Option＋Iキーで）手軽に各ブラウザー搭載のデベロッパーツールを利用できるが、特にChromeのデベロッパーツールは、非常に機能が豊富なため、利用している人もかなり多い。 本稿では筆者がよく使う機能や、使うと便利な機能を中心に、Chromeのデベロッパーツールについて紹介していく。なお、本書は執筆時点で、最新のChrome 38を使用している。 機能ふかん 残念ながら、Chro
一から始めるJavaScriptユニットテスト - Hatena Developer Blog
この記事は、はてなエンジニアアドベントカレンダー2016の5日目の記事です。 こんにちは、はてなでアプリケーションエンジニアをしている id:shiba_yu36 です。先日、buildersconにおいて、現在所属しているプロジェクトでJavaScriptのユニットテストを導入した知見について、「一から始めるJavaScriptユニットテスト」というタイトルで発表しました。 speakerdeck.com この発表は、実際にJavaScriptのユニットテスト環境を作ってみると非常にハードルが高いと感じたので、そのハードルを少しでも下げられればという思いで、非常にシンプルな例で一から環境を作る例を紹介しました。アジェンダは次のとおりでした。 カクヨムのJS環境 JSのテストツールを整理する 通常の関数のユニットテスト DOM操作する機能のユニットテスト カクヨムのJS環境や、JSのテスト
エフェクト作成入門講座 Three.js編 ゲーム演出に役立つマグマ表現の作り方 - ICS MEDIA
ゲームやビジュアライゼーションのWebコンテンツでは、華やかな3D演出の実装をJavaScriptとWebGLで求められることがあります。この記事のシリーズでは、WebGLのJSライブラリとして有名なThree.jsを利用して、3Dエフェクトの作成手順を解説します。 今回、扱うテーマは「マグマエフェクト」。実は以前、このテーマを3Dエフェクト作成ツールであるEffekseerエフェクシアーで扱ったことがあります（記事「エフェクト作成入門講座 Effekseer編 UVスクロールを使ったマグマエフェクトの作成」)。Effekseerはプログラムを使わないデザインツールなので、今回紹介するThree.jsによるプログラムの作り方とはまったく異なります。ですが、表現のエッセンスはどんな作り方でも共通。エフェクトの実装ポイントが理解できていれば、異なった方法でも同じ表現を実装できるのです。 本記事
JavaScript の難しさとは何か - mizchi's blog
JSの学習コスト高いかという問題、言語のコア自体はシンプルだが細かい == とかのハマりどころが多いのと、言語機能自体がシンプルすぎてエコシステムを理解してモジュールを扱うところに辿り着くのが大変、という問題に分類できる— 現場の声 (@mizchi) 2016年8月15日 jQueryの学習コストは、DOMはツリーなんだよという概念の獲得と DOM API の抽象サブセットを覚えるというだけで、2016年現在は jQueryによるUI設計論(ここが高まるとBackboneとかその辺)みたいなものに手を出す必要がないなら、そんなでもないんだろうな— 現場の声 (@mizchi) 2016年8月15日 Reactが難しいと言われる場合、仮想DOMという概念がやや難しい、というか非常にCS的なアルゴリズムとデータ構造が背景にあって、その上で単純なトップレベルAPIとアルゴリズムを理解してないと
Re: React.js界隈の人に聞きたい - mizchi's blog
React.js界隈の人に聞きたい 前提 Reactより前に僕がやりたかったこととして、冪等性の担保の為に毎フレーム document.body.innerHTML を書き換えたかったがパフォーマンス的にそれが許されなかったが、Reactは擬似的にそれを達成させてくれたという圧倒的感謝🙏がある— ダイナモポグラマ (@mizchi) 2016年5月23日 SPA 世の中にSPAの需要があるのか？という点考えていたけど、需要がないからSPA技術がいらない、というのはたぶん間違ってて、SPA技術を持たない人が多いからその発想もなく、SPAで達成できることがイメージ出来ないのがアプリケーション設計の縛りになっている、という感じな気がする— ダイナモポグラマ (@mizchi) 2016年5月23日 GmailやTrelloやPivotalやグラブルは異常な技術の集大成ではなく、個別に分解可能な
古くて新しいリアクティブプログラミングのすすめ-Frontrend Conference
古くて新しいリアクティブプログラミングのすすめ-Frontrend Conference 佐藤歩（株式会社サイバーエージェント） 本記事では、2015/2/21に行われた「Frontrend Conference」のJSトラックセッション「Reactive Programming in JavaScript」から抜粋した内容を紹介します。 「リアクティブプログラミング」（以下、RP）という言葉を、みなさんはご存じでしょうか。RPは、オブジェクト指向プログラミングや関数型プログラミングと同様に、プログラミングパラダイムのひとつです。このRPというパラダイムを、近年のWebフロントエンドの風潮になぞらえて見ていきます。 リアクティブプログラミングという考え方 RPは「イベントや変化する値の関係性」に注目し、これを簡潔に記述することで相互作用を上手に扱おうとするプログラミングパラダイムです。 こ
ドキュメント | Knockout.js 日本語ドキュメント
Knockoutの機能とメリット Knockout は リッチでレスポンシブなUIデザインの開発を助け、比較的大規模な開発であっても簡潔なデータモデルを保つことができる JavaScript ライブラリです。 ユーザの操作による状況の変化や、外部データソースの変更などにより動的に変更されるUIを作る際に、Knockout はよりシンプルかつ保守しやすいように実装する手助けとなります。 主な特徴: エレガントな依存トラッキング - データモデルが変更される度に、UIの関連付けられた部分を更新します。 宣言型 バインディング - データモデルとUIを関連付ける、シンプルで明確な方法です。複雑な動的UIも、バインディング・コンテキストを階層化させることで簡単に作成できます。 拡張が容易 - 新たなバインディングの仕組みを実装することも、最小限のコード量で実現できます。 その他のメリッ
歌舞伎座.tech#6「VirtualDOMとReact」 アウトラインメモ
歌舞伎座.tech#6「VirtualDOMとReact」 - connpass に参加して来たのでメモ。 すべてのCSSに死を！これはJSerの叫び！- @kyo_ago スライド: CSSに死を！これはJSerの叫び！ #kbkz_tech CSSが辛い CSSはカプセル化とか継承とか、プログラムからの概念がそのまま持ってこれない ReactStyle js-next/react-style JS内にStyleを埋め込むことができる そのままオブジェクト的に入れられる Template Stringsと合わせればその場でCSSを入れることができる styles=にスタイルを入れる セレクタをあまり考えなくていい style属性でスタイリングする 擬似要素、擬似クラスが全滅 :hover :active などが使えない。 CSSの継承などの概念が消える 自分で頑張る必要がある ユーザプレ
Tuneup JS+Travis CIによるiPhoneアプリ自動UIテストまとめ - 5.1さらうどん
最近、iPhoneアプリの開発に自動UIテストを取り入れてみたので、手に入れた知見を共有してみたいと思います。 この記事について iOSアプリケーションの自動UIテストを行うためのノウハウについて解説します。 この記事におけるUI自動テストとはiOSシミュレーターや実機を自動で起動し、予め記述していたとおりに操作させ、アプリケーションが問題なく動いているかどうかをテストする手法のことです。 今回はTuneup JSと呼ばれるライブラリを用いて、アプリの自動再生、要素のチェック、画像比較によるテストを行い、最終的にTravis CI上で動かすところまでを書いています。 iOS開発の知識のほか、JavaScript, Rubyを知っていると良いかも知れません。 ここで紹介するもののいくつかはRuby製であり、RubyGems, Bundler, Rakeなど、最低限のユーティリティが動く・使え
JavaScriptのテストを開発工数に入れてもらうには？
2013年4月27日、六本木ヒルズ森タワーのグーグルにて「第38回HTML5とか勉強会」が開催された。HTML5とか勉強会とは、HTML5に関心のあるエンジニアやWebデザイナ向けの勉強会だ。今回のテーマはJavaScriptのテストフレームワーク。別室のサテライト会場を用意しなくてはならないほど会場は多くの参加者であふれた。テーマへの関心の高さがうかがわれる。テストフレームワークを使いこなす現場のプロたちの解説により、その最新事情と基本的な使い方が分かった。 JavaScriptテストの必要性と最新事情 サイボウズの佐藤鉄平氏は、JavaScriptのテストの基礎知識と全体像について語った。 公開スライド 佐藤氏は、結合テストやユニット（単体）テスト、そのほかにユーザビリティテストなど、そもそもテストにはどんな種類があるのかを解説した後、ユニットテストの重要性を強調した。技術面で開発チー
[JS]iOS向けのページ制作に役立つ便利機能がたくさん詰まったスクリプト -iOS.js
iPhone, iPadなどのiOS向けのページを制作するのに役立つCSSやJavaScriptの便利機能をたくさん備えたスクリプトを紹介します。 iOS.js [ad#ad-2] iOS.jsの特徴 iOS.jsのデモ iOS.jsの特徴 iOS.jsではデスクトップのブラウザ向けページとは異なる点を中心に、より簡単に実装できるよう便利な機能がたくさん用意されています。 改善 min-height ページがスクリーンより小さい時は常にアドレスバーが表示されてしまいますが、スクリーン全部を使って表示します。 ※下記にデモがあります。 リンク ページ内の全てのリンクをWebAppで開きます。 100% height 通常「height=100%」はロードした最初の画面の高さを元にしますが、アドレスバーが隠された後のサイズ変更に対応します。 ※下記にデモがあります。 アドレスバー ページがロー
ローテーションバナー
サンプルソース <html> <head> <title></title> <style type="text/css"> <!-- #adbox { /*広告本体*/ border: 2px solid #adff2f; width : 470px; } .ad { /*バナーのボックス*/ display: none; width : 470px; } --> </style> <script type="text/javascript"> <!-- num =0; //バナーのボックスの IDを配列に格納 var ADarray = new Array("ad00","ad01","ad02"); var flag ="ad000";//識別のための標識 //ページを読み込んだ時に実行 window.onload = Bannerinit; function Bannerinit()
UIWebViewでWebとネイティブを相互連携させる方法について - プログラミングノート
特定のページのみUIWebViewを使ってWebページを表示することはよくあると思いますが、そのページでの処理終了したタイミングで、再びネイティブコードを実行したいというケースがあります。 PhoneGapではJSからネイティブコードを呼ぶ仕組みが実現されていますが、これと似たような仕組みを作るにはどうすればよいのか紹介します。 ネイティブからWeb呼び出し JSを実行するためのメソッドがあるので任意のタイミングでそれを利用するだけでOKです。 [webView stringByEvaluatingJavaScriptFromString:@"alert('call from native');"]; 簡単ですね。 Webからネイティブ呼び出し UIWebViewDelegateにある、ページがロードされる前に呼ばれるメソッドを利用します。 - (BOOL)webView:(UIWebVi
モバイルアプリケーション開発のためのHTML/CSS/JavaScript関連技術まとめ
モバイルアプリケーションをHTML/CSS/JavaScriptなどのWeb標準技術を用いて開発するためのさまざまなツールや環境が登場しています。1つ前の記事で紹介した「jQuery Mobile」もその1つですが、それ以外のものもここでまとめて紹介しましょう。 jQuery Mobile jQuery Mobileは、JavaScriptライブラリとして知られるjQueryのプラグインです。オープンソースで提供されています。 「マークアップドリブン」をコンセプトとし、HTMLを記述していくことで、あらかじめ用意されているボタン、メニュー、ダイアログボックス、などのモバイル対応のタッチユーザーインターフェイスを備えたアプリケーションを開発できます。 クロスプラットフォームに対応し、iOS、Android、WebOS、Windows Phone、Symbianなど多数のデバイスでそのまま動作
[JavaScript]配列中の大量データを非同期でゆっくり処理する
先日、クロネコヤマトの伝票番号から配送状況を取得するAPIを作りました。 このAPIですが、負荷軽減のため、呼び出し頻度が毎秒1回という制限を設けています。 制限があるのは良いとして、このAPIを使って複数(大量)のデータをJavaScriptで処理したい場合どうやって作ったらよいのだろうか？ と思い、色々試行錯誤した事の過程と結果です。 長文になってしまったので、最初に目次を書いておきます。 その1:ループで処理する その2:ループ内でスリープさせる その3:setTimeout()で非同期処理させる その4:非同期処理の関数に汎用性を持たせる ところで、「毎秒1回」という呼び出し制限がない場合は? その5:画面が固まることなく,大量データを素早く処理する まとめ 結論だけ欲しい人は、最後の”まとめ”にある関数だけコピーすればOKです。 その1:ループで処理する 普通に考えると、当然fo
![[JavaScript]配列中の大量データを非同期でゆっくり処理する](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
EmacsでJavaScriptソースを快適に読むために：js2-modeとエグズーベラントCtags - 檜山正幸のキマイラ飼育記 (はてなBlog)
「横道にそれすぎ」に書いた事情で、EmacsでJavaScriptソースコードを読む環境を少し整えようかと。 次の2つのツールを導入してみよう、っと。 js2-mode： http://code.google.com/p/js2-mode/ エグズーベラント（EXUBERANT）Ctags： http://ctags.sourceforge.net/ 内容： より良いEmacs JavaScriptモード -- js2-mode 強烈なタグファイル作成ツール -- エグズーベラントCtags エグズーベラントCtagsを調べてみる EmacsでJavaScriptソースを読む ●より良いEmacs JavaScriptモード -- js2-mode 以前（2006年7月）、ひげぽんさんの記事で、「ecmascript-mode.el ＜ javascript.el みたいだ」と書いてあった
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Introduction To React
Dart Synonym: Translations from JavaScript
GitHub - marcuswestin/WebViewJavascriptBridge: An iOS/OSX bridge for sending messages between Obj-C and JavaScript in UIWebViews/WebViews
GitHub - torus/JavaScript-Objective-C-Bridge: Function call interface between JavaScript on UIWebView and Objective-C.
