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

find 検索

51 - 60 / 1297    [|<]  [|<]  [<]  1  2  3  4  5  6  7  8  9  10   [>]  [>|][>|]
タイトル/名前 更新者 更新日
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
技術/Chrome/Remote Debugging Protocol msakamoto-sf 2017-02-12 12:19:45
技術/Chrome/ユーザデータの保存場所、インストールしたChrome拡張の展開先 msakamoto-sf 2017-02-12 12:19:11
技術/HTML/iframeを半透明にする練習 msakamoto-sf 2017-02-12 12:07:47
ソート項目 / ソート順     1ページ 件ずつ表示

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

技術/Chrome/Remote Debugging Protocol  

所有者: msakamoto-sf    作成日: 2015-03-07 20:41:13
カテゴリ: Chrome JavaScript 

2015-03現在、Chromeではリモートデバッグ機能がある。スゴイ。
NetBeans7.4あたりを試した時に、HTML5プロジェクトのデバッグするとChromeが立ち上がり、NetBeans上からJSにブレークポイント設定できたりステップ実行できて「ナニコレすごい、どうなってるの?」と思ったものだが、どうもこの機能を使っているようだ。

参考:

chrome単体でもリモートデバッグを体験できる。Chromeに"--remote-debugging-port=NNNN"オプションをつけると、そのポート番号でDevTools画面を提供してくれるため、他のChromeから localhost:NNNN にアクセスするとDevTools画面が表示されデバッグできる。

1. まずchrome.exeがどこにあるか調べる。Winならタスクマネージャからchrome.exeのプロパティを開いてフルパスを確認する。
今日試してみたら、以下の場所にあった。

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

2. デバッグ対象のchromeを起動する。"--remote-debugging-port=NNNN" オプションを付けてあげる。また、"--user-data-dir=<some directory>" でユーザプロファイルを分離してあげるとクリーンな状態のChromeをデバッグ出来るので良さげ。
→コマンドプロンプトから起動してみる。

> cd C:\Users\(ユーザ名)\AppData\Local\Google\Chrome\Application
> chrome.exe --remote-debugging-port=9222  --user-data-dir=c:\work\temp\chrome-test-profile1

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

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

http://localhost:9222/

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

実際のデバッグコマンドについては、WebSocketで接続してJSONメッセージをやりとりしている。
もし自分なりのデバッグクライアントを作りたい場合は、まずデバッグ対象のchromeを起動し、以下のURLで 4. の"Inspectable pages" の結果と同じJSONを取得する。

http://localhost:9222/json

→例:

[ {
   "description": "",
   "devtoolsFrontendUrl": "/devtools/devtools.html?ws=localhost:9222/devtools/page/AC37C271-FFCA-4B84-A731-0A66D36FAC48",
   "id": "AC37C271-FFCA-4B84-A731-0A66D36FAC48",
   "title": "Example Domain",
   "type": "page",
   "url": "http://www.example.com/",
   "webSocketDebuggerUrl": "ws://localhost:9222/devtools/page/AC37C271-FFCA-4B84-A731-0A66D36FAC48"
}, {
   "description": "",
   "devtoolsFrontendUrl": "/devtools/devtools.html?ws=localhost:9222/devtools/page/6590A241-CB03-4F2B-9584-11170006F771",
   "id": "6590A241-CB03-4F2B-9584-11170006F771",
   "title": "技術/HTTP/Fenix Web Server (静的ページ開発用ローカルWebサーバ) - Glamenv-Septzen.net",
   "type": "page",
   "url": "http://www.glamenv-septzen.net/view/1364",
   "webSocketDebuggerUrl": "ws://localhost:9222/devtools/page/6590A241-CB03-4F2B-9584-11170006F771"
} ]

→webSocketDebuggerUrlがRemote debugging protocolで規定されたデバッグメッセージをやりとりするWebSocketのURLなので、好きな言語・好きなWebSocketクライアントライブラリでアクセスし、JSONメッセージをやりとりする。

どんなメッセージがあり、どういう仕様かは冒頭の参考リンク、"Remote Debugging Protocol 1.1" で網羅されている。およそDevToolsでできることはひと通りできる。

オリジナルのデバッガを作りたい場合は冒頭の参考リンク、"Showcase Chrome Debugging Protocol Clients" を見ると良さそう。GitHubでソースが公開されているものも多い。複雑な凝ったものもあるが、以下のプロジェクトはシンプルなpythonコードになっていて、まずはこの辺りを参考にして組み立てていくと良いかも。



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

技術/Chrome/ユーザデータの保存場所、インストールしたChrome拡張の展開先  

所有者: msakamoto-sf    作成日: 2015-04-27 12:16:48
カテゴリ: Chrome JavaScript 

ChromeのブックマークやインストールしたChrome拡張はどこに保存されるか?
ちょっと気になったんですが、Chromiumのサイトで、以下のページでデフォルトの保存場所が記載されてました。

Chrome拡張は上記ユーザデータ保存場所に、さらに "Extensions" フォルダが作成され、その中にextensionごとのIDでフォルダが作られ、展開されてます。
extensionごとのIDを調べる方法ですが、簡単なのは "Chrome Apps & Extensions Developer Tool" をインストールして起動します。

続いて以下のスクリーンショットのように、"Extensions"タブを表示すれば、拡張の一覧とそのIDが表示されます。(2017年2月時点のChrome56 + Win10 でスクリーンショットを撮り直してます)


なお "Chrome Apps & Extensions Developer Tool" を使えばbackgroundページをDevToolsで開いてデバッグできたり、permissionを確認できたりしますので、Chrome拡張の開発でも便利です。



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

技術/HTML/iframeを半透明にする練習  

所有者: msakamoto-sf    作成日: 2015-04-27 12:07:20
カテゴリ: HTML 

クリックジャッキング対策の勉強で、まずはiframeを半透明にする練習をしてみました。

http://jsfiddle.net/msakamoto_sf/75dxt97e/

iframeのopacity設定に加え、positionとz-indexの調整、さらに実際にうまく位置合わせするための座標設定など、結構細かい調整が必要でした。



プレーンテキスト形式でダウンロード
現在のバージョン : 1
更新者: msakamoto-sf
更新日: 2017-02-12 12:07:47
md5:b8ee6da757071075c3cd9d3d1f1a40a4
sha1:490bf182efba59eeb35be812279f77f635b7c727