TypeScript で実現する MVP アーキテクチャパターン - Hatena Developer Blog
こんにちは、アプリケーションエンジニアの id:nanto_vi です。先日行われた Hatena Engineer Seminar #4 で、「TypeScript で実現する MVP アーキテクチャパターン」と題する発表を行いました。当日は皆様ご清聴いただき、また懇親会でも活発な質疑をいただきありがとうございました。 内容としては、TypeScript を用いたクライアントサイド Web プログラミングの話、及び既存の JavaScript フレームワークを採用せず、MVP (Model-View-Presenter) アーキテクチャパターンにのっとり開発を進めた事例の紹介となります。以下に発表資料を加筆修正して公開するのでご参照ください。 自己紹介 id:nanto_vi (外山真) アプリケーションエンジニア JavaScript、Perl アジェンダ 少年ジャンプルーキーでの T
第1回 クラウドとリアルタイムWeb | gihyo.jp
近年、HTML5やJavaScriptを活用したWebアプリケーションが増えるのと同時に、今まではネイティブなアプリケーションが常識であったデスクトップアプリケーションにもHTML5の波がやってきました。 具体的な例としてはWindows 8で追加されたWindowsストア アプリでは、HTML5とJavaScriptを利用したアプリケーションの開発がサポートされています。 HTML5で開発できる領域は広がっていますが、切っても切れない関係なのがサーバとの通信です。そして、その通信を見ていくと、最近ではユーザが能動的に情報を取りに行くスタイルではなく、FacebookやTwitterに見られるようなサービス提供側から情報がリアルタイムで配信されるスタイルが増えつつあります。 図1 Facebookメッセンジャーの入力中表示 これらのリアルタイム通信はサーバとの接続を常時行っておく必要がある
Node.jsとは何か、開発者ライアン・ダール氏が語る（前編）～ノンブロッキングとはどういうことか？
いま注目されているサーバサイドJavaScriptの火付け役となったNode.js。その開発者であるライアン・ダール（Ryan Dahl）氏自身がNode.jsを紹介した講演「Introduction to Node.js with Ryan Dahl 」のビデオが公開されています。 この講演は、サンフランシスコのPHP開発者の集まりであるThe SF PHP Meetup Groupが2月にダール氏を招待して行われたもの。 そのため、Node.jsを知らないデベロッパーに向けて、Node.jsがどのような特徴を持つプログラミング言語なのか、分かりやすく解説しています。内容を紹介しましょう。 Node.jsとPHPとの本質的な違いとは何か Node.jsを触ってみよう。今日は特にスライドは用意してなくて、タイプしてどんなものかを動かしながら紹介していくつもりだ（注：ダール氏はここで最初に「
XMLHttpRequestを使ったCSRF(補足編) - 葉っぱ日記
XMLHttpRequestを使ったCSRF対策 - 葉っぱ日記を書いていて思ったけど、いまいちXHRを使ったCSRF(というかクロスオリジン通信)について理解されていないような感じだったので、ちょっと書いておきます。とりあえず日本語のリソース的には、HTTP access control | MDN が詳しくて、それを読めばだいたい事足りるんで、あとはCSRFに関連しそうな話題だけ。 Q. そもそも「クロスオリジン」って何？ スキーム、ホスト、ポートの3つの組み合わせが一致している場合を同一オリジン(same-origin)、いずれか一つでもことなる場合をクロスオリジン(cross-origin)と言います。つまり、XHRでドメインを超えて通信している場合は典型的なクロスオリジン通信となります。 Q. え？ XMLHttpReuest って他のドメインにリクエストを発行できないんじゃ い
Tumblrでウイルス投稿が大量流通、閲覧すると自動でリブログ
ソーシャルブログサービスの米Tumblrは12月3日、ウイルス感染によるものと思われる投稿がTumblr内で大量に出回っていることをTwitterで確認し、対応に当たっていることを明らかにした。 同社のツイートでは「ウイルス投稿攻撃により、数千件のTumblrブログが影響を受けた。Tumblrのエンジニアが問題を解決した」と説明している。 セキュリティ企業の英Sophosによると、感染したTumblrのブログには、すべて同じ内容の投稿が掲載された。投稿は男性の写真入りで「Dearest `Tumblr’ users」という一文から始まり、人種差別的な内容や、Tumblrユーザーのブログを中傷するような内容が含まれている。 問題の投稿は、Tumblrの「リブログ」機能を使ったワーム感染によって広がったとみられる。投稿内には、暗号化されたJavaScriptをiFrameに隠す形で悪質なコード
画面をチカチカさせる活動の振り返りとノウハウの共有 - hitode909の日記
ぼくはライフワークとして画面をチカチカさせる活動をしてるのだけど，周りの人にあまり理解してもらえなくて，まぶしいとか，そんな低俗なことをやって，みたいな反応をされる． けど，画面をチカチカさせるだけでも，いろいろと工夫できることとかある．今日はこれまでの活動の振り返りと，それで得たノウハウを共有しようと思います． 過去の活動 これまでに，いろいろ画面をチカチカさせるやつ作っているので，順に紹介します． コード残ってるのは2010年からだけど，一番古いのは中学生のときにRPGツクールで作った画面がチカチカするゲームで，途中まではRPGとして遊べるけどストーリーが進むと画面が高速で点滅し始めてそれ以降何もできなくなるというゲームでした． 古くはポケモンショックというイベントもあったけど，ぼくは関西に住んでて見れなかった． ウェブページをチカチカさせる このbookmarkletを起動するとウェ
【初心者向け】WEBクリエイターになるための入門7レッスン | DECONCEPTER
無料で学べるドットインストール 無料でプログラミングの基礎を簡単に動画で学習できるドットインストールというサイトをご存知でしょうか。こちらのサイトではHTMLやCSSといったWEBページを作るための基礎知識やWEBシステムやWEBページのデザインをするためのプログラミング言語の解説が幅広く網羅されているサイトだ。 初心者でなくても、新しい言語を気軽に学べるようになっており、WEB技術の学習に対する敷居を大きく下げてくれている。今日はこれからWEBページを作りたいという方やWEBディレクターをやっているが作り方を実はよく知らないという方が最低限押さえておきたいレッスンをピックアップする。 HTML これが書けなきゃ始まらない。HTMLは全く難しいものではありません。整形した文書をWordで作ったことがある方は多いと思うが、HTMLはインターネットに整形した文書を公開するための言語だ。 WEB
ちょっと高度にJavaScript／クロージャでイベントハンドラを作る | DevelopersIO
前回の解説では、クロージャの「変数が保持される」「変数が隠蔽される」という特徴を使って、アクセサメソッドを作りました。 今回は、「呼ぶたびにクロージャが生まれる」特徴を使ってみます。 繰り返し処理内でイベントハンドラを作る まずは、何の工夫もなくやってみます。今回はjQueryも使います。 $(function() { var data = [ {label:'リンク１', value:1}, {label:'リンク２', value:2}, {label:'リンク３', value:3}, {label:'リンク４', value:4}, {label:'リンク５', value:5} ]; var ul = $('<ul/>'); for(var i = 0, l = data.length; i < l; i++) { var item = data[i]; var li = $('
Node.jsの仕組みはWebアプリ開発者も知っておくべき
インターネットのサービスは、アクセスしてきたユーザーを「待たせない」ことが大前提だ。「待たせない」サービスを実現するために、新しいインフラ技術が次々と登場している。例えばJavaScriptの実行基盤を構築するサーバー用ソフト「Node.js」もその一つ。大量の同時接続ユーザーに対して高速にレスポンスできる技術として、今、大きな注目を集めている。 Node.jsは、Webサーバー構築ソフト「Apache」やWebアプリケーションサーバー構築ソフト「Tomcat」などと置き換えて使う。ただし、単純に置き換えるだけで必ずレスポンスが高速になるわけではない。Node.jsが持つ本来のパフォーマンスを引き出すには、実装するWebアプリケーションの開発に注意が求められる。 “ループ”を止めないアプリが不可欠 Apacheの場合、複数のスレッドを起動して並行処理することで、大量のアクセスに対応できるよ
プログラミング言語同士がどう影響を与え合っているのかを示した相関図
世の中には数千種類のプログラミング言語がありますが、その多くは何らかのプログラミング言語から影響を受けてできており、また、自身も他のプログラミング言語に影響を与えています。その関係を1つのマップ上に落とし込んだ相関図が「Programming Languages Influence Network」です。 Programming Languages Influence Network | Exploring Data https://exploring-data.com/vis/programming-languages-influence-network/ まるで星のように見えている点がそれぞれ1つのプログラミング言語を表しています。たとえば「Lisp」にマウスオーバーすると、このように関連する言語までのラインが表示されます。このうち、オレンジ色は「影響を受けた言語」、青色は「影響を与え
iPhone5 と iOS6 での HTML5開発についてあれこれ - webとかmacとかやってみようか R
本日、iOS6がリリースされましたね。明日は iPhone5 の発売日。Mobile Safari も大幅にアップデートされて、Web開発者にとって非常に気になります。 iPhone 5 and iOS 6 for HTML5 developers, a big step forward: web inspector, new APIs and more で素晴らしいまとめがありましたので、簡単に紹介したいと思います。 iPhone5 新しい画面サイズ 新しい 4インチ画面になり、解像度は WDVGA (Wide Double VGA) 640×1136px になりました。横幅はこれまでと変わりませんが、高さが 176px 増えました。 新しいシミュレーター Xcode4が新しくなり、iOS6のシミュレータが出ました。Mac AppStore からダウンロードできます。 何をすべきか 画面
JavaとJavaScriptの良いとこ取り？ 「Dart」超入門
クライアントもサーバも！ Webアプリ開発言語Dartとは 今回は、プログラミング言語「Dart」を紹介します。 Dartは2011年にグーグルが発表したプログラミング言語です。「Dart: Structured web apps」で情報が公開されています。今後のWebアプリ開発のトレンドを見極めるうえでも、1度はチェックしておきたいプログラミング言語でしょう。 DartはJavaと同じクラスベースのオブジェクト指向言語です。JavaScriptがターゲットとする分野と同じくWebアプリ開発向けのプログラミング言語です。 「構文スコープ（lexical scoping）」「クロージャ（closures）」「オプショナル静的型（optional static typing）」といったJavaにはない機能をサポートしています。Webアプリを開発しやすい言語を目指しており、クライアントサイドもサ
Google検索を支える「Googlebot」がAJAX・JavaScriptのクリックに対応、現実のユーザーっぽい挙動が可能に
By Mechanekton Googlebot(グーグルボット)とは、Googleのウェブクロール用ロボットのことで、Googleの検索用インデックスに新しいページや更新されたページを次々とダウンロードして回収していくための一連のプログラムとプロセスのことで、Googlebotによってインターネット上の数十億のページを取得（クロール）するため、クローラとも呼ばれています。 しかし所詮はプログラムなので、例えばAJAXやJavaScriptを駆使しまくっているとなかなかうまくクロールしてくれず、AJAXなどもクロールできはするものの、人間が実際にクリックするのとは挙動が違うため、Google自身も「AJAX クロール: ウェブマスターおよびデベロッパー向けガイド」というのを出しており、その中でAJAXをより効果的にGooglebotにクロールさせるためのスキームを推奨せざるを得ないほどでし
JavaScriptの実行速度を4倍高速にするJailbreak Tweak Nitrousがマジすごい
MobileSafariは、他のアプリに対し、特権的な立場にあるわけです。 Nitrousを導入すると、民衆もNitroが使えるようになる Nitrousを導入するとどうなるか？ MobileSafariでしか使えないようにしてあるNitroが、どのアプリでも使えるようになります。 Nitrousの影響の範囲は非常に広い JavaScriptエンジンは、WebViewの中で動いています。 例えば、Tweetbotでリンクをタップしたときに開くWebViewなど。 Tweetbot for Twitter (iPhone & iPod touch) カテゴリ: ソーシャルネットワーキング 価格: ￥250 Nitrousを導入すると、WebViewでの表示が速くなるわけです。 これは分かりやすい例。 WebViewは、Webページを表示するためだけに使われているわけではありません。 例えば、
画面サイズに応じて任意のCSSファイルをロードするJavaScriptライブラリ・sizeit.js
画面のサイズを指定して、その サイズに応じて任意のCSSファイル をロードするスクリプトのご紹介。 Media Queries等によってCSSが 肥大化してしまった場合は使って あげると軽量化できるかもですね。 指定したブレークポイントに合わせて、ロードするCSSファイルを指定出来る、というスクリプト。非依存型なので単体で利用可能、サイズも圧縮版で1.7kbほどと軽量です。 Sample Media Queriesの場合、不要なCSSもロードしますが、sizeit.jsはブレークポイントに応じたCSSファイルのみを読み込むのでうまく使えば軽量化が可能です。 さて、サンプルですが、JQMを利用し、ブレークポイントを以下のように設定しました。 幅が600px以下ならJQMのCSSをロード幅が1024px以下なら何も読み込まないそれ以外はJQMのCSSをロードこう設定すれば、601px～1024
Googleが示すJavaScriptを350倍高速化する秘訣 - ぼちぼち日記
1. はじめに、 今年も Google I/O が開催されました。一度も現地に行って参加したことはないのですが、毎年セッションの内容は技術的に高度なものばかりでいつも注目しています。今年の一つ興味深いセッションで、 「Google I/O 2012 - Breaking the JavaScript Speed Limit with V8 (Daniel Clifford)」 スライド ,ビデオ というのがありました。（ビデオ・資料をすぐ公開してもらえるのはホントありがたいです。） ご存じの通り V8 は Chrome に搭載されているばかっ速い JavaScript エンジンで Node.js でも採用されています。このセッションは、 V8 の内部実装の解説を元にどう JavaScript の実行速度がパフォーマンスチューニングができるかという内容で、もうこれは必見で見逃せないものです。
HTML5、CSS3、JavaScriptがリアルタイム編集できる！軽量HTMLエディタ「Liveweave」 - Chrome Life
みなさんは、HTMLやCSSのコーディングには何を使っていますか？ デザイナーの方であればDreamweaverをメインで使っている人が多いと思います。 デベロッパーの場合は、自分の好きなテキストエディターを使いこなしているでしょう。 しかし、実際にはコーディングをしながら見た目や動きを確認するためにブラウザを横でたちあげてデバッグしながら作業を進めていくと思います。 コードを修正→ファイルの保存→ブラウザで更新→確認 この手順を繰り返すのですが、これがなかなか面倒です。 できれば、コードを修正したタイミングですぐに確認できるとベストですよね。 そこで今回ご紹介するのが、HTML5、CSS3、JavaScriptをリアルタイムに編集して確認ができる軽量HTMLエディタ「Liveweave」です。 「Liveweave」は、ブラウザ上で動作するHTMLエディタです。 コーディングエリアとレン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TechCrunch | Startup and Technology News
Yohei Yoshihara's Home Page
IDEA * IDEA