HTML5 Conference 2015 でお話した「Polymer で作る次世代ウェブサイト」のスライドです。途中にライブコーディングを挟むため、動画もご覧下さい。http://youtu.be/qzh56Ja1eaw?t=3h20m16sRead less
![Polymerで作る次世代ウェブサイト](https://cdn-ak-scissors.b.st-hatena.com/image/square/b9b428ae69fc5afaa23b5fe5ed7df17de3278685/height=288;version=1;width=512/https%3A%2F%2Fcdn.slidesharecdn.com%2Fss_thumbnails%2Fpolymer-150126083438-conversion-gate01-thumbnail.jpg%3Fwidth%3D640%26height%3D640%26fit%3Dbounds)
HTML5 Conference 2015 でお話した「Polymer で作る次世代ウェブサイト」のスライドです。途中にライブコーディングを挟むため、動画もご覧下さい。http://youtu.be/qzh56Ja1eaw?t=3h20m16sRead less
altJSの人気が混戦で面白い! 2014年中に人気が急上昇してきており、「2015年では必須の知識」となりそうなJavaScriptライブラリをランキング形式で発表。 ← 前回 連載 INDEX 次回 → こちらのページで【2016年版】も発表! ■ 2015年が始まり、心機一転で「今年こそはWeb開発を頑張ろう」と思っている人も少なくないだろう。そんな方々に向けて本稿では、2014年中に人気が急上昇してきており、「2015年では必須の知識」となりそうなJavaScriptライブラリをランキング形式で発表する(※昨年の2014年版はこちら)。 なお、本稿のランキング決定では、検索キーワードの流行を調査可能な「Googleトレンド」(「すべての国」「過去 12 か月間」「すべてのカテゴリ」「ウェブ検索」という条件で絞り込み)を使って、ライブラリの人気をジャンルごとに比較した(※ライブラリ名
概要 本稿はRakutenMAというJavaScriptだけで動く学習器付きの形態素解析器を利用する入門記事です。本記事を読了すると、形態素解析の実行と形態素解析のモデルを作成・更新出来るようになります。 また、本稿ははてな×PC工房との連動企画の補足をするべく書きました。 「あんちべさんと一緒に Rakuten MA で形態素解析」はてなニュース連動企画 第二弾! : パソコン工房 パソコン工房のPCで遊ぼう第2弾! あんちべさんと一緒に Rakuten MA で形態素解析 - はてなニュース RakutenMAを利用したエディタ判定器デモ エディタ判定器 :パソコン工房 【やじうまWatch】Emacs派とVim派の対立を煽る「エディタ判定器」が面白いと評判 -INTERNET Watch はじめに 近年、twitterやFacebookなどのSNSやAmazonのレビューなどから得ら
日付をフォーマットする 日付をフォーマットして返す。フォーマット(第二引数)を省略した場合2014-01-23 01:23:45.678みたいな形で返す。 /** * 日付をフォーマットする * @param {Date} date 日付 * @param {String} [format] フォーマット * @return {String} フォーマット済み日付 */ var formatDate = function (date, format) { if (!format) format = 'YYYY-MM-DD hh:mm:ss.SSS'; format = format.replace(/YYYY/g, date.getFullYear()); format = format.replace(/MM/g, ('0' + (date.getMonth() + 1)).slice(
JavaScriptは移り変わりの早い言語です。 もう1年以上経っていますし、記事のメンテもちゃんとできていないので、消し線を入れることにしました。 参考程度のために記事は一応残しますが、より新しい情報を読まれることをお勧めいたします。 はじめに --- 最近では JavaScript の実行環境はブラウザに限りません。(node.js, Web Workers) また、旧来のような <script> 経由でのロードもとうに古くなっています。今は CommonJS スタイルで、require を用いたモジュールのロードを行なうことがより良いとされています。 ですから、次のようなことは改める必要があります。 - var YourModule = {}; などとして、外部から YourModule.hoge(); などと呼び出す書き方 - this === window だと思うこと 今回は、
HTML の DOM 操作を良い感じで隠蔽してくれる Ractive.js というライブラリを紹介します。 本記事は VirtualDOM Advent Calendar 2014 の13日目の記事です。 VirtualDOM といえば React だ、と言わんばかりの流れですが、本記事では敢えて Ractive.js を取り上げます。Ractive.js が VirtualDOM かって? 確かめてみましょう。 良し、大丈夫。VirtualDOMです。 Ractive.js とは? Ractive.js は本家サイトの説明を借りれば、テンプレートドリブンなUIライブラリです。なんのこっちゃわからないでしょうね。 まずVirtualDOMのメリットとは 生のDOMを直接操作しなくても、JavaScriptのオブジェクトだけを操作すれば、上手いこと自動的に書き換えてくれる ことだと言えます。
フロントエンド周りの技術は驚異的なスピードで進化し、また多様化しています。それらを全てマスターするのは途方もなく大変なので、ペパボでは、社内のエンジニア・デザイナが「最低限これだけはおさえておこう」というスタンダードを文書化することにいたしました。社内向けを想定した文書ではありますが、社内のみに留めず多くの方に役立てたいと考えたため公開します。 この項目の担当 @hadashiA どうしてフレームワークを使う? (1) ドメインロジックとプレゼンテーションの分離 (2) SPA(シングルページアプリケーション) 流行り廃り (1) MVC (2) MVVM (3) Virtual DOM どれを使う? どうしてフレームワークを使う? (1) ドメインロジックとプレゼンテーションの分離 まずこちらの画面を見てください。 ©任天堂 スーパーマリオワールド スーパーマリオが右にダッシュすると、マ
一人Advent Calendarの3日目です。 JSONPを使って外部のAPIを呼び出して、結果を取り込むということは色々なところで行われています。しかし、そもそもJavaScriptを利用した場合、クロスドメイン通信が使えないという前提があります。JSONPだったら、何故そこを回避できるのでしょうか?あまり詳しく考えたことが無かったので、簡単に調べてまとめてみました。なんというか4周くらい遅れている話題ですが、気がついた時に整理するとスッキリします。 JSONPの動作原理 Wikipediaさんをみてみると、そのものずばりのことが書かれています。scriptタグ内のsrc属性は別ドメインのURLを指定できるという点と、そのレスポンスはJavaScript関数呼び出し形式になるという点をついたのが、JSONPの動作原理です。なんというか、仕様の考慮不足を利用した仕組みだと思います。 JS
複数に分割されたログインID入力が・・・ タイムズカープラスのログインを、ブラウザが学習しない。 Opera(Presto)だと複数にわかれたIDを学習してたのに、Opera(blink)になってから学習しないので、もう面倒だから拡張機能で対応しようとした。 フォームの値をJavaScriptで送信しようとしてハマったのでメモ。 スクリーンショット 2014-12-05 14.38.08 form.submit でログイン失敗する HTTPのリクエストヘッダを見ていると input に存在しない値を送信している模様。 tpLoginForm:doLoginForTp.x:132 tpLoginForm:doLoginForTp.y:14 どこから出てきた、この値は。と調べてて見つけた。 input type ="image" はクリック位置を送信する模様 知らなかった。X,Y座標を送信する
LAMPに代わる構成として注目のMEANスタックの基礎知識とインストール、ひな型作成:MEANスタックで始めるWebアプリ開発入門(1)(1/3 ページ) MEANスタックを用いたWebアプリの開発方法について紹介していく連載。初回はMEANスタックの特徴と構成要素MongoDB、Express、AngularJS、Node.jsの概要、インストールの仕方とひな型の作成方法を解説。 連載目次 今でもよく使用されていますが、以前からWebアプリ開発ではLAMP環境がよく使用されていました。LAMPとは、一般的なWebアプリを開発するのに人気の高いオープンソースソフトウェアを組み合わせたもので、以下を用いたシステムのことです。それぞれの頭文字を取って「LAMP」と呼ばれています(参考)。 OS:Linux Webサーバー:Apache HTTP Server データベース:MySQL プログラ
これですね。これ何か呼び方あるの? なにこれ グローバル変数にならないようにする仕組み。 スコープ問題 JavaScriptではスコープ(変数の有効範囲)は関数単位(function(){~})になるのが基本。 そして一番外側、どの関数の中でもないものは「グローバルスコープ」に所属する「グローバル変数」となり、どこからでも利用できる変数になる。そうなるとどこかで変数の名前がかぶった際、勝手に値が変わったりして大変恐ろしい事になってしまう。 そこで、ファイル全体を関数で括る事でスコープを生成して、グローバルではない変数にしておこう、というもの。ただしvar宣言なしに変数を使い始めると、結局グローバル変数になってしまうので注意。 次世代JavaScriptだとletとかあるけど触れません、関係ないし。 関数の前後にくっついてる括弧は 関数は作成するだけでは何もならないので、即時実行してやります
この前、研究室の先生に教えてもらったAdobe製のJavaScriptデバッガTheseusがかなり便利なのでご紹介します。 Theseusとは Theseusは、AdobeとMITの共同研究から生まれたJavaScriptのデバッガです(→学会論文)。ChromeとNode.jsの上で動きます。具体的に何をしてくれるのかをざっくり言うと、関数のコールを追跡して、BracketsというAdobe製のエディタに下画像のような感じで表示してくれます。 Theseusのすごいところは、コールバックの実行まで追跡してくれることです。もちろん、エラーが起きた箇所もすぐに見ることができます。また、デバッグをするとき、気になる箇所にconsole.logを挟むことがあると思いますが、Theseusを使えばその必要もありません。関数の横に表示されているコール回数をクリックすれば、その関数の実行ログを表示し
TypeScript について (1) 利用するメリット Java や C# のような文法の altJS です。下記に当てはまる場合は有力な選択肢です。 既存プロジェクトを altJS に移行したいとき JavaScript の文法そのままコピーして使用できるため 静的型付けをしたいとき 現状 TypeScript 一択です 新規の中・長期に渡る大規模プロジェクトのとき 静的型付やインターフェースを利用できるため (2) 利用上の注意 ただし TypeScript を利用する上で注意する点もあります。 コンパイルが遅い 型チェック等があるため、altJS の中でも特に遅めです this の用法が増える クラスのメンバ変数の参照には this.foo と記述します (3) サンプルコード // sample.ts module Saying { export class Greeter {
JavaScriptを活用したWebアプリケーションを開発している際に、一時的に保存したいデータをどのように扱うかは大きな問題です。何となく変数や配列、ハッシュに保存してしまいがちですが、そのデータの取り出しや更新が面倒だったりします。 そこで使ってみたいのがAlasql.jsです。JavaScriptだけで作られたクライアントサイド向けのSQLデータベースになります。 Alasql.jsの使い方 使い方の例。データを配列で放り込んで、SQLで取り出せます。 デーブルの作成を含めてSQLが書けます。 データはlocalStrageに保存することもできるので、再読込時に復元も可能です。 Alasql.jsはHTML5仕様の中で検討されていたWeb SQLとは異なる実装で、オンメモリで動きます。高速で動作し、かつデータはlocalStrageに保存しておくこともできるので容量は小さいながらも永
はじめに mongodbでのデータ集計で 配列のn番目の要素に関して集計したかったときのメモ 特にjsというよりはphpで この記事のサンプルのメインはjavascriptです。 実際はMongoDB PHP ドライバからMongoへアクセスする必要があったので javascriptで試す ↓ phpに置き換えてバッチとか作成 って流れでやったのでその所感もつづっておきます。 とはいえ文書だと説明しずらいのでまずは事例から 集計したい事例 集計したいデータ データは以前の記事で1億件つっこんでみたデータと同じものにしました ただしドキュメント数は100分の1(100万件)ほど。 どんなデータか ゲームやらなんやらでポイントGETするたびに1ドキュメントinsert insertされるのはポイントの総計と内訳 内訳は、[GETしたポイント + ボーナスポイント]の配列 ボーナスポイントはGE
シングルページアプリ向けの各フレームワークをGoogle Trendで比較したグラフがLars Eidnesのブログに掲載されてますが、AngularJSの伸びが他を圧倒しています。一方で、アーキテクチャ上の課題は、コミュニティの声もあり、かつ当事者である開発チームも認識していたところ。そして、それに対する答えとしては、バージョン2.0で大幅に書き直すという流れになっています。 AngularJS 2.0については、「野心的だが険しい道のり」というタイトルの記事がGuardianに掲載されてますが、 ES6の採用 Web Componentsとの親和性のアップ (双方向バインディングをどうするかまだ決まってないが)Reactの考え方に近づいてきている (1.3のサポートはしばらく平行して続くと発表されたが)本当にスムーズな移行を提供できるのか? がポイントだとSeb Ceveyはまとめてい
自転車通勤始めました。@kyo_agoです。この記事はE2EテストAdventCalendar -26日目です。 今日はGithub上でTravisCI、SauceLabs、Protractorを使って簡単に始められる継続的E2Eテストの方法を紹介したいと思います。 ゴールはGithubにPRする毎にTravisCIがProtractorを使ってSauceLabs上で検証した結果を教えてくれるところです。 登場するユーザ名(kyo-ago)、リポジトリ名(Protractor-SauceLabs-TravisCI-sample)は実際のものに置き換えて読んでください。 SauceLabsの登録まず最初にSauceLabsのアカウントを作成します。 この時点ではGithubのリポジトリも何らかの設定ファイルも必要ありません。 「Getting Started」を押してください。 ダイアログが
あの頃プレイしていたゲームが見つかるかも? 僕は全くゲームをしないので見ても何1つ分からなかったが、好きな人にとっては1日中楽しめるほどの量がある。ゲーム900種類以上が無料でプレイできるのは相当だ。Internet Archive、凄い! これはJavascriptでできる限り多くのシステムをエミュレートすることに注力している「JSMESS」プロジェクトの一環で進めらたサービス。全てのゲームが快適に動作するとは限らないが、懐かしみつつブラウザで遊ぶには十分なのかもしれない。 操作方法についてはTechCrunchに簡単な操作方法が紹介されていたので、まとめておく! 「1」キー:「Player 1」でゲーム開始 「5」キー:コインを投入(アーケードゲームなので) 矢印キー:各種方向操作 「control」「alt」「スペース」キー:3つの主要ボタン 「タブ」キー:操作方法の表示 ゲーム機で
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く