メインコンテンツに移動
- サイズが小さくて大量な音声データはデータベース（例：MySQL）に格納したほうが良い
- 音声データをbase64でエンコードしてブラウザに転送してaudioタグで再生
- 問題点：以前Fontelloで作成したアイコングループに新規アイコン追加は難しい
- 解決：Fontelloサイトでアイコンインポート機能で以前のアイコングループを丸ごとインポートします
- やりたいこと：行(tr)をクリックしたらその行にあるチェックボックスがチェックされるようになる
- 問題点：チェックボックスをクリックしても反応しない
- 原因：チェックボックスと行(tr)がクリックイベントより二重動作してしまいました
- iframeの非表示(X-Frame-Options:Deny)の問題
- 回避方法：レスポンスのヘッダーにある設定(X-Frame-Options)を無視するプラグイン導入
- やりたいこと：javascriptからiframeの内容を取得したい
- 問題点：ブラウザがjsからiframeへのアクセスをブロック
- 回避方法：ブラウザのセキュリティポリシーを一時的に無効化
- イベント発生場所の座標：offsetX/Y,clientX/Y,pageX/Y,screenX/Y
- 参照オブジェクトの違う座標を理解する
- htmlにあるエレメントの座標(例：offsetX/Y)と違う
- HTMLのメタタグ(viewport)の設定で違うサイズのブラウザにコンテンツ表示の最適化
- メタタグ(viewport)の幅設定に固定な値を避けたほうが良い
- メタタグ(viewport)のスケール(initial-scale)設定に注意
- メタタグ(viewport)とcss(media)を併用すればより効果的
- やりたいこと：オブジェクトが弾む効果の作成
- 実現構想：d3.forceLinkのバネ効果を利用します
- ポイント１：d3.forceLinkにつなぐ一つノード（node）を固定します
- ポイント２：関数（datum()）で固定しているオブジェクト（bbb）を決まった場所（四角）に再固定します
- d3.forceLinkがオブジェクト要素間のバネの伸縮効果の再現
- 作成要点１：オブジェクト要素のリンク元（source）ターゲット先（target）設定
- 作成要点２：d3.forceSimulationでd3.forceLinkを定義
- 作成要点３：d3.tickイベントのリスナーでリンクの描画要素（line）の始点/終了設定
- d3.dragモジュールがオブジェクトのドラッグ、オブジェクト移動、ドロップを管理しています
- d3.jsのイベント（start, drag, end）のキャッチと処理ロジックを作成すればドラッグ管理ができます
