あなたがReactを使うべき理由 - mizchi's blog
最近フロントエンドでfacebook/reactをずっと使っている。世界的には一部のエンジニアの間で流行っているのだが、国内だとqiitaのタグ等を見てもどうも少ない。みんなもっと使うべきだと思うので、宣伝かねて意見をまとめてみる。 複雑化するデータバインドに対する懸念 MVWのVに対して思いを馳せると、だいたい次のことに行き着く。すなわち、「ある構造体の入力に対して、必ず一意なビューを生成したい」 {items: [1, 2, 3]} を入力とすると、 1, 2, 3のli要素になってほしい。これは単純な例だから問題に成り得ないように見えるが、アプリケーション全体の状態を一つのjsonとして定義し、 そこから常に0から組み立てればアプリケーションの健全性が確保できると考えたことはないだろうか？ 現実の問題 UIのだいたいの状態は遷移で表現される。遷移の差分をプログラマが記述する。jQue
tanaka's Programming Memo
気づいたら、macのターミナルからdocker-composeが呼び出せなくなっていました。使用しているのは、Docker Desktopです。 .zshrcを確認すると、/Users/yutanaka/.docker/completionsにコマンドラインツールが入ってそうなのですが、中身が空でした。 Geminiで調べた次のコマンドで、docker-composeが見つかりました。 find /Applications/Docker.app -name "docker-compose" .zshrcに、次の行を加えて、解決しました。 export PATH=/Applications/Docker.app/Contents/Resources/cli-plugins:$PATH 技術書典18が発表されました！ techbookfest.org 次の本を書き始めるタイミングにあわせて、p
UserAgent を 用いた IE11 の判別方法
（2015/01/04 Windows 10 Technical Preview の useragent を追記） （2013/10/22 jQuery プラグイン でも判定できるようにしました。元記事は こちら 。） Internet Explorer 11 から UserAgent 文字列が変更になるそうです （詳細は こちら）。 その結果、今まで MSIE を使った Internet Explorer の判別が出来なくなります。 これでは困るので、従来の IE も含めて IE であることを判別できる JavaScript を以下で記載します。 IE11 の UserAgent サンプル Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv 11.0) like Gecko Mozilla/5.0 (Windows NT 6.3; WOW64; Tr
I am mitsuruog | Androidやってる人でChromeDevtoolsのRemote DebuggingとScreencasting知らない人は使ってみた方がいいよ！
Androidやってる人でChromeDevtoolsのRemote DebuggingとScreencasting知らない人は使ってみた方がいいよ！ 2013/10/30 に「Frontrend x Chrome Tech Talk Night Extended」が開催され、Addy 氏、Jake 氏、Paul 氏が来日して、最新のモバイル開発のための様々な手法を紹介してくれました。 そこで聞いた内容をもとに、エンタープライズで適用できそうなものを、中立な目線で評価・検証していたのですが、ChromeDevtools のが凄すぎて、終わってみたら ChromeDevtools ばっかり評価・検証していた（おいおい！）という話をします。 ちなみに、Android 開発はほとんどやったことはありません。 あうあう。 これの記事はFrontrend Advent Calendar 2013の
IE8のバグ！baseタグとscriptタグの組み合わせで無効なリクエストが発生する - 地平線に行く
サーバのアクセスログを見ていて、最近やたら変なURLに対するGETリクエストがあるなーと思って調べてみたところ、IE8のバグが原因でした。 Unfortunately, since shipping IE8, we've discovered two problems in the lookahead downloader code that cause Internet Explorer to make speculative requests for incorrect URLs. 残念なことにIE8正式版以降には、インターネットエクスプローラの先読みダウンローダーが原因で、無効なURLに対してリクエストを行う危険性があるというバグが2件あることがわかりました。 Bugs in IE8’s Lookahead Downloader – IEInternals このうちのひとつが、<sc
JavaScriptとコールバック地獄 - Yahoo! JAPAN Tech Blog
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo!デベロッパーネットワークの中野(@Hiraku)です。JavaScriptでサンプルコードを書く機会があったので、どんなインターフェースで提供するのが便利なのか考えてみました。よく問題になるコールバックのネスト問題について、一般的な話をまとめてみます。 お題 突然ですが、次のような処理を行う必要があるとします。 「0」を出力する 1秒待つ 「1」を出力する 1秒待つ 「2」を出力する これをプログラムで書くとどうなるでしょうか？ シェルスクリプトの場合（同期） たとえばシェルスクリプトで素直に書くと、次のようになります。
モバイルゲームの歴史を年代別にご紹介します。モバイルゲームの成長と今後について詳しく解説していきます。
モバイルゲーム 物凄い勢いで勃興したモバイルゲーム業界は、いろいろな課題や問題に直面しながらも巨大化し、今日の時点でのスマートフォン向けゲームの市場へと継承されていきます。 モバイルゲームの歴史 2001 Javaアプリと3Dゲームの登場 Javaが利用できるようになったことにより、ダウンロード型のゲームが供給できるようになりました。 2002 携帯電話端末の大容量化・3D化競争 Java搭載携帯電話端末が登場してからごく僅か1年の間に、アプリのサイズに関しては10倍に広大化し、表現方法も2Dから3Dにシフトし始めました。J-PHONEは『ゼビウス』や『スペースハリアー』などといった昔のアーケードゲームを、ドコモはSIMCITYなどパソコンで世界的規模のヒットを飛ばしたゲームを主力商品としていました。 2003 モバイルゲームの一般化 メモリの制限が厳しいJava仮想マシン上ではなく、OS
enchant.js 怒涛の 100 tips | TM Life
※ phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです. enchant.js 怒涛の 100 tips!! ローカル整理してたら昔勉強がてら作った enchant.js のサンプルが大量に出てきたので, 整理するついでに公開しようと思います. 最終的に 100超えちゃったけどw(全部で102個あります) 逆引きてきな感じでまとめてます. 参考になれば幸いです. 全て jsdo.it に移植したので Web上で実行できます!! fork なりダウンロードなりして遊んでくださいな♪♪ Tips Base(基本) 基礎です. enchant.js のテンプレートを用意しよう Entity(エンティティ) 表示物系の基底クラスです. 内部で DOM を持っているので表示は
外部JavaScriptの動的ロード - os0x.blog
JavaScriptからJavaScriptを読み込むのは、(IEに対応する場合は特に)結構面倒です。 ちょうど昨日公開されたid:amachangのはてブにアクセスチャートを出す Greasemonkeyでは、こんな実装になっていました。 // for IE if (!document.evaluate) { var script = document.createElement('script'); script.src = 'http://svn.coderepos.org/share/lang/javascript/javascript-xpath/trunk/release/javascript-xpath-0.1.11.js'; document.body.appendChild(script); var callee = arguments.callee; var inter
node.jsのいろいろなモジュール26 – UglifyJSでjsファイルの最適化 | DevelopersIO
UglifyJSとは 高機能なJavaScript用の圧縮・最適化ツールです。 コンソール上でコマンドとして実行することもできますし、apiを呼び出してjs内で使用することもできます。 環境構築方法 今回使用した動作環境は以下のとおりです。 OS : MacOS X 10.7.4 Node.js : v0.8.15 npm : 1.1.66 npmを使用してUglifyJSをインストールします。 このモジュールはグローバルオプションをつけてインストールしましょう。 % npm install -g uglify-js コマンドから圧縮を実行 uglifyjsがインストールできたら、圧縮をためしてみましょう。 とりあえず簡単なjsファイルを作成します。 jsファイルでは配列を作成してそれを全部合計し、console.logで表示します。 function sum(array) { var r
GitHubのようなtextareaの補完機能を実装する - カーソル位置の取得 - Qiita
続編 JavaScript - Qiitaのtextarea自動補完がOSSになりました GitHubのコメントでは@と入力するとカーソルの下に入力補完が出現する。さらっとやっているが、実はこれが結構難しい。なぜ難しいのかというと、JavaScriptではカーソルが何文字目にいるかは分かるが、 カーソルのXY座標を取得するAPIが存在しない からだ。カーソル位置が分からなければ、適切な位置に補完候補を表示することができない。では一体どうすればいいのか？ 今回Qiitaではコメント欄でのメンションの補完機能を実装した。本稿では前述の問題を解決するために用いたテクニックを解説する。 ちなみにこのメンション補完機能はチーム用プライベートQiitaである「Qiita:Team」でも勿論使える。現在絶賛無料トライアル実施中なので、興味を持たれた方はそちらも使ってみて欲しい。 要約 textarea内
jQuery の on() と off() を理解する - tacamy--blog
初心者向けの本とかだと、イベントを jQuery オブジェクトの後に直接指定する、 $('.foo').click(); のような書き方で説明されている場合が多いけど、少し複雑なことをしようとするとそれだと困ることが出てきます。そんなときに便利なのが on() を使ったイベント設定です。 on() ひとつで bind() live() delegate() を表せる jQuery 1.7 で、bind() live() delegate() がすべて on() に統合されたそうです。 つまり on() の書き方によって、3 パターンの使い方ができるということです。 .foo という要素をクリックしたら何かするという例で、イベントの設定と削除の方法をそれぞれ書いてみます。 bind() $('.foo').bind('click', function(){...}); は $('.foo')
Using jQuery with Windows 8 Metro JavaScript App causes security error
Since it sounded like jQuery was an option for Metro JavaScript apps, I was starting to look forward to Windows 8 dev. I installed Visual Studio 2012 Express RC and started a new project (both empty and grid templates have the same problem). I made a local copy of jQuery 1.7.2 and added it as a script reference. <!-- SomeTestApp references --> <link href="/css/default.css" rel="stylesheet" /> <scr
JSNote - 配列の任意の位置に値を代入したり削除したりする
JSNote 読んですぐに使えるJavaScript・HTML・CSSのタイプを書いています。 HomeLatest Entries左、中、右クリックのカスタムイベントを追加するjQueryプラグイン配列の任意の位置に値を代入したり削除したりするJavaScriptだけでローカルの画像をBase64エンコードするIEをCSS3に対応させるCSS3 PIEのJavaScript版を使うリストをページ分けしてページャーを付けるjQueryプラグインArchives2012-012011-122011-112011-02すべての記事一覧CategoriesJavaScriptjQueryブログその他CSSRSS 配列から任意位置の要素を削除したり、任意位置に値を挿入したくなることってあると思います。 値削除・代入してforでゴリゴリずらすなんてスマートじゃない方法使いたくないので調べてみると、
スマートフォン対応でよく使うhtml、css、javascriptのまとめ
スマートフォン(ios、android)向けのウェブサイト・ウェブアプリを作る際に個人的によく使うhtml、css、javascriptの備忘録。 html関連 headタグ内での設定<!-- //デバイスサイズにあわせて表示領域を変更する --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- //電話番号のリンクを無効化 --> <meta name="format-detection" content="telephone=no"> <!-- //ホーム画面用アイコン --> <link rel="apple-touch-icon" href="icon.png"> <!-- //ホーム画面用アイコンの光沢を無効化する --> <link rel="apple-touch-icon
jQueryのbind/live/delegateの違いまとめ、と新API .on()の使い方 - y-kawazの日記
jQueryのイベント記述方法はいくつかあり、大雑把におさらいしたのが以下の3パターンです。 まず一番基本的なのが $("a").click(fn) や $("a").bind('click', fn) です。click(fn)はbind('click', fn)の省略形です。 次にjQuery1.3で $("a").live("click", fn) という機能が出来ました。liveの良いところはDOM操作で出たり消えたりするエレメントに対して再バインド無しでイベント定義ができる利便性と、内部的にはbind個所がdocumentの1か所になり複数個所へのbindが無くなることによるメモリ効率と実効速度の向上です。 更にjQuery1.4.2で $("#foo").delegate("a", "click", fn) という書き方が出来るようになりました。これは特定要素以下に限定するliv
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SVG re-ordering z-index (Raphael optional)
sample usage of google.analytics framework for Windows Modern UI apps
Windows Modern UI Google Analytics helpers
『Chrome Developer Tools』の裏ワザまとめ | IDEA*IDEA
