はてなブックマーク

gloops Advent Calendar 24日目 Merry Christmas!! gloops Advent Calendar 24日目です 23日目は @t_shibaki さんの「webのサーバーエンジニアがunreal engineをさわってみた」でした 昔と違ってプログラムを書かずにゲームが作れちゃうんですね。。すごい 早速ですが、タイトルだけ見ると「何を言ってるんだ？？」という感じだと思います 何がしたいかというと、ブラウザ(Service Worker)内で KoaJS 1 を実行しリクエストを処理させれば オフラインアプリに近いことができるのでは？と試してみたところ実現できたので、共有します (全然クリスマスっぽいネタじゃなくてすみません！) 概念図 初回のみ、ServiceWorker、ServiceWorker 登録用の HTML と JavaScript をサ

ポスタスと読みます post + sass の造語です Sass をコンパイルした後に 後処理(CSS の変換)を行うので、この名前をつけました https://www.npmjs.com/package/postass https://github.com/kanatapple/postass 作成した経緯 社内のエンジニアから「scssファイルを1個更新するだけでビルドが終わるのに8秒かかるので助けてください！」と依頼が来たので、この記事とか参考にいろいろ試したんですが、自分の環境ではなぜか高速化できませんでした さらに、コンパイルした後に CSS に変換をかけたい(ベンダープレフィックスの付与、URL書き換えなど)という要望もあったので、「それなら、そういうツール作っちゃおう」と思ったのがきっかけです (ちなみにこのツールを使うことで、ビルド時間が8秒 -> 0.x秒になり、残業時間

Node.jsをデバッグする時は「node-inspector」を使うことが多いです node-inspector ですが、「node-nightly」版を使うと「node-inspector」なしでデバッグすることが可能です！ v6.3.0で標準実装されました！(2016/07/07追記) 準備 ダウンロード 「node-nightly」版を落としてきます [https://nodejs.org/download/nightly/v7.0.0-nightly20160621ecc48a154d/] ↑ここに環境ごとのバイナリファイルがあるのでダウンロードします 解凍

Service Workerとは ブラウザが Web ページとは別にバックグラウンドで実行するスクリプト オフラインのアプリを実現・サポートするために作られたものです ちなみに、ブラウザの対応状況はこんな感じ http://caniuse.com/#search=service%20workers 特徴 DOM にアクセスできない DOM を操作したい場合は、Service Worker がコントロールしているページ(js)と postMessage でメッセージのやり取りをして行う リクエストをプロキシすることが可能 Service Worker はブラウザが必要に応じて起動・終了するので、変数の値を保持しておけない Cache、IndexedDB 等で値を保存して、必要になった時に取り出すようにする Promise を多用する https か localhost 上でしか動作しない ラ

httpsのページを作るには証明書を置いたりしないといけないので ちょっとめんどくさかったりします Github pagesはSSLに対応しているので、簡単に作成することが可能です Github Pagesではユーザー用とプロジェクト(リポジトリ)用の２種類が作れます ユーザー用 ユーザー用のページはアカウントにつき１つ作れます リポジトリ作成 (username).github.ioというリポジトリを作成します READMEファイルは必要ないので、「Initialize this repository with a README」には チェックはいれません ファイル配置 次に、masterブランチに配置したいHTMLファイルをコミットします ↓こんな感じで [https://github.com/kanatapple/kanatapple.github.io] アクセスしてみる ユーザー

記事の内容をrc.4に対応しました 動作サンプルについてはまだBeta版のままなのでご了承ください (2016/08/04) Angular2(rc.4)の使い方について簡潔にまとめてみました 細かい部分は省くので、公式サイトやQiita内に素晴らしい記事があるので そちらを参考にしてください インストール npm install @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected]

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? ChromeのDeveloper Toolsの説明です 投稿時のバージョンは「45.0.2454.101 m」です 表示方法 Windows：F12 or Ctrl+Shift+I Mac：Command+Option+I または、右クリックして「要素を検証」を選択 画面の説明 ①虫眼鏡。要素をマウスで選択できる ②デバイスモード。UserAgentの偽装、スマホのエミュレーション、ネットワークのエミュレーションが可能 ③パネル。各機能の切り替え ④ドロワーの表示切り替え。Developer Toolsの下部にConsole、Searc

Chrome Developer Toolsの便利機能の説明です Workspace CSS、JavaScriptを編集してそのままローカルに保存できます 設定ダイアログのWorkspaceで設定します 使い方 Add folderをクリックしてローカルにあるフォルダを選択 ウィンドウ上部に 「デベロッパー ツールでは ***** へのフルアクセスがリクエストされます。機密情報の漏洩にご注意ください。」 と表示されるので、問題なければ許可を選択 Sourcesパネルにローカルのフォルダが追加されます マッピングしたいファイルを選択し右クリックして、「Map to file system resource」をクリックすると 対応するローカルファイルが選べるようになってるので選択する 選択すると、再起動の確認ダイアログが表示されるので問題なければOKを選択 マッピングしたファイルをDevelo

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Chrome Developer Toolsを使ったWebページのパフォーマンス計測・改善についての説明です Networkパネル、Timelineパネル、Profilesパネルの使い方を説明してから パフォーマンスの計測・改善について説明していきます Networkパネル Networkパネルはページのリクエストをしてからの通信内容の一覧を表示します 記録方法 左上のRecordボタンを押すと記録が始まる もう一度押すと記録が停止する 必要に応じて、Disable cacheやCapture screenshotsを設定する 表示項目