［viewpoint］SEOを知る

［viewpoint］SEOを知る

　Google SearchConsole

• Google SearchConsoleに登録することから始まる
• 検索エンジンがページを呼び込みにきているかどうか確認する

　使用する機能

• クロールエラー
• クロールの統計情報
• robots.txtテスター

　サイトマップを追加する

• 新規→プロパティの追加→サイトマップの追加/テスト
• http://□□□□□/sitemap.xml
  稀に上記設定で検索エンジンの呼び込みができるが
  通常はサイトマップを作成し追加する
  ＊ ex『 XML-Sitemaps.com』
• sitemap.xml：ディレクトリを読み込む
• robots.text：サーバーを制御する
• Disallow;* ：一度命令がかかると約三ヶ月検索エンジンの書き換えがされない
• URLの削除：googleのサーバーからURLを削除する

　Googleアナリティクス

• 集客：コンバージョンを計る
• 行動：

［Today's viewpoint］

　サイト制作の覚書

• 通信販売広告について必ず特定商取引法に基づくこと
  ＊ ex『http://www.no-trouble.go.jp/』
• 現在性が本質的に重要。つまり「今何ができるのか？」。過去は所詮過去
• 動画を掲載する場合は『Youtube』が好ましい
• 万人が見ているページは存在しない（ターゲットユーザーを絞る）
• インターネットに本当に価値のある情報は載せない
• シンプルとは？
  必要十分な情報群から不必要な部分を削ぎ落とすことで成り立つ
• ブログは上位表示されない流れになっている（Googleはアルゴリズムを変える）
• ページで押されるのは所謂「HOME」と「topへ戻る」
• ネットサーフィン＝目的もなくふらふらすること
• fc2はアダルトのスクリプトが書き込まれるので使わない
• wordpressの価値=情報の更新ツール
  CMSは情報の管理ツールと位置づける
• 参考書『これからはじめるSEO内部対策の教科書』

［Flash］減速スライド

［Flash］

• 画像処理
• コーディング

• オブジェクト指向（ブラウザのデータを軽くする）

　　・ライブラリ（オブジェクト）

　　・ステージ（インスタンス）

• ActionScriptでthisはステージを指す（神様の視点）。thisはいろいろな環境のなかで使い回しができる
• jQueryでthisは自分自身を指す。ActionScriptと役割が違う

　

［作成例］

　減速スライド

　動くものと動かないものはレイヤーを分ける

［Today's viewpoint］

　ワイヤーフレームとモックアップを考える…その前に…

　　UI（デザイン）を考える

• Webデザインの価値・商品価値、つまりWebの目的を達成する

　　心理学を学ぶ

• モノを使う意味を考える

　　・色彩心理学→色彩計画

　　　神学的～物理学的（ニュートン力学）な範疇のものの概念を理解する

　　・行動心理学→アフォーダンス

　　　ex.グラデーションを使う意義

　　・知覚心理学→五感（UX、何を体感させるのか？）

　　　コントラストが際立つものが優先され、色彩は付加情報とする

　　　exアニメーションを使う意義

　　MacとWindowsで色に差が出るのはなぜ？

　　　色を再現する際には基準があるが、商品を売るためには基準より思想が重視されているから。

• 業界内の色彩感覚はある種の魔術的な価値により決定される（ヒッピーの潮流）

• 状報（情報）：福沢諭吉による定義。本来ものの状態を定義する意味合いを示す

• テクネ（スクリブル）：象形的なものからデザインを発見する

• KISS の原則："Keep it short and simple" （簡潔に単純にしておけ）→マルチデバイス対応

　　ワイヤーフレーム（InformationArchitect）を考える

• Sketch→Wireframe→Mockup→Prototype
• 色（写真）を挿入せずにデザインする
• 幅を決めること肝心（とくにマルチデバイスは幅を基準とする）
• 『960GridSystem』など使えるツールを試してみる

［jQuery］セレクタ / animate

［jQuery］

　jQueryの習得で大事なことは結果を想像すること

1. 値を取得する
2. 取得した値をメソッドで実行

• prepend / append / before / after

• attr()：属性に値を設定、または設定されている値を取得する
• return false：clickイベントを実行した後にリンク先に移動するのを防ぐ

• thisの概念：イベントが発生した場所を自分自身が感知したとき自身がthisになる

• ddをhide()：全てを隠す
• 一番目のdd以外のddはhide()：('dd:not(dd:first)').hide();

［Today's viewpoint］

　ネットワークの向こう側にいる人とコミュニケーションをとれるか？

• 大前提としての…

　　・インターネット＝人間の欲望を満たすツール

　　・ホームページ＝情報の価値をつくるツール

• UIからUXへ

　　・単純に派手な打ち出し方は飽きられる

　　・ホームページを通して体験、つまりイベントを学習する

　　・イベントをつくためにjQueryを習得する

［jQuery］jQueryを知る

［jQuery］jQueryを知る

　jQueryの主な特長

• JavaScriptのライブラリのひとつ
• HTMLやCSSを操作して、要素・属性・スタイルを追加・変更・削除できる
• 要素に対してアニメーションできる
• 主要なブラウザをサポート（ブラウザ依存を気にしなくてよい）
• jQueryのバージョン
  

  ・1. x系
  ・2.系（jQuery2：IE8以前のサポートを除き軽量化）

