HTML5 Conference 2015 でお話した「Polymer で作る次世代ウェブサイト」のスライドです。途中にライブコーディングを挟むため、動画もご覧下さい。http://youtu.be/qzh56Ja1eaw?t=3h20m16s
Polymerで作る次世代ウェブサイト
HTML5 Conference 2015 でお話した「Polymer で作る次世代ウェブサイト」のスライドです。途中にライブコーディングを挟むため、動画もご覧下さい。http://youtu.be/qzh56Ja1eaw?t=3h20m16s
人気上昇中のJavaScriptライブラリを調べてみた【2015年版】
altJSの人気が混戦で面白い！ 2014年中に人気が急上昇してきており、「2015年では必須の知識」となりそうなJavaScriptライブラリをランキング形式で発表。 ← 前回 連載 INDEX 次回 → こちらのページで【2016年版】も発表！ ■ 2015年が始まり、心機一転で「今年こそはWeb開発を頑張ろう」と思っている人も少なくないだろう。そんな方々に向けて本稿では、2014年中に人気が急上昇してきており、「2015年では必須の知識」となりそうなJavaScriptライブラリをランキング形式で発表する（※昨年の2014年版はこちら）。 なお、本稿のランキング決定では、検索キーワードの流行を調査可能な「Googleトレンド」（「すべての国」「過去 12 か月間」「すべてのカテゴリ」「ウェブ検索」という条件で絞り込み）を使って、ライブラリの人気をジャンルごとに比較した（※ライブラリ名
RakutenMAによる形態素解析入門 - あんちべ！
概要 本稿はRakutenMAというJavaScriptだけで動く学習器付きの形態素解析器を利用する入門記事です。本記事を読了すると、形態素解析の実行と形態素解析のモデルを作成・更新出来るようになります。 また、本稿ははてな×PC工房との連動企画の補足をするべく書きました。 「あんちべさんと一緒に Rakuten MA で形態素解析」はてなニュース連動企画 第二弾！ : パソコン工房 パソコン工房のPCで遊ぼう第2弾！ あんちべさんと一緒に Rakuten MA で形態素解析 - はてなニュース RakutenMAを利用したエディタ判定器デモ エディタ判定器 :パソコン工房 【やじうまWatch】Emacs派とVim派の対立を煽る「エディタ判定器」が面白いと評判 -INTERNET Watch はじめに 近年、twitterやFacebookなどのSNSやAmazonのレビューなどから得ら
日付フォーマットなど 日付系処理 - Qiita
/** * 日付をフォーマットする * @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(-2)); format = format.replace(/DD/g, ('0' + date.getDate()).slice(-2)); format
最近の行儀のよい JavaScript の書き方 - Qiita
JavaScriptは移り変わりの早い言語です。 もう1年以上経っていますし、記事のメンテもちゃんとできていないので、消し線を入れることにしました。 参考程度のために記事は一応残しますが、より新しい情報を読まれることをお勧めいたします。 はじめに --- 最近では JavaScript の実行環境はブラウザに限りません。（node.js, Web Workers） また、旧来のような <script> 経由でのロードもとうに古くなっています。今は CommonJS スタイルで、require を用いたモジュールのロードを行なうことがより良いとされています。 ですから、次のようなことは改める必要があります。 ~~- var YourModule = {}; などとして、外部から YourModule.hoge(); などと呼び出す書き方 this === window だと思うこと~~ 今回
Ractive.js の紹介 — KaoriYa
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のオブジェクトだけを操作すれば、上手いこと自動的に書き換えてくれる ことだと言えます。
JavaScript フレームワーク - ペパボテックブログ
フロントエンド周りの技術は驚異的なスピードで進化し、また多様化しています。それらを全てマスターするのは途方もなく大変なので、ペパボでは、社内のエンジニア・デザイナが「最低限これだけはおさえておこう」というスタンダードを文書化することにいたしました。社内向けを想定した文書ではありますが、社内のみに留めず多くの方に役立てたいと考えたため公開します。 この項目の担当 @hadashiA どうしてフレームワークを使う？ (1) ドメインロジックとプレゼンテーションの分離 (2) SPA（シングルページアプリケーション） 流行り廃り (1) MVC (2) MVVM (3) Virtual DOM どれを使う？ どうしてフレームワークを使う？ (1) ドメインロジックとプレゼンテーションの分離 まずこちらの画面を見てください。 ©任天堂 スーパーマリオワールド スーパーマリオが右にダッシュすると、マ
何故JSONPでJavaScriptのクロスドメイン通信ができるのか？ - プログラマでありたい
一人Advent Calendarの3日目です。 JSONPを使って外部のAPIを呼び出して、結果を取り込むということは色々なところで行われています。しかし、そもそもJavaScriptを利用した場合、クロスドメイン通信が使えないという前提があります。JSONPだったら、何故そこを回避できるのでしょうか？あまり詳しく考えたことが無かったので、簡単に調べてまとめてみました。なんというか4周くらい遅れている話題ですが、気がついた時に整理するとスッキリします。 JSONPの動作原理 Wikipediaさんをみてみると、そのものずばりのことが書かれています。scriptタグ内のsrc属性は別ドメインのURLを指定できるという点と、そのレスポンスはJavaScript関数呼び出し形式になるという点をついたのが、JSONPの動作原理です。なんというか、仕様の考慮不足を利用した仕組みだと思います。 JS
<input type=image>で送信すると、X,Y座標が送信されるので、調べたら闇だった - それマグで！
複数に分割されたログイン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スタックの基礎知識とインストール、ひな型作成
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 プログラ
JSファイル全体を括るfunctionについての話。（JavaScriptおれおれAdvent Calendar 2014 – 01日目） | Ginpen.com
これですね。これ何か呼び方あるの？ なにこれ グローバル変数にならないようにする仕組み。 スコープ問題 JavaScriptではスコープ（変数の有効範囲）は関数単位（function(){～}）になるのが基本。 そして一番外側、どの関数の中でもないものは「グローバルスコープ」に所属する「グローバル変数」となり、どこからでも利用できる変数になる。そうなるとどこかで変数の名前がかぶった際、勝手に値が変わったりして大変恐ろしい事になってしまう。 そこで、ファイル全体を関数で括る事でスコープを生成して、グローバルではない変数にしておこう、というもの。ただしvar宣言なしに変数を使い始めると、結局グローバル変数になってしまうので注意。 次世代JavaScriptだとletとかあるけど触れません、関係ないし。 関数の前後にくっついてる括弧は 関数は作成するだけでは何もならないので、即時実行してやります
JavaScript と altJS - ペパボのフロントエンドスタンダード
TypeScript について (1) 利用するメリット Java や C# のような文法の altJS です。下記に当てはまる場合は有力な選択肢です。 既存プロジェクトを altJS に移行したいとき JavaScript の文法そのままコピーして使用できるため 静的型付けをしたいとき 現状 TypeScript 一択です 新規の中・長期に渡る大規模プロジェクトのとき 静的型付やインターフェースを利用できるため (2) 利用上の注意 ただし TypeScript を利用する上で注意する点もあります。 コンパイルが遅い 型チェック等があるため、altJS の中でも特に遅めです this の用法が増える クラスのメンバ変数の参照には this.foo と記述します (3) サンプルコード // sample.ts module Saying { export class Greeter {
Alasql.js - オンメモリで動作するJavaScriptデータベース MOONGIFT
JavaScriptを活用したWebアプリケーションを開発している際に、一時的に保存したいデータをどのように扱うかは大きな問題です。何となく変数や配列、ハッシュに保存してしまいがちですが、そのデータの取り出しや更新が面倒だったりします。 そこで使ってみたいのがAlasql.jsです。JavaScriptだけで作られたクライアントサイド向けのSQLデータベースになります。 Alasql.jsの使い方 使い方の例。データを配列で放り込んで、SQLで取り出せます。 デーブルの作成を含めてSQLが書けます。 データはlocalStrageに保存することもできるので、再読込時に復元も可能です。 Alasql.jsはHTML5仕様の中で検討されていたWeb SQLとは異なる実装で、オンメモリで動きます。高速で動作し、かつデータはlocalStrageに保存しておくこともできるので容量は小さいながらも永
php×mongodbで配列のn番目の要素(index)について集計したいときメモ(find*cursorでゴリゴリ、groupby、aggregate*unwind) - tweeeetyのぶろぐ的めも
はじめに mongodbでのデータ集計で 配列のn番目の要素に関して集計したかったときのメモ 特にjsというよりはphpで この記事のサンプルのメインはjavascriptです。 実際はMongoDB PHP ドライバからMongoへアクセスする必要があったので javascriptで試す ↓ phpに置き換えてバッチとか作成 って流れでやったのでその所感もつづっておきます。 とはいえ文書だと説明しずらいのでまずは事例から 集計したい事例 集計したいデータ データは以前の記事で1億件つっこんでみたデータと同じものにしました ただしドキュメント数は100分の1(100万件)ほど。 どんなデータか ゲームやらなんやらでポイントGETするたびに１ドキュメントinsert insertされるのはポイントの総計と内訳 内訳は、[GETしたポイント + ボーナスポイント]の配列 ボーナスポイントはGE
生まれ変わるAngularJS - ワザノバ | wazanova
シングルページアプリ向けの各フレームワークをGoogle Trendで比較したグラフがLars Eidnesのブログに掲載されてますが、AngularJSの伸びが他を圧倒しています。一方で、アーキテクチャ上の課題は、コミュニティの声もあり、かつ当事者である開発チームも認識していたところ。そして、それに対する答えとしては、バージョン2.0で大幅に書き直すという流れになっています。 AngularJS 2.0については、「野心的だが険しい道のり」というタイトルの記事がGuardianに掲載されてますが、 ES6の採用 Web Componentsとの親和性のアップ （双方向バインディングをどうするかまだ決まってないが）Reactの考え方に近づいてきている （1.3のサポートはしばらく平行して続くと発表されたが）本当にスムーズな移行を提供できるのか? がポイントだとSeb Ceveyはまとめてい
TravisCI、SauceLabs、Protractorで始める簡単E2Eテスト入門 | チャットワーククリエーターズブログ
自転車通勤始めました。@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」を押してください。 ダイアログが
ゲーマーに朗報！900種類以上のアーケードゲームがブラウザでプレイできる「Internet Arcade」が公開
あの頃プレイしていたゲームが見つかるかも？ 僕は全くゲームをしないので見ても何1つ分からなかったが、好きな人にとっては1日中楽しめるほどの量がある。ゲーム900種類以上が無料でプレイできるのは相当だ。Internet Archive、凄い！ これはJavascriptでできる限り多くのシステムをエミュレートすることに注力している「JSMESS」プロジェクトの一環で進めらたサービス。全てのゲームが快適に動作するとは限らないが、懐かしみつつブラウザで遊ぶには十分なのかもしれない。 操作方法についてはTechCrunchに簡単な操作方法が紹介されていたので、まとめておく！ 「1」キー：「Player 1」でゲーム開始 「5」キー：コインを投入（アーケードゲームなので） 矢印キー：各種方向操作 「control」「alt」「スペース」キー：3つの主要ボタン 「タブ」キー：操作方法の表示 ゲーム機で
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JSON読込を並列にページ表示を高速化するJSライブラリ「Pegasus」:phpspot開発日誌
Adobe製のJavaScriptデバッガTheseusがすごい - Qiita
https://qiita.com/nyarla/items/10f0f3e3c2116417df59
