home ホーム search 検索 -  login ログイン  | help ヘルプ

find 検索

51 - 60 / 1300    [|<]  [|<]  [<]  1  2  3  4  5  6  7  8  9  10   [>]  [>|][>|]
タイトル/名前 更新者 更新日
JavaScript/参考メモ/asm.js(2015-03時点) msakamoto-sf 2017-02-12 16:22:20
JavaScript/参考メモ/altJSとtranspiler(2015-03時点) msakamoto-sf 2017-02-12 16:21:07
JavaScript/参考メモ/VirtualDOM(2015-04時点) msakamoto-sf 2017-02-12 16:20:54
JavaScript/参考メモ/Polyfill(2015-03時点) msakamoto-sf 2017-02-12 16:20:42
JavaScript/参考メモ/Promise関連(2015-04時点) msakamoto-sf 2017-02-12 16:20:28
JavaScript/参考メモ/Data Binding, ObserverパターンとVue.js(2015-03時点) msakamoto-sf 2017-02-12 16:20:11
技術/Chrome/初期設定で起動する(--user-data-dir) & リモートデバッグ可能にする(--remote-debugging-port) msakamoto-sf 2017-02-12 16:18:14
技術/ソフトウェア設計/MVVM(Model View ViewModel)デザインパターンとData Bindingの参考URLメモ(2015-03時点) msakamoto-sf 2017-02-12 16:11:02
技術/Chrome/Chrome Extension の勉強メモ(copy_tab_urls) msakamoto-sf 2017-02-12 12:20:17
技術/Chrome/DevToolsの拡張 msakamoto-sf 2017-02-12 12:20:00
ソート項目 / ソート順     1ページ 件ずつ表示

JavaScript/参考メモ/asm.js(2015-03時点)  

所有者: msakamoto-sf    作成日: 2015-03-29 16:21:31
カテゴリ: JavaScript 

asm.jsについての参考URLのメモ書きです。

  • asm.jsとは:最適化のために、専用の制限を加えたJS仕様と、その最適化処理系。らしい。
  • C/C++で記述したコードをJSに変換できる。C/C++で書かれた純粋なデータ処理ロジックをそのままJSに持ち込めるので、画像処理や音声データ処理で蓄積されたC/C++の資産をJSでも活用できる。
  • 例としてC/C#などで画像処理アルゴリズムを記述して、それをLLVM-IRに吐き出し、それをJSに変換、そこまで行けばasm.jsで最適化することで、ブラウザアプリから高速にそうしたアルゴリズムを利用可能になる。
  • 類似技術としてはPNaClという、ネイティブコードをブラウザ上で動作させる技術がある。

参考:



プレーンテキスト形式でダウンロード
現在のバージョン : 1
更新者: msakamoto-sf
更新日: 2017-02-12 16:22:20
md5:3b443a67fff913f70472476f0d480462
sha1:62ce681433b03a8da219cdb1edb1e4f411984a14

JavaScript/参考メモ/altJSとtranspiler(2015-03時点)  

所有者: msakamoto-sf    作成日: 2015-03-30 16:00:40
カテゴリ: JavaScript 

altJSやJavaScript transpiler (ES6で書いたのをES5に変換する) 界隈、現在どうなってるのかググって参考URLのメモ(2015-03時点)。

altJSの一覧, 比較資料

メジャーなaltJSの公式URL、参考記事

JavaScript Transpiler



プレーンテキスト形式でダウンロード
現在のバージョン : 1
更新者: msakamoto-sf
更新日: 2017-02-12 16:21:07
md5:2167dbccd7fd2f6fba23fc9bf9d387a8
sha1:461e762dacd3f71586962279078bf86dbead607b

JavaScript/参考メモ/VirtualDOM(2015-04時点)  

所有者: msakamoto-sf    作成日: 2015-04-29 11:54:10
カテゴリ: JavaScript 

JavaScriptでのVirtualDOM参考URLメモ(2015-04時点)。

いくつかVirtualDOMの機能を取り込んだメジャーなライブラリがある。Facebookのreact.jsがその一つ。他にもReactive.jsというのがあるが、この辺りはreactiveプログラミングのライブラリの中にVirtualDOM機能を含んでいる。もちろんVirtualDOM単体のライブラリもあり、そのへんもmizchi先生のQiita記事で触れられてる。