• JavaScriptでのDOMの変数化処理が不要

• 管理フォルダーの「js」フォルダー内に保存してパスを記述する
  <script src="js/jquery-1.11.3.min.js"></script>

　セレクタ

　　名前、属性、状態などによりドキュメント内の要素を選択する役割

• $( 'セレクタ' ) . メソッド ( パラメータ );

• width(100)とcss('width','100px')は同義。第二引数がある場合書き方が変わる

［作成例］

• 親>子：子のうち長男を指す
• 親 子 / 親 *：子の全部を指す

　on / load

• on()：()内のイベントを実行
• load（1回イベントを実行）：</html>（ページ全部）を読み終わったとき
• onハンドラ（マウスイベントを実行）：マウスが～したとき
• preload：画像などを予めページに読み込んでおく

［作成例］

　メソッド

　・hide()メソッド：表示されている要素を非表示にする

　・show()メソッド：非表示されている要素を表示にする

　・show()メソッドとhide()メソッド：「表示・非表示」をclickイベントで実装する

• 引数がない場合は、即座に非表示
• キーワードは、「slow」「normal」「fast」のいずれかを記述
• 秒数で指定する場合は、「1000」が１秒

　・fadeOut()メソッド：表示されている要素をフェードアウトする

　・fadeIn()メソッド：非表示されている要素をフェードインする

　・slideDown()メソッド：非表示されている要素をスライドダウンで表示する

　・slideUp()メソッド：表示されている要素をスライドアップで非表示にする

　・slideToggle()メソッド：要素の表示・非表示（ON/OFF）を切り替える

• 「display: none」のある・なしで表示・非表示を切り替える
• バージョン1.8以前で使用可。それ以降は不可

 

　タテ運動 / ヨコ運動

• タテ運動：重力 / liner：display: none; → display: block;で表す

1. hide()メソッド
2. show()メソッド
3. slideDownメソッド
4. slideUpメソッド

• ヨコ運動：摩擦 / swing

　・animate()

［作成例］

［JavaScript］Styleオブジェクト

［JavaScript］

　Styleオブジェクト

　　要素の style 属性に相当するオブジェクトを返す

［作成例 その１］

　　var 変数(id名を取得) = document.getElementById('');

［作成例 その２］

［作成例 その３］

　デジタル時計を表示する

［Today's viewpoint］

• JavaScriptは実感を伴うことが大切！
• わからないことをわからないようにする。間違った部分を修正する

［JavaScript］DOM / DOM based XSS

［JavaScript］

　DOM（Document Object Model）　

• HTML文書をオブジェクトとして読み込んで操作するための仕組み
• Documentオブジェクトが持つ要素の構造そのもの、あるいはそれらにアクセスしたり操作したりする機能

　XSS（Cross Site Scripting）脆弱性

• 攻撃者の悪意ある入力データ（JavaScriptなど）がサーバサイドでのエンコードや削除をすり抜けてクライアントにアウトプットされるというもの

　XSSのタイプ

1. 悪意ある入力データが直ちに画面に出力される（サーバサイドを経由）
2. 悪意ある入力データが一旦サーバにデータとして保存された後に画面に出力される（サーバサイドを経由）
3. DOM Based XSS（サーバサイドを経由しない）

　DOM based XSS　XSS脆弱性のひとつ

• 文字そのままを書き出すメソッドやプロパティを使うと、そこにDOM based XSSが可能になる余地が生まれる（document.write()やinnerHTML）
• textContentプロパティを使う（取得した要素の「コンテンツ」を表す）

［作成例 その１］

　p要素の部分に、現在の日時を表示する

［作成例 その２］

　１冊2,400円の本の消費税込みの金額をブラウザに表示する

［作成例 その３］

　１冊の本の消費税込みの金額をブラウザに表示する

［作成例 その４］

　表を作成する

［作成例 その５］

　わかりやすく日時を表示する

［JavaScript］Locationオブジェクト / setTimeoutメソッド / DOM

［JavaScript］

　Locationオブジェクト

• WebページのURLを情報としてもつオブジェクト
• hrefプロパティの値に別のWebページのURLを入力する

［作成例］

　setTimeoutメソッド

• あらかじめ指定した時間後に、指定した処理を行わせる
• 一定時間ごとに同じ処理を繰り返す

　　var 変数 = window.setTimeout('実行したい処理', '時間msec');

［作成例 その１］

［作成例 その２］

　タイマーが動き出しても他の処理は続行される

［作成例 その３］

• locationオブジェクトのreplace( )メソッドは、現在のページを、引数で指定したURLのHTMLドキュメントに入れ替える
• 履歴の情報自体を入れ替える（戻るボタンで戻れない）

　DOM（Document Object Model）

• HTML文書をオブジェクトとして読み込んで操作するための仕組み
• Documentオブジェクトが持つ要素の構造そのもの、あるいはそれらにアクセスしたり操作したりする機能
• ドキュメントをツリー構造で扱う

　　1. 要素名で要素を取得する

• document.getElementsByTagName( );
• document.getElementById( );

　　2. 要素の内容を取得する

• innerHTMLプロパティを使う（オブジェクト名 . innerHTML）

［作成例 その１］

［作成例 その２］

［作成例 その３］