JS 表示してるページのURLを取得したりするアレコレのメモ

URLを取得する方法のメモ (※ Chrome / Firefox / Safari で確認しています。)

例えばこんなURL

1. http://example.com/dir/
2. http://www.example.com/dir/
3. http://example.com/dir/index.html#section01
4. http://www.example.com/dir/index.html#section01
5. http://example.com/dir/index.html?s=foo
6. http://www.example.com/dir/index.html?s=foo

今のページのURLを取得する

window.location.href

又は

document.URL // 読み取り専用

👇

// 1. => "http://example.com/dir/"
// 2. => "http://www.example.com/dir/"
// 3. => "http://example.com/dir/index.html#section01"
// 4. => "http://www.example.com/dir/index.html#section01"
// 5. => "http://example.com/dir/index.html?s=foo"
// 6. => "http://www.example.com/dir/index.html?s=foo"

ドメイン名を取得

window.location.host
// 又は window.location.hostname

👇

// 1. 3. 5. => "example.com"
// 2. 4. 6. => "www.example.com"

プロトコルを取得

window.location.protocol

👇 1 ~ 4 共通

// "http"

サイトのトップページのURLを取得

プロトコルとドメイン名から作成できる。

window.location.protocol + '//' + window.location.host

👇

// 1. 3. 5. => "http://example.com"
// 2. 4. 6. => "http://www.example.com"

ドメイン以下のパス

window.location.pathname

👇

// 1. 2. => "/dir/"
// 3. 4. 5. 6. => "/dir/index.html"

※ URLの末に/が無ければ無いまま取得されるっぽい

トップページ(http://example.com)の場合は/が取得される

window.location.pathname // => "/"

ハッシュを取得

window.location.hash

👇

// 1. 2. 5. 6. => ""
// 3. 4. => "#section01"

パラメーターを取得

window.location.search

👇

// 1. 2. 3. 4. => ""
// 5. 6. => "?s=foo"

※ ブラウザの場合locationはwindowオブジェクトのプロパティなので、wondow.は省略可 (但しスコープ内にlocationって名前の変数を作っていない場合)

---

[参考]

• Document.URL - Web API インターフェイス | MDN
• Location - Web API インターフェイス | MDN
• jQueryでのやりかた jQueryでURLを取得（ホストやパラメータなどの部分取得も）

Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus)

印刷用CSSのメモ

WEBページを印刷する需要ってもうそんなに無い気もするのだけれど、必要になったのでメモ。

印刷用のCSS

1. 印刷用のCSSをmedia="print"指定した別ファイルで読み込ませる

<link rel="stylesheet" type="text/css" href="main.css" media="screen">
<link rel="stylesheet" type="text/css" href="print.css" media="print">

印刷用のスタイルは print.css だけで完結する

2. メディアクエリ @media print で指定する

印刷用のメディアクエリを追加するCSSは印刷時にも有効になるようにmedia="all"で指定します

<link rel="stylesheet" type="text/css" href="main.css" media="all">

main.css 内に下記のメディアクエリを作成してその中に印刷用のCSSを記述する

@media print {
  /* 印刷用のCSS */
}

※ 印刷時もWEB表示用のCSSも有効になるので、不要なスタイルはこのメディアクエリ内で打ち消す必要がある。

用紙の設定 @pront

まだ対応していないブラウザもありますが、用紙サイズや空きなどの指定が行なえます。
Can I use... Support tables for HTML5, CSS3, etc

例:
A4サイズ 上下12mm 左右7mm空き

@pront {
  size: A4
  margin: 12mm 7mm;
}

用紙サイズ指定 size: <width> < height > で指定

@page { size: 120mm 297mm; } /* A4サイズ */

A4 縦向き (A4が 210mm x 297mm なので portrait は省略可 )

@page { size: A4 portrait; }

A4 横向き

@page { size: A4 landscape; }

サイズに指定できるキーワード

keyword	size
A5	148mm x 210mm
A4	210mm x 297mm
B5	176mm x 250mm
B4	250mm x 353mm
JIS-B5	182mm x 257mm
JIS-B4	257mm x 364mm
letter	8.5in x 11in
legal	8.5in x 14in
ledger	11in x 17in