とりあえず2015年時点なら、このAdvent Calendarの記事全部目を通せば大体勉強できそう:

React・・・じゃない、Reactive.jsを使った動くサンプルコードをjsfiddleで公開してくれてるので、分かりやすい記事:

JS界隈のエッジな記事は、日本だとQiitaに集まってる気がするので。とりあえずggrksかQiitaで検索すれば良さそう:



プレーンテキスト形式でダウンロード
現在のバージョン : 1
更新者: msakamoto-sf
更新日: 2017-02-12 16:20:54
md5:68e0baa21fe6ed3fa6ad5fe4a76328c1
sha1:315d87e04dadb88e18b111dd831d0375a257a80a

JavaScript/参考メモ/Polyfill(2015-03時点)  

所有者: msakamoto-sf    作成日: 2015-03-29 16:06:10
カテゴリ: JavaScript 

JavaScriptの"Polyfill"ってなんなのかググった参考URLのメモ。

要するにHTML/JS/CSSの最新仕様や、まだドラフトとか提案段階の機能を、古いブラウザとかでも先取りして動かせるようにしてくれるライブラリをまとめて "Polyfill" というカテゴリで扱ってるらしい。

そのため、SVGだとかWeb ComponentsだとかCSS3の一部の機能だったりとか、ピンポイントで先行実装したライブラリが何種類も、それぞれ勝手に開発されて流行り廃りしてる状況。

ただし、古いブラウザでもできることに限界があったりするので、どこまでの機能を提供してくれるのか、要注意らしい。



プレーンテキスト形式でダウンロード
現在のバージョン : 1
更新者: msakamoto-sf
更新日: 2017-02-12 16:20:42
md5:f5bcea04d915d10642b3a6ff3082a230
sha1:4aca3392f9beea6a3ed43f432af192afe0d38f3f

JavaScript/参考メモ/Promise関連(2015-04時点)  

所有者: msakamoto-sf    作成日: 2015-04-29 11:57:11
カテゴリ: JavaScript 

JavaScriptのPromiseの参考URLメモ。

ES6で正式登場、ブラウザによっては一部機能先行実装。未対応のブラウザでも、Polyfill(互換実装)あり。

概要とか、ひと通りサンプルコード付きで分かりやすかった学習サイト:

初期の仕様とりまとめサイトとか、MDNとか:

その他入門系:



プレーンテキスト形式でダウンロード
現在のバージョン : 1
更新者: msakamoto-sf
更新日: 2017-02-12 16:20:28
md5:f7624e0e960b6dd5ede31638ceec2b87
sha1:f6f94dd03934b627dcdf76ffa6584b8e9abeae67

JavaScript/参考メモ/Data Binding, ObserverパターンとVue.js(2015-03時点)  

所有者: msakamoto-sf    作成日: 2015-03-29 16:12:06
カテゴリ: JavaScript 

JavaScriptでのData Bindingってどうしてるのか、軽くググってみたところObserverパターンの応用であり、JSでのライブラリの代表例としてVue.jsというのがありましたので、2015-03時点で参考URLをメモ。

  • 技術/ソフトウェア設計/MVVM(Model View ViewModel)デザインパターンとData Bindingの参考URLメモ(2015-03時点) でもWPFの世界の参考記事をいくつかググって並べたが、One Way / Two Way / Once の3種類位あるらしい。
  • One-Way は単方向。Two-Wayが双方向。Onceは最初の一度きり、という具合に使い分けされてるらしい。
  • 実装としては、Observerパターンを使って、オブジェクトの変更イベントを購読(subscribe)して、データの変更やViewの変更イベントをお互いに伝え合う形。
  • JSで開発する場合は、Two-Wayの利用頻度が高めなのかも。

JavaScriptとObserverパターン

JavaScriptでObserverパターンはどう作るか?いくつか、実際にサンプルコードで例示してくれてる記事が見つかった。

JavaScriptでのData Bindingのサンプル

参考:

その他、Stack Overflowより:

Vue.jsの参考URL

2015-03現在、Observerを基盤としたDataBindingと、さらに一部ではReactなどのパラダイムを取り入れたライブラリ・フレームワークが百花繚乱なのがJavaScript界隈のホットな現状。
その中で、Vue.jsを使ったMVVMとData Bindingのサンプルがいくつか見つかったので、メモ。



プレーンテキスト形式でダウンロード
現在のバージョン : 1
更新者: msakamoto-sf
更新日: 2017-02-12 16:20:11
md5:49701b4f3571d036de79ed6059916486
sha1:09bb8cc1a48a60430ddc9acbc5016e8200cd3753

技術/Chrome/初期設定で起動する(--user-data-dir) & リモートデバッグ可能にする(--remote-debugging-port)  

所有者: msakamoto-sf    作成日: 2015-03-29 16:16:17
カテゴリ: Chrome JavaScript 

(1) まずchrome.exeがどこにあるか調べる。Winならタスクマネージャからchrome.exeのプロパティを開いてフルパスを確認する。2015-03-29時点で試してみたら、以下の場所にあった。インストール時の状況や環境によって変わるかも。

C:\Users\(ユーザ名)\AppData\Local\Google\Chrome\Application\chrome.exe

(2) 初期状態とするため、空のプロファイルディレクトリを作成する。"c:\work\temp\chrome-test-profile1" というフォルダを作成したら、"--user-data-dir" オプションに指定して起動する。
コマンドプロンプトを開き、以下のように実行する。

> cd C:\Users\(ユーザ名)\AppData\Local\Google\Chrome\Application

> chrome.exe --user-data-dir=c:\work\temp\chrome-test-profile1

(3) リモートデバッグを行いたい場合は、"--remote-debugging-port=NNNN" オプションを付けて以下のように起動する。

> cd C:\Users\(ユーザ名)\AppData\Local\Google\Chrome\Application

> chrome.exe --remote-debugging-port=9222 --user-data-dir=c:\work\temp\chrome-test-profile1

(4) 起動したchromeウインドウで、試しに何かデバッグしたいWebサイトを読み込んでみる。

(5) デバッガとして操作するChromeを起動し、"--remote-debugging-port" に指定したポートでlocalhostにアクセスしてみる。 上の例なら以下にアクセス:

http://localhost:9222/

→ "Inspectable pages" という画面で、デバッグ対象chromeで表示しているタブ一覧が表示される。デバッグしたいタブをクリックすると、対応するDevTools画面が表示される。



プレーンテキスト形式でダウンロード
現在のバージョン : 1
更新者: msakamoto-sf
更新日: 2017-02-12 16:18:14
md5:8702cfdc0bc28508ea7a5c3577501d9a
sha1:f68819a3a9f390f1e8142536a1f0def0af572d9d

技術/ソフトウェア設計/MVVM(Model View ViewModel)デザインパターンとData Bindingの参考URLメモ(2015-03時点)  

所有者: msakamoto-sf    作成日: 2015-03-29 16:09:29
カテゴリ: Java JavaScript システム開発 プログラミング 

Web開発でもJSのライブラリやフレームワークで目にするようになったMVVM(Model View ViewModel)とかData Binding って何だろう、とぐぐったので、2015-03時点の参考URLのメモ。

  • WPF(Windows Presentation Foundation)やSilverlightの世界で生まれた考え方らしい。
  • そのため、MSDNとかWindows系の開発者のblog等で丁寧に動作原理を解説してる記事が多い。
  • Model View ViewModel - Wikipedia

分かりやすかった:

MSDNの固めの解説記事:

  • Model-View-ViewModel (MVVM) パターンの使用 - Windows app development
  • 5: Implementing the MVVM Pattern Using the Prism Library 5.0 for WPF

MVVMとData Bindingの関連性の自分なりの認識:

  • MVVMのキーとなるのがObserverパターンであり、この応用としてData Bindingがある。
  • View と ViewModelはData Bindingで結ばれている、つまり双方向でObserveな関係(誤解してるかもなので、今の時点でのイメージ的な言い回し)。
  • Viewへの変更イベントはそのままViewModelへ通知され、ViewModelが対応するModelをアップデートする。
  • 逆に、別のコードからのModelへの変更はそのままViewModelに通知され、ViewModelが適切なPresentationに変換してViewに通知する。