---

[参考]

• size - CSS | MDN
• 【決定版】印刷用CSSはこれでいこう！ | m-pixel labo blog

Canon インクジェットプリンター複合機 PIXUS MG3630 BK ブラック

iOS javascript clickイベントが効かないにはまる。

レスポンシブなサイトを作成していてモバイルの時によくある、メニューアイコンを押したら全画面にメニューが表示されてメニュー以外をクリックするとメニューが閉じる機能を作っていました。
Chromeの開発ツールでは意図したとおりに動作していたのですが、iPhone実機で確認した所メニュー以外の部分をタップしたらメニューを閉じる機能が動作していませんでした。

確認環境

• iPhone 6S
• iOS 11.1.2
• ブラウザ: Safari

clickイベントが効かないパターンがあるっぽい

動作しなかった例

$(document).on('click', 'div.hitarea', function(){ /*... 処理 */ });

※ 対象の要素を解りやすくするために敢えてdiv.hitareaと書いています

どうやら$(document).onや$('body').on のようなイベントの登録のしかたで、イベント対象がaタグではない時にクリックイベントが無視されてしまうようです。

解決方法

1. クリック対象となる要素にcursor: pointerというスタイルを付ける

クリック対象の要素にcursor: pointerというスタイルがあれば、aタグでなくてもクリックイベントが効くようになるようです。(イベントがdocumentやbodyといったものに登録されている場合イベントターゲットがpointerな要素ならタップ可能な要素だとiOSが判定するような仕組みっぽいです。)

今回の例だと次のようにスタイルを加えるとクリックイベントが動作するようになりました。

div.hitarea {
  cursor: pointer;
}

ボタンのように使いたい機能だった場合はこの方法が簡単です。
しかし、今回のようなレスポンシブなサイトで、ボタンエリア以外をクリックしたらメニューを閉じたいというような場合、モバイルで見てる時は良いのですがPCで見るとモーダルのメニュー上どこにマウスを持っていってもカーソルがクリック可能なポインターになってしまうので、ちょっと問題がありました。

2. document, body にイベントを登録しなければOK

iOSでクリックイベントが動作しないのは、documentまたはbodyにイベントが登録されている かつ 対象の要素がaタグでない(pointerのスタイルがない) とき ですので、$(document).on、$('body').onとしなければ問題なく動作します。

例えば次のようなHTML構造で

<body>
  <div class="container">
    <div class="hitarea"></div>
  </div>
</body>

単純に最初から画面にある該当要素だけでクリックイベントが効けば良いのであれば

$(document).on('click', 'div.hitarea', function(){ /*... 処理 */ });

ではなく

$('div.hitarea').on('click', function(){ /*... 処理 */ }); 

とすればOKです。

後から追加される要素にもクリックイベントが効く必要があるときは、

$('.container').on('click', 'div.hitarea', function(){ /*... 処理 */ }); 

上記のようにdocumentやbodyではなく対象となる要素が追加される親要素にイベント登録をすれば、後から追加されるdiv.hitarea要素にもクリックイベントが効くようになります。

　
Chromeの開発ツールで見た目と動作問題ないなーと思っても実機だと挙動が異なることがあるってのを改めて実感しました。(iOSで見てたブラウザもデフォルトのSafariでChromeとも異なりますからそりゃ違いもありますよねw)
モバイルサイト製作時はめんどくさがらずに、ケーブル繋いで実機のブラウザで見て確認・デバックをしなきゃなーって思いました。(でも、ちょっとめんどくさい...

過去にaタグだけどclickイベントが効かない事があったのですが、href属性を付けていなかったので、cursor: poinrerのスタイルが無い扱いになってたから、動作しなかったんじゃないかなって今回の件でナゾが判明した気がしました。

---

[参考]

• javascript - $(document).click() not working correctly on iPhone. jquery - Stack Overflow
• iOS で click イベントがわけのわからない動作をする件について - Qiita

レスポンシブWebデザイン　マルチデバイス時代のコンセプトとテクニック (Web Professional Books)