Data Bindingについては、以下の記事が基本的な作りを解説してくれてて分かりやすかった:

ただ、Observeによる処理の流れでは、重い処理が間に入ると流れがそこで止まってしまう。そのためマルチスレッドで重い処理を切り出すなどの工夫が必要となる。

MVVMにおけるマルチスレッド処理の活用について、いくつか参考になりそうな記事が見つかったのでメモ:



プレーンテキスト形式でダウンロード
現在のバージョン : 1
更新者: msakamoto-sf
更新日: 2017-02-12 16:11:02
md5:df90cdd84ede766c83ee27ca2509fb6f
sha1:b009a4d11d9f7c6a7fa26b82332f66409e8f064b

技術/Chrome/Chrome Extension の勉強メモ(copy_tab_urls)  

所有者: msakamoto-sf    作成日: 2015-02-28 23:04:43
カテゴリ: Chrome JavaScript 

前から作ってみたい簡単なChrome拡張のアイデアがあったので、Chrome拡張作るのの勉強に、作ってみた時のメモ。

やりたかったこと:

そのウィンドウで開いてるタブの、タイトルとURLを、あるフォーマットにしたがって一覧化したい。
技術系のblog書いてる時とかに、参考URLのリストを、開いてるタブから集約したい時に使う。

chrome.tabs.query()で現在ウインドウのタブの一覧を取り出せる:

また、フォーマットはカスタマイズ出来るようにしたい。
→インストール時に初期化して、オプションページで保存したり、デフォルトに戻したりしたい。
→localStorage + backgroundのeventpageで実現できた。

ソース:
https://github.com/msakamoto-sf/copy_tab_urls

Chromeストア:
https://chrome.google.com/webstore/detail/copy-tab-urls/dpddcgncoldfnleboobgkogkjnbdofce


以下、参考URL

入門系:

manifest.json:

デバッグ方法:

拡張のサンプル沢山:

設定をlocalStorageに保存:

インストールやアップデートされた時に何かしたい(イベント):

公開への流れ:



プレーンテキスト形式でダウンロード
現在のバージョン : 1
更新者: msakamoto-sf
更新日: 2017-02-12 12:20:17
md5:b5bb00d8e0fc8190b6ba495340517e4e
sha1:0d155d5b98925c4164598d6b52ea2616d48372a5

技術/Chrome/DevToolsの拡張  

所有者: msakamoto-sf    作成日: 2015-03-08 14:00:13
カテゴリ: Chrome JavaScript 

ChromeのDevToolsに独自の機能を追加できる。

拡張できる内容としては次の三箇所。

  1. DevToolsに独自のパネルを追加 : devtools.panels API
  2. デバッグ対象のウインドウに独自のJSコードを追加したり、JSを実行させる : devtools.inspectedWindow API
  3. ネットワーク通信のHTTPデータにアクセスする : devtools.network API

以下、それぞれのリファレンスページ:

APIとしては機能が絞られている。これらのAPIは主としてDevToolsの拡張ポイントを提供しているものなので、中身や、実際に何をしたいのかについては他のAPIを活用する必要がある。

以下に実際に公開されているDevToolsの拡張例が紹介されている。AngularJS, Ember.js, Grunt, CoffeeScript, Knockout.js, Rails など、FWやJSライブラリのデバッグを支援するためのDevTools拡張が公開されている。

実際にDevTools拡張を作るとなると、以下の"devtools"キーワードで絞り込んだサンプル一覧から、いくつか参考にすることになりそう。

なお注意点として、"devtools" APIはデバッガ機能それ自体のAPIではない。ブレークポイントを設定するなど、より本格的なデバッガ機能を駆使したい場合は、以下のdebugger APIを使う。

なおdebugger APIはRemote Debugging Protocolとも関連しているので、併せてそちらのドキュメントも確認するとよさげ。



プレーンテキスト形式でダウンロード
現在のバージョン : 1
更新者: msakamoto-sf
更新日: 2017-02-12 12:20:00
md5:cd9403b5328d5215b271b15d36759693
sha1:f03685e1cd948361c911e0b1a67155f3ee6c14f8