今更だけどPugを使ってみました

<p>これまで、VRをWebサイトで作るのはハードルが高い印象がありましたが、</p>
<p>A-Frame というライブラリを使うと、場合によってはJavaScriptが書けなくても、HTMLのような感覚で簡単にWEBサイトでVRを実現することができます。</p>
<p>今回はその A-Frame を使って、VRをWEBサイトで作ってみました。</p>
<p>↓作ってみたもの</p>
<p><a class="demo" href="https://sterfield.co.jp/demo/ninomiya/135/">DEMO</a></p>
<h2>ソースコード</h2>
<h3>HTMLのhead</h3>
<p></p>

		<div id="crayon-649540264c6d4707919173" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title">HTML head</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;script src="https://aframe.io/releases/0.7.0/aframe.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/aframe-html-shader@0.2.0/dist/aframe-html-shader.min.js"&gt;&lt;/script&gt;
&lt;script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"&gt;&lt;/script&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540264c6d4707919173-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264c6d4707919173-2">2</div><div class="crayon-num" data-line="crayon-649540264c6d4707919173-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540264c6d4707919173-1"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span>=<span class="crayon-s">"https://aframe.io/releases/0.7.0/aframe.min.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264c6d4707919173-2"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span>=<span class="crayon-s">"https://unpkg.com/aframe-html-shader@0.2.0/dist/aframe-html-shader.min.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div><div class="crayon-line" id="crayon-649540264c6d4707919173-3"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span>=<span class="crayon-s">"http://html2canvas.hertzen.com/dist/html2canvas.min.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<h3>HTMLのbody</h3>
<p></p>

		<div id="crayon-649540264c6d8071188107" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title">HTML</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;div class="asset"&gt;
  &lt;div class="panel" id="panel"&gt;
    &lt;figure class="panel__figure"&gt;&lt;img src="img/img_photo_01.jpg" alt="画像サンプル"&gt;&lt;/figure&gt;
    &lt;h3 class="panel__title"&gt;パネルのタイトル&lt;/h3&gt;
    &lt;p class="panel__summary"&gt;パネルのテキストが入りますパネルのテキストが入りますパネルのテキストが入りますパネルのテキストが入りますパネルのテキストが入りますパネルのテキストが入ります&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;a-scene&gt;
  &lt;a-sky src="img/Tropical_Beach_4k.jpg" rotation="0 -90 0"&gt;&lt;/a-sky&gt;
  &lt;a-box position="-10 -10 -1" rotation="0 45 0" width="5" height="5" depth="5" color="#4CC3D9"&gt;&lt;/a-box&gt;
  &lt;a-plane position="0 0 -1" width="16" height="16" material="shader:html;target: #panel;"&gt;&lt;/a-plane&gt;
  &lt;a-entity camera wasd-controls look-controls position="0 0 12"&gt;&lt;/a-entity&gt;
&lt;/a-scene&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540264c6d8071188107-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264c6d8071188107-2">2</div><div class="crayon-num" data-line="crayon-649540264c6d8071188107-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264c6d8071188107-4">4</div><div class="crayon-num" data-line="crayon-649540264c6d8071188107-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264c6d8071188107-6">6</div><div class="crayon-num" data-line="crayon-649540264c6d8071188107-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264c6d8071188107-8">8</div><div class="crayon-num" data-line="crayon-649540264c6d8071188107-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264c6d8071188107-10">10</div><div class="crayon-num" data-line="crayon-649540264c6d8071188107-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264c6d8071188107-12">12</div><div class="crayon-num" data-line="crayon-649540264c6d8071188107-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264c6d8071188107-14">14</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540264c6d8071188107-1"><span class="crayon-h">&lt;</span><span class="crayon-e">div </span><span class="crayon-t">class</span>=<span class="crayon-s">"asset"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264c6d8071188107-2"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-h">&lt;</span><span class="crayon-e">div </span><span class="crayon-t">class</span>=<span class="crayon-s">"panel"</span><span class="crayon-h"> </span><span class="crayon-i">id</span>=<span class="crayon-s">"panel"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-649540264c6d8071188107-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-h">&lt;</span><span class="crayon-e">figure </span><span class="crayon-t">class</span>=<span class="crayon-s">"panel__figure"</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span><span class="crayon-e">img </span><span class="crayon-i">src</span>=<span class="crayon-s">"img/img_photo_01.jpg"</span><span class="crayon-h"> </span><span class="crayon-i">alt</span>=<span class="crayon-s">"画像サンプル"</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">figure</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264c6d8071188107-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-h">&lt;</span><span class="crayon-e">h3 </span><span class="crayon-t">class</span>=<span class="crayon-s">"panel__title"</span><span class="crayon-h">&gt;</span>パネルのタイトル<span class="crayon-h">&lt;</span>/<span class="crayon-i">h3</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-649540264c6d8071188107-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-h">&lt;</span><span class="crayon-i">p</span><span class="crayon-h"> </span><span class="crayon-t">class</span>=<span class="crayon-s">"panel__summary"</span><span class="crayon-h">&gt;</span>パネルのテキストが入りますパネルのテキストが入りますパネルのテキストが入りますパネルのテキストが入りますパネルのテキストが入りますパネルのテキストが入ります<span class="crayon-h">&lt;</span>/<span class="crayon-i">p</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264c6d8071188107-6"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">div</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-649540264c6d8071188107-7"><span class="crayon-h">&lt;</span>/<span class="crayon-i">div</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264c6d8071188107-8">&nbsp;</div><div class="crayon-line" id="crayon-649540264c6d8071188107-9"><span class="crayon-h">&lt;</span><span class="crayon-i">a</span>-<span class="crayon-i">scene</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264c6d8071188107-10"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-h">&lt;</span><span class="crayon-i">a</span>-<span class="crayon-e">sky </span><span class="crayon-i">src</span>=<span class="crayon-s">"img/Tropical_Beach_4k.jpg"</span><span class="crayon-h"> </span><span class="crayon-i">rotation</span>=<span class="crayon-s">"0 -90 0"</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">a</span>-<span class="crayon-i">sky</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-649540264c6d8071188107-11"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-h">&lt;</span><span class="crayon-i">a</span>-<span class="crayon-e">box </span><span class="crayon-i">position</span>=<span class="crayon-s">"-10 -10 -1"</span><span class="crayon-h"> </span><span class="crayon-i">rotation</span>=<span class="crayon-s">"0 45 0"</span><span class="crayon-h"> </span><span class="crayon-i">width</span>=<span class="crayon-s">"5"</span><span class="crayon-h"> </span><span class="crayon-i">height</span>=<span class="crayon-s">"5"</span><span class="crayon-h"> </span><span class="crayon-i">depth</span>=<span class="crayon-s">"5"</span><span class="crayon-h"> </span><span class="crayon-i">color</span>=<span class="crayon-s">"#4CC3D9"</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">a</span>-<span class="crayon-i">box</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264c6d8071188107-12"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-h">&lt;</span><span class="crayon-i">a</span>-<span class="crayon-e">plane </span><span class="crayon-i">position</span>=<span class="crayon-s">"0 0 -1"</span><span class="crayon-h"> </span><span class="crayon-i">width</span>=<span class="crayon-s">"16"</span><span class="crayon-h"> </span><span class="crayon-i">height</span>=<span class="crayon-s">"16"</span><span class="crayon-h"> </span><span class="crayon-i">material</span>=<span class="crayon-s">"shader:html;target: #panel;"</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">a</span>-<span class="crayon-i">plane</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-649540264c6d8071188107-13"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-h">&lt;</span><span class="crayon-i">a</span>-<span class="crayon-e">entity </span><span class="crayon-e">camera </span><span class="crayon-i">wasd</span>-<span class="crayon-e">controls </span><span class="crayon-i">look</span>-<span class="crayon-e">controls </span><span class="crayon-i">position</span>=<span class="crayon-s">"0 0 12"</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">a</span>-<span class="crayon-i">entity</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264c6d8071188107-14"><span class="crayon-h">&lt;</span>/<span class="crayon-i">a</span>-<span class="crayon-i">scene</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<h2>参考サイト</h2>
<p><a class="link" href="http://vr-lab.voyagegroup.com/entry/2016/11/16/122115#HTML-Shader%E3%81%A8html2canvas%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%A8%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%81%BF" target="_blank" rel="noopener">A-FrameとHTML Shaderで美しい日本語テキストを表示する方法 &#8211; VOYAGE GROUP VR室ブログ</a></p>

A-Frame で簡単にVRを実装する

フロントエンドの人間が黒い画面(Macのターミナル)を使ってみて思ったこと

<p>ブラウザベースのテストツールにseleniumというものがあります。ざっくり説明すれば、chromeやFirefoxの操作を自動化するツールです。しかもpython、ruby等さまざまなプログラミング言語から制御できるというお手軽さ。今回はWindows + Visual Studio Code + python3の環境で簡単な動作を交えて解説します。</p>
<p>VSCodeで任意のフォルダをプロジェクトフォルダとし、seleniumからchromeを制御するための<a href="https://sites.google.com/a/chromium.org/chromedriver/downloads">chromederiver</a>をダウンロードして任意のフォルダへ設置します。</p>
<p>あわせてコマンドプロンプトから</p>

		<div id="crayon-649540264aa99358496941" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
pip install selenium</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540264aa99358496941-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540264aa99358496941-1"><span class="crayon-e">pip </span><span class="crayon-e">install </span><span class="crayon-i">selenium</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>を実行してpython用のseleniumをインストールします。これで基本的な準備は終わりました。</p>
<p>今回は、googleでキーワード検索結果のスクリーンショットを5ページぶん撮影する、という操作を自動化してみます。以下がそのプログラムです。</p>

		<div id="crayon-649540264aa9e340810849" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
import os
from selenium import webdriver
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.common.by import By
driver = webdriver.Chrome("./chromedriver.exe") #chromedriverのパスを指定
driver.get("https://www.google.com/") # googleを開く
driver.find_element_by_css_selector('input[name="q"]').send_keys("sterfield") # 検索キーワードを指定
driver.find_element_by_css_selector('input[name="q"]').send_keys(Keys.RETURN) # ENTERキー押下で検索実行
for i in range(0, 4):
    # 検索結果ページの「次へ」リンクが表示されるまで最大10秒待機する
    wait = WebDriverWait(driver, 10)
    next_page = wait.until(EC.element_to_be_clickable((By.ID, "pnnext")))
    # スクリーンショット用のファイル名を生成
    basename = "screen_shot{0:02d}.png".format(i)
    filename = os.path.join(os.path.dirname(os.path.abspath(__file__)), basename)
    driver.save_screenshot(filename)
    # 次の検索結果ページへ遷移する
    next_page.click()
driver.quit()</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540264aa9e340810849-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264aa9e340810849-2">2</div><div class="crayon-num" data-line="crayon-649540264aa9e340810849-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264aa9e340810849-4">4</div><div class="crayon-num" data-line="crayon-649540264aa9e340810849-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264aa9e340810849-6">6</div><div class="crayon-num" data-line="crayon-649540264aa9e340810849-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264aa9e340810849-8">8</div><div class="crayon-num" data-line="crayon-649540264aa9e340810849-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264aa9e340810849-10">10</div><div class="crayon-num" data-line="crayon-649540264aa9e340810849-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264aa9e340810849-12">12</div><div class="crayon-num" data-line="crayon-649540264aa9e340810849-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264aa9e340810849-14">14</div><div class="crayon-num" data-line="crayon-649540264aa9e340810849-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264aa9e340810849-16">16</div><div class="crayon-num" data-line="crayon-649540264aa9e340810849-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264aa9e340810849-18">18</div><div class="crayon-num" data-line="crayon-649540264aa9e340810849-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264aa9e340810849-20">20</div><div class="crayon-num" data-line="crayon-649540264aa9e340810849-21">21</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540264aa9e340810849-1"><span class="crayon-e">import </span><span class="crayon-e">os</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264aa9e340810849-2"><span class="crayon-e">from </span><span class="crayon-e">selenium </span><span class="crayon-e">import </span><span class="crayon-e">webdriver</span></div><div class="crayon-line" id="crayon-649540264aa9e340810849-3"><span class="crayon-e">from </span><span class="crayon-i">selenium</span><span class="crayon-sy">.</span><span class="crayon-i">webdriver</span><span class="crayon-sy">.</span><span class="crayon-i">support</span><span class="crayon-sy">.</span><span class="crayon-e">ui </span><span class="crayon-e">import </span><span class="crayon-e">WebDriverWait</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264aa9e340810849-4"><span class="crayon-e">from </span><span class="crayon-i">selenium</span><span class="crayon-sy">.</span><span class="crayon-i">webdriver</span><span class="crayon-sy">.</span><span class="crayon-e">support </span><span class="crayon-e">import </span><span class="crayon-e">expected_conditions </span><span class="crayon-st">as</span><span class="crayon-h"> </span><span class="crayon-e">EC</span></div><div class="crayon-line" id="crayon-649540264aa9e340810849-5"><span class="crayon-e">from </span><span class="crayon-i">selenium</span><span class="crayon-sy">.</span><span class="crayon-i">webdriver</span><span class="crayon-sy">.</span><span class="crayon-i">common</span><span class="crayon-sy">.</span><span class="crayon-e">keys </span><span class="crayon-e">import </span><span class="crayon-e">Keys</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264aa9e340810849-6"><span class="crayon-e">from </span><span class="crayon-i">selenium</span><span class="crayon-sy">.</span><span class="crayon-i">webdriver</span><span class="crayon-sy">.</span><span class="crayon-i">common</span><span class="crayon-sy">.</span><span class="crayon-e">by </span><span class="crayon-e">import </span><span class="crayon-e">By</span></div><div class="crayon-line" id="crayon-649540264aa9e340810849-7"><span class="crayon-i">driver</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">webdriver</span><span class="crayon-sy">.</span><span class="crayon-e">Chrome</span><span class="crayon-sy">(</span><span class="crayon-s">"./chromedriver.exe"</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-p">#chromedriverのパスを指定</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264aa9e340810849-8"><span class="crayon-i">driver</span><span class="crayon-sy">.</span><span class="crayon-e">get</span><span class="crayon-sy">(</span><span class="crayon-s">"https://www.google.com/"</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-p"># googleを開く</span></div><div class="crayon-line" id="crayon-649540264aa9e340810849-9"><span class="crayon-i">driver</span><span class="crayon-sy">.</span><span class="crayon-e">find_element_by_css_selector</span><span class="crayon-sy">(</span><span class="crayon-s">'input[name="q"]'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">send_keys</span><span class="crayon-sy">(</span><span class="crayon-s">"sterfield"</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-p"># 検索キーワードを指定</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264aa9e340810849-10"><span class="crayon-i">driver</span><span class="crayon-sy">.</span><span class="crayon-e">find_element_by_css_selector</span><span class="crayon-sy">(</span><span class="crayon-s">'input[name="q"]'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">send_keys</span><span class="crayon-sy">(</span><span class="crayon-i">Keys</span><span class="crayon-sy">.</span><span class="crayon-st">RETURN</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-p"># ENTERキー押下で検索実行</span></div><div class="crayon-line" id="crayon-649540264aa9e340810849-11"><span class="crayon-st">for</span><span class="crayon-h"> </span><span class="crayon-i">i</span><span class="crayon-h"> </span><span class="crayon-st">in</span><span class="crayon-h"> </span><span class="crayon-e">range</span><span class="crayon-sy">(</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">4</span><span class="crayon-sy">)</span><span class="crayon-sy">:</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264aa9e340810849-12"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-p"># 検索結果ページの「次へ」リンクが表示されるまで最大10秒待機する</span></div><div class="crayon-line" id="crayon-649540264aa9e340810849-13"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">wait</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-e">WebDriverWait</span><span class="crayon-sy">(</span><span class="crayon-i">driver</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">10</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264aa9e340810849-14"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">next_page</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">wait</span><span class="crayon-sy">.</span><span class="crayon-e">until</span><span class="crayon-sy">(</span><span class="crayon-i">EC</span><span class="crayon-sy">.</span><span class="crayon-e">element_to_be_clickable</span><span class="crayon-sy">(</span><span class="crayon-sy">(</span><span class="crayon-i">By</span><span class="crayon-sy">.</span><span class="crayon-i">ID</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">"pnnext"</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-649540264aa9e340810849-15"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-p"># スクリーンショット用のファイル名を生成</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264aa9e340810849-16"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">basename</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-s">"screen_shot{0:02d}.png"</span><span class="crayon-sy">.</span><span class="crayon-e">format</span><span class="crayon-sy">(</span><span class="crayon-i">i</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-649540264aa9e340810849-17"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">filename</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">os</span><span class="crayon-sy">.</span><span class="crayon-i">path</span><span class="crayon-sy">.</span><span class="crayon-e">join</span><span class="crayon-sy">(</span><span class="crayon-i">os</span><span class="crayon-sy">.</span><span class="crayon-i">path</span><span class="crayon-sy">.</span><span class="crayon-e">dirname</span><span class="crayon-sy">(</span><span class="crayon-i">os</span><span class="crayon-sy">.</span><span class="crayon-i">path</span><span class="crayon-sy">.</span><span class="crayon-e">abspath</span><span class="crayon-sy">(</span><span class="crayon-i">__file__</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">basename</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264aa9e340810849-18"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">driver</span><span class="crayon-sy">.</span><span class="crayon-e">save_screenshot</span><span class="crayon-sy">(</span><span class="crayon-i">filename</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-649540264aa9e340810849-19"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-p"># 次の検索結果ページへ遷移する</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264aa9e340810849-20"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">next_page</span><span class="crayon-sy">.</span><span class="crayon-e">click</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-649540264aa9e340810849-21"><span class="crayon-i">driver</span><span class="crayon-sy">.</span><span class="crayon-e">quit</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>これを実行すると専用のプロファイルを持ったchromeが勝手に起動して、あっという間に検索、スクリーンショット撮影を終わらせてくれます。pythonのプログラムがあるフォルダにスクリーンショットも保存されました。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-13306 size-medium" src="/uploads-archive/2017/10/screen_shot00-300x287.png" alt="" width="300" height="287" srcset="/uploads-archive/2017/10/screen_shot00-300x287.png 300w, /uploads-archive/2017/10/screen_shot00-768x734.png 768w, /uploads-archive/2017/10/screen_shot00-228x218.png 228w, /uploads-archive/2017/10/screen_shot00.png 929w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>今回はデモなので踏み込んだ使い方はしていませんが、サイト内全ページのスクリーンショット撮影自動化や、サイトの負荷テストなどかなり広範囲に応用が利くと思います。</p>

seleniumを使ってみよう

Tomcat + Nginx + MariaDbに設定しよ(CentOS 7)

<p>今や、webサイトの開発・制作には欠かせない存在といっても過言ではないchromeのデベロッパーツールですが、<br />
もしかしたら意外と知られてないかもしれないという機能を紹介したいと思います。<br />
こんなの当たり前だよ！って感じでしたらすみません&#8230;</p>
<p>早速紹介したいと思いますが、chromeのデベロッパーツール自体の説明については省略させて頂きます。<br />
一応初心者向けの方を対象にした記事を貼っておきます。</p>
<p><a href="https://saruwakakun.com/html-css/basic/chrome-dev-tool">初心者向け！Chromeの検証機能（デベロッパーツール）の使い方</a><br />
&nbsp;<br />
記事にもありますが、<br />
ツールを開くにはショートカットも使用でき、<br />
<strong>「option」 + 「command」 + 「i」</strong>(Macの場合)<br />
<strong>「F12」</strong>(Windowsの場合)<br />
で開くことができます。</p>
<ol>
<li><a href="#i1">テーマ変更</a></li>
<li><a href="#i2">ルーラー表示</a></li>
<li><a href="#i3">要素の疑似状態を確認</a></li>
<li><a href="#i4">背景画像のチェック</a></li>
<li><a href="#i5">検証ツール表示の時だけできる「再読み込み」</a></li>
<li><a href="#i6">使用していないcssやjavascriptをチェック</a></li>
<li><a href="#i7">デバイスモード(PC)</a></li>
<li><a href="#i8">キャプチャを撮る</a></li>
</ol>
<p>&nbsp;</p>
<h2 id="i1">1.テーマ変更</h2>
<p>テーマといっても通常白い画面を黒に変更するといっただけです。<br />
ツールを開いている状態で、右上の「︙」をクリックして表示される「<strong>Setting</strong>」を選択します。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-13212" src="/uploads-archive/2017/09/d5e6b04ca2ec57983a3327c383b21617.png" alt="" width="448" height="324" srcset="/uploads-archive/2017/09/d5e6b04ca2ec57983a3327c383b21617.png 723w, /uploads-archive/2017/09/d5e6b04ca2ec57983a3327c383b21617-300x217.png 300w, /uploads-archive/2017/09/d5e6b04ca2ec57983a3327c383b21617-228x165.png 228w" sizes="(max-width: 448px) 100vw, 448px" /><br />
※すでに黒くしている画面です</p>
<p>Setting画面の<strong>PreferencesのAppearance</strong>の項目で、<br />
<strong>Theme</strong>というのがあるので、それをDarkに変更するだけでOKです。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-13213" src="/uploads-archive/2017/09/6a9e8f608532336a5c60a706a2bf57d3.png" alt="" width="453" height="330" srcset="/uploads-archive/2017/09/6a9e8f608532336a5c60a706a2bf57d3.png 716w, /uploads-archive/2017/09/6a9e8f608532336a5c60a706a2bf57d3-300x219.png 300w, /uploads-archive/2017/09/6a9e8f608532336a5c60a706a2bf57d3-228x166.png 228w" sizes="(max-width: 453px) 100vw, 453px" /></p>
<p>ターミナルに慣れている人にはこの黒い画面が良かったりするかもしれませんね。</p>
<p>&nbsp;</p>
<h2 id="i2">2.ルーラー表示</h2>
<p>ルーラーを表示させることができますが、<br />
先程のテーマ変更の時に表示した<strong>Setting画面のPreferencesのElements</strong>の項目にある、<br />
「Show rulers」にチェックを入れるだけです。<br />
ちょうど上の画像の下のほうに映っています。</p>
<p>チェックを入れると、<br />
ツールを開いてElementsのソースにマウスオーバーしている時に以下のように表示されます。</p>
<p><img decoding="async" loading="lazy" width="1024" height="803" class="alignnone size-large wp-image-13214" src="/uploads-archive/2017/09/5be3024d83687e1e82e760c26ef80c3c-1024x803.png" alt="" /></p>
<p>ツールを開いてたら表示されるようにしてくれたほうが使い勝手がいい気がしますが&#8230;</p>
<p>&nbsp;</p>
<h2 id="i3">3.要素の疑似状態を確認</h2>
<p>要素の疑似状態というのはcssの、<strong>active,hover,focus,visited</strong>のことで、<br />
サイトを実際に触っていなくてもその状態にできるようになります。</p>
<p>疑似状態にさせたいタグを選択して右クリックを押すと以下のパネルが表示されるので任意のものを選択します。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-13215" src="/uploads-archive/2017/09/bc5bc6a112d73add49bae52b663d2826.png" alt="" width="451" height="341" srcset="/uploads-archive/2017/09/bc5bc6a112d73add49bae52b663d2826.png 718w, /uploads-archive/2017/09/bc5bc6a112d73add49bae52b663d2826-300x227.png 300w, /uploads-archive/2017/09/bc5bc6a112d73add49bae52b663d2826-228x172.png 228w" sizes="(max-width: 451px) 100vw, 451px" /></p>
<p>右クリックじゃなく、右上にある「<strong>:hov</strong>」をクリックすることでも可能です。</p>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-13216" src="/uploads-archive/2017/09/7c420322aec0f3e81a794a1f027c139e.png" alt="" width="335" height="150" srcset="/uploads-archive/2017/09/7c420322aec0f3e81a794a1f027c139e.png 335w, /uploads-archive/2017/09/7c420322aec0f3e81a794a1f027c139e-300x134.png 300w, /uploads-archive/2017/09/7c420322aec0f3e81a794a1f027c139e-228x102.png 228w" sizes="(max-width: 335px) 100vw, 335px" /></p>
<p>最近は特にhoverの処理が盛んなので、これは制作時、もしくは他のサイトを見たりする時によく使用します。</p>
<p>&nbsp;</p>
<h2 id="i4">4.背景画像のチェック</h2>
<p>imgタグで置いている画像はElementsのタグをマウスオーバーすればサイズが表示されますが、背景画像では、cssのurlの箇所をマウスオーバーしても表示されません。<br />
その場合は、右クリックを押すと、以下のような項目が表示されます。</p>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-13217" src="/uploads-archive/2017/09/591602f8df74f98091d0c09794712df0-1024x363.png" alt="" width="1024" height="363" srcset="/uploads-archive/2017/09/591602f8df74f98091d0c09794712df0-1024x363.png 1024w, /uploads-archive/2017/09/591602f8df74f98091d0c09794712df0-300x106.png 300w, /uploads-archive/2017/09/591602f8df74f98091d0c09794712df0-768x273.png 768w, /uploads-archive/2017/09/591602f8df74f98091d0c09794712df0-228x81.png 228w, /uploads-archive/2017/09/591602f8df74f98091d0c09794712df0.png 1834w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>これで「<strong>Sources Panel</strong>」もしくは「<strong>Application Panel</strong>」を選択すると、画像の重さやサイズがわかるようになります。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-13218" src="/uploads-archive/2017/09/017254b58b285665e417a02a7731cfa7.png" alt="" width="368" height="286" srcset="/uploads-archive/2017/09/017254b58b285665e417a02a7731cfa7.png 702w, /uploads-archive/2017/09/017254b58b285665e417a02a7731cfa7-300x233.png 300w, /uploads-archive/2017/09/017254b58b285665e417a02a7731cfa7-228x177.png 228w" sizes="(max-width: 368px) 100vw, 368px" /></p>
<p>サイズが0×0に表示されることがあるので。その場合はもう１つの方で見ればわかるかと思います。</p>
<p>&nbsp;</p>
<h2 id="i5">5.検証ツール表示の時だけできる「再読み込み」</h2>
<p>ツールを表示してる時だけ再読込のボタンを長押しすると、違った再読込をすることが出来ます。<br />
「<strong>ハード再読み込み</strong>」と「<strong>キャッシュの消去とハード再読み込み</strong>」の2つができるようになります。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-13220" src="/uploads-archive/2017/09/4a47bc9754d3131aab52fa5eaad54f0e-1024x756.jpg" alt="" width="688" height="517" /></p>
<p>ハード再読み込みってなんでしょうね&#8230;</p>
<p>キャッシュが残っている、残ってしまいそうな時はこの読み込み方法をするといいかもしれません。</p>
<p>&nbsp;</p>
<h2 id="i6">使用していないcssやjavascriptをチェック</h2>
<p>ツールを開いてる状態で、console drawerが表示されている時(開いてない場合escボタンを押すと表示されます)<br />
consoleの左になる「<strong>︙</strong>」をクリックすると、以下の項目が表示されます。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-13228" src="/uploads-archive/2017/09/4cc9690ae118909bb7b356b67bb8f536.png" alt="" width="450" height="337" srcset="/uploads-archive/2017/09/4cc9690ae118909bb7b356b67bb8f536.png 699w, /uploads-archive/2017/09/4cc9690ae118909bb7b356b67bb8f536-300x225.png 300w, /uploads-archive/2017/09/4cc9690ae118909bb7b356b67bb8f536-228x171.png 228w" sizes="(max-width: 450px) 100vw, 450px" /></p>
<p>ここで、「<strong>Coverage</strong>」というのを選択すると、</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-13229" src="/uploads-archive/2017/09/e036c790288afdd93df1da398e181233.png" alt="" width="449" height="429" srcset="/uploads-archive/2017/09/e036c790288afdd93df1da398e181233.png 700w, /uploads-archive/2017/09/e036c790288afdd93df1da398e181233-300x287.png 300w, /uploads-archive/2017/09/e036c790288afdd93df1da398e181233-228x218.png 228w" sizes="(max-width: 449px) 100vw, 449px" /></p>
<p>このような画面が出てるので、reloadボタンを押すと、チェックが始まります。<br />
チェック完了すると以下のような画面になります。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-13230" src="/uploads-archive/2017/09/ef8857e83410be36a40d7656d41c84c3.png" alt="" width="451" height="481" srcset="/uploads-archive/2017/09/ef8857e83410be36a40d7656d41c84c3.png 700w, /uploads-archive/2017/09/ef8857e83410be36a40d7656d41c84c3-282x300.png 282w, /uploads-archive/2017/09/ef8857e83410be36a40d7656d41c84c3-228x243.png 228w" sizes="(max-width: 451px) 100vw, 451px" /></p>
<p>緑が使用されている、赤が使用されていないものになります。<br />
下の画面でファイルを選択すると、上でさらに詳細がわかります。</p>
<p>いらないコードを削除したい場合良いかもしれません。</p>
<p>&nbsp;</p>
<h2 id="i6">6.デバイスモード</h2>
<p>iPhoneやAndroidのシミュレート出来るのはもうご存知かと思いますが、PCのモードがあるのは意外と知らないのでは？と思ったので紹介します。</p>
<p>Settings画面の「<strong>Devices</strong>」を選択すると、いろんなデバイスを追加出来る画面があります。<br />
この中で、「<strong>Laptop with HiDPI screen</strong>」「<strong>Laptop with MDPI screen</strong>」にチェックをいれるだけです。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-13221" src="/uploads-archive/2017/09/62904e6dc378931045337c87372d3eb2.png" alt="" width="379" height="357" srcset="/uploads-archive/2017/09/62904e6dc378931045337c87372d3eb2.png 702w, /uploads-archive/2017/09/62904e6dc378931045337c87372d3eb2-300x282.png 300w, /uploads-archive/2017/09/62904e6dc378931045337c87372d3eb2-228x215.png 228w" sizes="(max-width: 379px) 100vw, 379px" /></p>
<p>そして、デバイスモードの画面で、モードを変更しようとすると、</p>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-13222" src="/uploads-archive/2017/09/e9453bff22c20e760b41d3f96f5f2972-1024x684.png" alt="" width="1024" height="684" srcset="/uploads-archive/2017/09/e9453bff22c20e760b41d3f96f5f2972-1024x684.png 1024w, /uploads-archive/2017/09/e9453bff22c20e760b41d3f96f5f2972-300x200.png 300w, /uploads-archive/2017/09/e9453bff22c20e760b41d3f96f5f2972-768x513.png 768w, /uploads-archive/2017/09/e9453bff22c20e760b41d3f96f5f2972-228x152.png 228w, /uploads-archive/2017/09/e9453bff22c20e760b41d3f96f5f2972.png 1101w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>追加した2つが表示されており、これで確認することができます。<br />
「<strong>Laptop with HiDPI screen</strong>」は、1440×900<br />
「<strong>Laptop with MDPI screen</strong>」は、1280×800<br />
のサイズで表示してくれます。</p>
<p>PCモードいる？とか最初は思ったのですが、<br />
このサイズで見たい時や、ノートPCしかない時は便利です。</p>
<p>また、HiDPIはRetinaみたいなものなので、<br />
Retina対応のPCでない場合、Retinaでどういう風に見えているかみたいなのがチェック出来るようです(どこまで本物と同じかはわかりませんが&#8230;)</p>
<p>&nbsp;</p>
<h2 id="i7">7.キャプチャを撮る</h2>
<p>キャプチャは拡張機能やfirefoxのアドオンでしかできなかったのですが、<br />
このツールの機能で撮ることができます。</p>
<p>撮り方は私が把握してるのでは2つありますが、<br />
まずは先程紹介したデバイスモードの続きのものを紹介したいと思います。</p>
<p>デバイスモードを開いている時、右上の「<strong>︙</strong>」をクリックすると、以下の項目が出てきます。</p>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-13224" src="/uploads-archive/2017/09/d8d17aead1b4b4162abe970abe689f36-1024x660.png" alt="" width="1024" height="660" srcset="/uploads-archive/2017/09/d8d17aead1b4b4162abe970abe689f36-1024x660.png 1024w, /uploads-archive/2017/09/d8d17aead1b4b4162abe970abe689f36-300x193.png 300w, /uploads-archive/2017/09/d8d17aead1b4b4162abe970abe689f36-768x495.png 768w, /uploads-archive/2017/09/d8d17aead1b4b4162abe970abe689f36-228x147.png 228w, /uploads-archive/2017/09/d8d17aead1b4b4162abe970abe689f36.png 1169w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>「<strong>Capture screenshot</strong>」もしくは「<strong>Capture full size screenshot</strong>」を選択すればキャプチャが撮れてしまいます。<br />
ただ、フルサイズの場合はサイトによっては上手く撮れない場合があります。</p>
<p>pc.verもスマホ.verも撮れるので便利ですね〜</p>
<p>いちいちデバイスモードにするのが面倒くさいなという方にはもう一つの方法が良いかと思います。</p>
<p>それはツールを表示し、ツール上で<strong>「command」+「shift」+「p」</strong>を押すと、以下のような画面が表示されます。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-13225" src="/uploads-archive/2017/09/5349447e2fec40ef2bd248a9637906eb.png" alt="" width="451" height="366" srcset="/uploads-archive/2017/09/5349447e2fec40ef2bd248a9637906eb.png 703w, /uploads-archive/2017/09/5349447e2fec40ef2bd248a9637906eb-300x244.png 300w, /uploads-archive/2017/09/5349447e2fec40ef2bd248a9637906eb-228x185.png 228w" sizes="(max-width: 451px) 100vw, 451px" /></p>
<p>ここでcapと打つと、</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-13226" src="/uploads-archive/2017/09/286e50a66450e014bf9ba490f0b407a1.png" alt="" width="450" height="367" srcset="/uploads-archive/2017/09/286e50a66450e014bf9ba490f0b407a1.png 701w, /uploads-archive/2017/09/286e50a66450e014bf9ba490f0b407a1-300x245.png 300w, /uploads-archive/2017/09/286e50a66450e014bf9ba490f0b407a1-228x186.png 228w" sizes="(max-width: 450px) 100vw, 450px" /></p>
<p>先ほどと同じ文言のキャプチャを撮る項目が表示されるので、選択すればOKです！<br />
Mobileと表示されていますが、デバイスモードにしていない時は、PCの見ている画面でキャプチャを撮ることができます。</p>
<p>Chromeのデベロッパーツールでキャプチャを撮ろうと思ったら、<br />
ショートカットでツールを表示して(「command」+「option」+「i」)、<br />
<strong>「command」+「shift」+「p」</strong>を押して、<br />
capと打って、<br />
フルサイズか今開いている画面を選ぶ<br />
の4段階で完了しますね。</p>
<p>まぁちょっとプロセス面倒くさいかもしれないですね笑</p>
<p>今回はちょっとした機能の紹介でしたが、デベロッパーツールはまだまだ機能を持っています。</p>
<p>NetworkやPerformanceで、サイトをもっと速く表示させるためにチェックしたり等、<br />
まだまだ私自身も使いこなせていないので勉強したいと思います。</p>


large_5be3024d83687e1e82e760c26ef80c3c-1024x803.png

medium_5be3024d83687e1e82e760c26ef80c3c-1024x803.png

small_5be3024d83687e1e82e760c26ef80c3c-1024x803.png

thumbnail_5be3024d83687e1e82e760c26ef80c3c-1024x803.png

5be3024d83687e1e82e760c26ef80c3c-1024x803.png

意外と知らないかもしれないchromeのデベロッパーツールの機能

Three.jsでCSS3の3D描画ができた！

<p>少し前に見かけたMilanoteというアプリを紹介します。</p>
<p>一言で言ってしまうと、<br />
<strong>webの掲示板</strong>みたいなものです。</p>
<p><img decoding="async" src="/uploads-archive/2017/06/165c8bee854b3d1ade95412c6e79c191-1024x591.png" alt="" width="100%" class="alignnone size-large wp-image-12951" srcset="/uploads-archive/2017/06/165c8bee854b3d1ade95412c6e79c191-1024x591.png 1024w, /uploads-archive/2017/06/165c8bee854b3d1ade95412c6e79c191-300x173.png 300w, /uploads-archive/2017/06/165c8bee854b3d1ade95412c6e79c191-768x443.png 768w, /uploads-archive/2017/06/165c8bee854b3d1ade95412c6e79c191-228x131.png 228w, /uploads-archive/2017/06/165c8bee854b3d1ade95412c6e79c191.png 1349w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>ボードに付箋を貼っていく感じのように追加、移動することができます。</p>
<p>記入できるのは、</p>
<ul>
<li>テキスト(この中でリストやtodo式に書くこともできる)</li>
<li>写真</li>
<li>リンク</li>
<li>グループ化(テキストの)</li>
</ul>
<p>あとはボードも複数作れるので、テーマや内容によって分けて使用することができます。</p>
<p>GoodPatchさんも使用しているようです。</p>
<p><a href="http://goodpatch.com/blog/communication-using-milanote/" target="_blank">【チームデザイン】『Milanote』を活用したチーム管理・コミュニケーション方法 | Goodpatch Blog</a></p>
<p><a href="https://www.milanote.com/" target="_blank">Milanote: The notes app for creative work.</a></p>
<p>なにか会社で共有したりするのに使えるかもしれませんね。</p>


クリエイティブワークを促進させるアプリ「Milanote」

Three.jsによるWebGLで物体を回転させる

<p>デザインツールといえば、IllustratorやPhotoshopが定番だったと思いますが、sketchの台頭から徐々に変わりつつあるようです。</p>
<p>sketchは興味は常に持ちつつも実際には使用せず&#8230;という状況が続いております。</p>
<p>デザインとプロトタイプの機能を両方持ち合わせたツールが言わずと知れた「Adobe XD」ですが、<br />
どんどんパワーアップしており、使い勝手がよくなっています。私は基本的にはこのツールが一番なのかなと思ってしまいます。</p>
<p>早速最近見かけて良さそうだなと思ったツールを紹介していきます。</p>
<h2>Figma</h2>
<p><img decoding="async" loading="lazy" width="1024" height="513" src="/uploads-archive/2017/03/8fc08622e7c39f4b72995783bbad1ecf-1024x513.png" alt="スクリーンショット 2017-03-14 14.38.22" class="alignnone size-large wp-image-12650" srcset="/uploads-archive/2017/03/8fc08622e7c39f4b72995783bbad1ecf-1024x513.png 1024w, /uploads-archive/2017/03/8fc08622e7c39f4b72995783bbad1ecf-300x150.png 300w, /uploads-archive/2017/03/8fc08622e7c39f4b72995783bbad1ecf-768x385.png 768w, /uploads-archive/2017/03/8fc08622e7c39f4b72995783bbad1ecf-228x114.png 228w, /uploads-archive/2017/03/8fc08622e7c39f4b72995783bbad1ecf.png 1277w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>Sketchに似たデザインツールということなんですが、ブラウザ上でもdesktopでも使用できます。<br />
そしてなんといっても、「オンラインで複数人が同一デザインを作成、編集できる」というのがスゴい点です！</p>
<p>他にも、<br />
・バージョン管理機能<br />
・コメント機能<br />
があり、複数人で作業するのに適しています。</p>
<p>なんと、無料ということなので気軽に導入できますし、お客さんと共有しながら修正指示をもらうということも出来るかもしれません。</p>
<p><a href="https://www.figma.com/" target="_blank">Figma: the collaborative interface design tool.</a></p>
<h2>Pingendo</h2>
<p><img decoding="async" loading="lazy" width="1024" height="549" src="/uploads-archive/2017/03/ecbbf2c4016e38bb21d3627333175783-1024x549.png" alt="スクリーンショット 2017-03-14 14.38.36" class="alignnone size-large wp-image-12651" srcset="/uploads-archive/2017/03/ecbbf2c4016e38bb21d3627333175783-1024x549.png 1024w, /uploads-archive/2017/03/ecbbf2c4016e38bb21d3627333175783-300x161.png 300w, /uploads-archive/2017/03/ecbbf2c4016e38bb21d3627333175783-768x412.png 768w, /uploads-archive/2017/03/ecbbf2c4016e38bb21d3627333175783-228x122.png 228w, /uploads-archive/2017/03/ecbbf2c4016e38bb21d3627333175783.png 1282w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>Bootstrapをベースにしたプロトタイプツールということですが、こちらダウンロードして使用します。無料です。<br />
こちらはデザインというよりワイヤーフレームの作成にいいかもしれません。<br />
bootstrapがベースなので、普通のワイヤーよりもキレイな見た目で作れるかと思います。</p>
<p><a href="https://pingendo.com/" target="_blank">Pingendo &#8211; web authoring with comfort</a></p>
<h2>Framer</h2>
<p><img decoding="async" loading="lazy" width="1024" height="549" src="/uploads-archive/2017/03/59e152531672db40687a7256d32803c2-1024x549.png" alt="スクリーンショット 2017-03-14 14.38.48" class="alignnone size-large wp-image-12652" srcset="/uploads-archive/2017/03/59e152531672db40687a7256d32803c2-1024x549.png 1024w, /uploads-archive/2017/03/59e152531672db40687a7256d32803c2-300x161.png 300w, /uploads-archive/2017/03/59e152531672db40687a7256d32803c2-768x412.png 768w, /uploads-archive/2017/03/59e152531672db40687a7256d32803c2-228x122.png 228w, /uploads-archive/2017/03/59e152531672db40687a7256d32803c2.png 1271w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>こちらはプロトタイプツールで割りと自由な感じでモックアップが作れます。<br />
有料のツールですが、無料で2週間試すことできます。</p>
<p>動きは元からあるものもありますが、特徴的なのがjavascriptを使って動きを付けることも出来る点です。javascriptといっても簡単に扱えるようになっているので、知らなくても多少使えばすぐ慣れるかと思います。</p>
<p>photoshop,sketch,先程紹介したFigmaのファイルをインポートすることが出来るので連携も良いい感じです。</p>
<p><a href="https://framer.com/" target="_blank">Framer &#8211; Design interactive prototypes for web &amp; mobile</a></p>
<h2>draw.io</h2>
<p><img decoding="async" loading="lazy" width="1024" height="517" src="/uploads-archive/2017/03/a341d1e35e2a08735c4b5e5137cd78cf-1024x517.png" alt="スクリーンショット 2017-03-14 14.39.06" class="alignnone size-large wp-image-12653" srcset="/uploads-archive/2017/03/a341d1e35e2a08735c4b5e5137cd78cf-1024x517.png 1024w, /uploads-archive/2017/03/a341d1e35e2a08735c4b5e5137cd78cf-300x152.png 300w, /uploads-archive/2017/03/a341d1e35e2a08735c4b5e5137cd78cf-768x388.png 768w, /uploads-archive/2017/03/a341d1e35e2a08735c4b5e5137cd78cf-228x115.png 228w, /uploads-archive/2017/03/a341d1e35e2a08735c4b5e5137cd78cf.png 1312w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>最後に紹介するのは、デザインツールでもプロトタイプでもないのですが、良さそうと思ったので紹介します。</p>
<p>こちらは企画書とか共有資料に使えそうな図面を簡単に作成することができます。<br />
無料かつアカウントの必要もありません。</p>
<p>フローチャートとか構成図とかにいいと思います。<br />
もちろんワイヤーも作れないことはないです。</p>
<p>使い勝手が非常に良さそうなので、ディレクターとかには重宝しそうです！</p>
<p><a href="https://www.draw.io/" target="_blank">draw.io</a></p>
<p>以前にも違うツールを紹介している記事もありますので、そちらもぜひ興味があれば覗いてみてください。<br />
<a href="/designer/web%e3%82%b5%e3%82%a4%e3%83%88%e3%83%bb%e3%82%a2%e3%83%97%e3%83%aa%e3%81%ae%e3%83%a2%e3%83%83%e3%82%af%e3%82%a2%e3%83%83%e3%83%97%e3%80%81%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%81%ae%e3%83%84/" target="_blank">webサイト・アプリのモックアップ、デザインのツールはAdobeに期待！！ | スターフィールド株式会社</a></p>


最近の素晴らしいデザイン・プロトタイプツールを紹介

グリッド状のレイアウトを補助するjQueryプラグイン作りました

<p>自社のサイト、サービス、または好きなサイトのフォントを、試しにwebフォントに変更出来るシミュレーターがありました。</p>
<h3>ダイナコムウェア</h3>
<p>これはDynaFontというwebフォントのサービスを行っている「ダイナコムウェア」さんの一部のサービスになります。</p>
<p>軽く、ダイナコムウェアさんの紹介をしておきますと、<br />
元々台湾で設立された会社で、フォントの発明・販売を行っていたそうです。<br />
近年webフォントのサービスをはじめたそうです。</p>
<p><img decoding="async" loading="lazy" width="1024" height="528" class="alignnone size-large wp-image-12536" src="/uploads-archive/2017/02/be1b3c98a37cf35ec2f1e403a3d2ec48-1024x528.png" alt="スクリーンショット 2017-02-07 11.51.33" srcset="/uploads-archive/2017/02/be1b3c98a37cf35ec2f1e403a3d2ec48-1024x528.png 1024w, /uploads-archive/2017/02/be1b3c98a37cf35ec2f1e403a3d2ec48-300x155.png 300w, /uploads-archive/2017/02/be1b3c98a37cf35ec2f1e403a3d2ec48-768x396.png 768w, /uploads-archive/2017/02/be1b3c98a37cf35ec2f1e403a3d2ec48-228x117.png 228w, /uploads-archive/2017/02/be1b3c98a37cf35ec2f1e403a3d2ec48.png 1440w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>以前、<br />
<a href="/designer/%e6%97%a5%e6%9c%ac%e8%aa%9e%e3%81%aeweb%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%82%92%e6%8f%90%e4%be%9b%e3%81%97%e3%81%a6%e3%81%84%e3%82%8b%e3%82%b5%e3%83%bc%e3%83%93%e3%82%b95%e3%81%a4/" target="_blank">日本語のwebフォントを提供しているサービス5つ | スターフィールド株式会社</a><br />
としてwebフォントのサービスを行っている会社を紹介しましたが、他と比べると、台湾生まれなこともあり、中国語に強いのと、変わったフォントが多くあります。（バラエティ番組やアニメで使用されることも多いようです）</p>
<p>僕が一番良いと思ったのは、値段です。<br />
webフォントを導入したいけどお金がない、出ないという問題で断念するかと思います。</p>
<p><span style="font-size: 14pt;">しかし、DynaFontは一書体につき、<strong>14,400</strong>円</span>(一年の価格です！)<br />
<span style="font-size: 14pt;"> そしてなんと<strong>PV制限なし</strong>！</span>(2016年度のことで今後変わるかも)</p>
<p>これは他のサービスと比べるとかなり良いコスパかと思います！！<br />
(※2017年2月現在)</p>
<h3>ダイナコムウェアDynaFontのWebフォントシミュレーター</h3>
<p>話が逸れてしまいましたが、シミュレーターの話を進めたいと思います。</p>
<p>webフォントを試せるサービスなんて、僕は初めてみました。</p>
<p><a href="http://dfo.dynacw.co.jp/Simulator/DFOSimulation.aspx" target="_blank">Webフォントシミュレーター|DynaFont Online</a></p>
<p><img decoding="async" loading="lazy" width="1024" height="348" class="alignnone size-large wp-image-12537" src="/uploads-archive/2017/02/0ee3a4f58f53f269b0e70faabff2fed8-1024x348.png" alt="スクリーンショット 2017-02-07 12.00.00" srcset="/uploads-archive/2017/02/0ee3a4f58f53f269b0e70faabff2fed8-1024x348.png 1024w, /uploads-archive/2017/02/0ee3a4f58f53f269b0e70faabff2fed8-300x102.png 300w, /uploads-archive/2017/02/0ee3a4f58f53f269b0e70faabff2fed8-768x261.png 768w, /uploads-archive/2017/02/0ee3a4f58f53f269b0e70faabff2fed8-228x77.png 228w, /uploads-archive/2017/02/0ee3a4f58f53f269b0e70faabff2fed8.png 1210w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>フォントのサンプルはどのサービスもしっかり用意されていますが、<br />
やはり、実際のサイトなんかで試せた方がわかりやすいですよね！</p>
<p>自社のサイトを試しにやってみたいと思います。</p>
<h4>Before</h4>
<p><img decoding="async" loading="lazy" width="1024" height="510" class="alignnone size-large wp-image-12538" src="/uploads-archive/2017/02/4f4eb72a956712b8edd6c06abd22a948-1024x510.png" alt="スクリーンショット 2017-02-07 12.12.54" srcset="/uploads-archive/2017/02/4f4eb72a956712b8edd6c06abd22a948-1024x510.png 1024w, /uploads-archive/2017/02/4f4eb72a956712b8edd6c06abd22a948-300x150.png 300w, /uploads-archive/2017/02/4f4eb72a956712b8edd6c06abd22a948-768x383.png 768w, /uploads-archive/2017/02/4f4eb72a956712b8edd6c06abd22a948-228x114.png 228w, /uploads-archive/2017/02/4f4eb72a956712b8edd6c06abd22a948.png 1338w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<h4>After</h4>
<p><img decoding="async" loading="lazy" width="1024" height="720" class="alignnone size-large wp-image-12539" src="/uploads-archive/2017/02/75c7d6076c333b58db143a086db68960-1024x720.png" alt="スクリーンショット 2017-02-07 12.12.08" srcset="/uploads-archive/2017/02/75c7d6076c333b58db143a086db68960-1024x720.png 1024w, /uploads-archive/2017/02/75c7d6076c333b58db143a086db68960-300x211.png 300w, /uploads-archive/2017/02/75c7d6076c333b58db143a086db68960-768x540.png 768w, /uploads-archive/2017/02/75c7d6076c333b58db143a086db68960-228x160.png 228w, /uploads-archive/2017/02/75c7d6076c333b58db143a086db68960.png 1165w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>良し悪しは別として、けっこう印象が変わりますね笑</p>
<p>もう一つやってみたいと思います。</p>
<p><a href="https://catseye.jp/" target="_blank">CAT&apos;S EYE &#8211; カラコン通販のキャッツアイ</a></p>
<h4>Before</h4>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-12540" src="/uploads-archive/2017/02/5df65fe5caecd22957a85d1c37b6cedf.png" alt="スクリーンショット 2017-02-07 12.17.31" width="739" height="822" srcset="/uploads-archive/2017/02/5df65fe5caecd22957a85d1c37b6cedf.png 739w, /uploads-archive/2017/02/5df65fe5caecd22957a85d1c37b6cedf-270x300.png 270w, /uploads-archive/2017/02/5df65fe5caecd22957a85d1c37b6cedf-228x254.png 228w" sizes="(max-width: 739px) 100vw, 739px" /></p>
<h4>After (DFP優雅宋W7,W3)</h4>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-12541" src="/uploads-archive/2017/02/edbf2ceeaa93d0a7d057a9d5ec12c81a.png" alt="スクリーンショット 2017-02-07 12.21.02" width="735" height="830" srcset="/uploads-archive/2017/02/edbf2ceeaa93d0a7d057a9d5ec12c81a.png 735w, /uploads-archive/2017/02/edbf2ceeaa93d0a7d057a9d5ec12c81a-266x300.png 266w, /uploads-archive/2017/02/edbf2ceeaa93d0a7d057a9d5ec12c81a-228x257.png 228w" sizes="(max-width: 735px) 100vw, 735px" /></p>
<p>印象変わって面白いですね！</p>
<h3>終わり</h3>
<p>リニューアル時や、何かしら工夫したい時に試してみるといいかもしれません。<br />
ただ、フォントを変更して遊ぶだけでも楽しいです笑</p>
<p>海外のサイト(英語)はGoogleのおかげでwebフォントを導入しやすいため、かなり多くのサイトで導入されていますが、日本はどうなっていくのか気になる所です。</p>
<p>とはいえ、日本のサイトで1,2年前に比べると、導入しているサイトが増えているように思います。<br />
今後、webフォントの導入がデフォルトになる流れが来るのでしょうか？</p>
<p>制作者としてはそうなることを願っています。</p>
<p>昔書いた、webフォント関連の記事もよろしければご覧ください。</p>
<p><a href="/designer/%e3%83%95%e3%83%aa%e3%83%bc%e3%81%a7%e4%bd%bf%e3%81%88%e3%82%8b%e6%97%a5%e6%9c%ac%e8%aa%9e%e3%81%aeweb%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%82%92%e4%bd%bf%e3%81%8a%e3%81%86%ef%bc%81%ef%bc%81/" target="_blank">フリーで使える日本語のwebフォントを使おう！！</a>(2016.7)</p>
<p><a href="/designer/%e6%97%a5%e6%9c%ac%e8%aa%9e%e3%81%aeweb%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%82%92%e6%8f%90%e4%be%9b%e3%81%97%e3%81%a6%e3%81%84%e3%82%8b%e3%82%b5%e3%83%bc%e3%83%93%e3%82%b95%e3%81%a4/" target="_blank">日本語のwebフォントを提供しているサービス5つ</a>(2015.8)</p>
<p><a href="/designer/%e3%83%95%e3%83%aa%e3%83%bc%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%82%92web%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%81%a8%e3%81%97%e3%81%a6%e3%82%b5%e3%82%a4%e3%83%88%e3%81%a7%e4%bd%bf%e7%94%a8/" target="_blank">フリーフォントをwebフォントとしてサイトで使用してみる</a>(2014.8)</p>


好きなサイトを好きなフォントで試せる「webフォントシミュレーター」

<p>WEBデザインにおいてフラットデザイン(マテリアルデザインを含む)が一般化した今、<br />
装飾によるデザインに頼れないがゆえ、タイポグラフィの重要性はとても大きなものとなっています。</p>
<p>タイポグラフィの中でも、行間(line-height)はページの読みやすさに直接関係してくるため、重要なものです。<br />
読みやすさ、即ち、わかりやすさ は美しさのベースとなるものなので、<br />
デザイン性が重視されるサイトこそ必要性は高くなります。</p>
<p>私は正直なところ、これまでデザインするときに行間をほとんど感覚で決めていました。<br />
しかし恥ずかしながら最近になって、行間にもちゃんとルールがあるということを知りました。</p>
<p>ルールを知っていれば適切なデザインを迷わず効率的に行うことができますので、<br />
重要なポイントをまとめてみました。</p>
<h2>行間と行長</h2>
<p>まず、行間と行長の関係について。<br />
ここでは行長を一行あたりの文字数として扱います。（単位: 1文字 = 1W）</p>
<p>行長が長い場合、<br />
行間が狭いと、視線の移動中にどこを見ていたかわかり辛くなるために、<br />
美しくないデザインとなります。<br />
そのため、行長が長い場合は、行間を大きめにします。</p>
<p><a href="/uploads-archive/2017/01/line-height01-1.png"><img decoding="async" loading="lazy" class="alignnone wp-image-12460 size-full" src="/uploads-archive/2017/01/line-height01-1.png" alt="line-height01" width="760" height="134" srcset="/uploads-archive/2017/01/line-height01-1.png 760w, /uploads-archive/2017/01/line-height01-1-300x53.png 300w, /uploads-archive/2017/01/line-height01-1-228x40.png 228w" sizes="(max-width: 760px) 100vw, 760px" /></a></p>
<p><a href="/uploads-archive/2017/01/line-height02-1.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-12461" src="/uploads-archive/2017/01/line-height02-1.png" alt="line-height02" width="760" height="153" srcset="/uploads-archive/2017/01/line-height02-1.png 760w, /uploads-archive/2017/01/line-height02-1-300x60.png 300w, /uploads-archive/2017/01/line-height02-1-228x46.png 228w" sizes="(max-width: 760px) 100vw, 760px" /></a></p>
<p>逆に行長が短い場合、<br />
行間が広いと、文字のまとまり感がなくなるため、<br />
美しくないデザインとなります。<br />
そのため、行長が短い場合は、行間を小さめにします。</p>
<p><a href="/uploads-archive/2017/01/line-height03-1.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-12462" src="/uploads-archive/2017/01/line-height03-1.png" alt="line-height03" width="760" height="189" srcset="/uploads-archive/2017/01/line-height03-1.png 760w, /uploads-archive/2017/01/line-height03-1-300x75.png 300w, /uploads-archive/2017/01/line-height03-1-228x57.png 228w" sizes="(max-width: 760px) 100vw, 760px" /></a></p>
<h2>行間と行長とフォントサイズ</h2>
<p>フォントサイズが小さくなれば、<br />
行長が長くなりがちとなり、<br />
行間は広くなりがちとなります。</p>
<p>ただ、WEBページではline-heightを単位なしの相対値で指定できるので、<br />
行間が広くなる問題は回避しやすいかもしれません。</p>
<p>しかしながら、行長が長くなると、行間を適切に設定しても読みにくくなることは避けられないため、行長が適切な値になるように、要素自体の横幅を適切に調整して、<br />
行長が長くなりすぎないように配慮する必要があります。</p>
<p><a href="/uploads-archive/2017/01/line-height04.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-12463" src="/uploads-archive/2017/01/line-height04.png" alt="line-height04" width="760" height="141" srcset="/uploads-archive/2017/01/line-height04.png 760w, /uploads-archive/2017/01/line-height04-300x56.png 300w, /uploads-archive/2017/01/line-height04-228x42.png 228w" sizes="(max-width: 760px) 100vw, 760px" /></a></p>
<p><a href="/uploads-archive/2017/01/line-height05.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-12467" src="/uploads-archive/2017/01/line-height05.png" alt="line-height05" width="760" height="150" srcset="/uploads-archive/2017/01/line-height05.png 760w, /uploads-archive/2017/01/line-height05-300x59.png 300w, /uploads-archive/2017/01/line-height05-228x45.png 228w" sizes="(max-width: 760px) 100vw, 760px" /></a></p>
<p><a href="/uploads-archive/2017/01/line-height06.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-12464" src="/uploads-archive/2017/01/line-height06.png" alt="line-height06" width="760" height="136" srcset="/uploads-archive/2017/01/line-height06.png 760w, /uploads-archive/2017/01/line-height06-300x54.png 300w, /uploads-archive/2017/01/line-height06-228x41.png 228w" sizes="(max-width: 760px) 100vw, 760px" /></a></p>
<p>フォントサイズが大きくなれば、<br />
行長が短くなりがちになり、<br />
行間は狭くなりがちになります。</p>
<p>極端に文字が大きい場合、視線の移動が大きくなるのを防ぐため、行長を短くしたほうが見やすくなります。</p>
<p>レスポンシブでline-heightを相対値で指定している場合、<br />
デバイスによってフォントサイズが大きくなり、line-height不適切になって見づらくなる場合があるので、<br />
このあたりは注意が必要になってきます。</p>
<p><a href="/uploads-archive/2017/01/line-height07.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-12465" src="/uploads-archive/2017/01/line-height07.png" alt="line-height07" width="760" height="243" srcset="/uploads-archive/2017/01/line-height07.png 760w, /uploads-archive/2017/01/line-height07-300x96.png 300w, /uploads-archive/2017/01/line-height07-228x73.png 228w" sizes="(max-width: 760px) 100vw, 760px" /></a></p>
<p><a href="/uploads-archive/2017/01/line-height08.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-12466" src="/uploads-archive/2017/01/line-height08.png" alt="line-height08" width="760" height="317" srcset="/uploads-archive/2017/01/line-height08.png 760w, /uploads-archive/2017/01/line-height08-300x125.png 300w, /uploads-archive/2017/01/line-height08-228x95.png 228w" sizes="(max-width: 760px) 100vw, 760px" /></a></p>
<p><a href="/uploads-archive/2017/01/line-height09.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-12468" src="/uploads-archive/2017/01/line-height09.png" alt="line-height09" width="760" height="390" srcset="/uploads-archive/2017/01/line-height09.png 760w, /uploads-archive/2017/01/line-height09-300x154.png 300w, /uploads-archive/2017/01/line-height09-228x117.png 228w" sizes="(max-width: 760px) 100vw, 760px" /></a></p>
<h2>まとめ</h2>
<table>
<tbody>
<tr>
<th>行長</th>
<td>多い<br />
(40W)</td>
<td>普通<br />
(25-35W)</td>
<td>少ない<br />
(15-20W)</td>
</tr>
<tr>
<th>line-height</th>
<td>小さく<br />
(1.5前後)</td>
<td>大きく<br />
(2.0前後)</td>
<td>小さく<br />
(1.5前後)</td>
</tr>
</tbody>
</table>
<p>もちろん、デザインのイメージによっては、全体的にline-heightを大きめにしたり小さくしたいと言った必要が出てくると思いますので、基準として参考にしたいと思います。</p>
<h3>参考図書</h3>
<p><a class="link" href="https://www.amazon.co.jp/dp/4797359226" target="_blank">タイポグラフィの基本ルール -プロに学ぶ、一生枯れない永久不滅テクニック-[デザインラボ] 単行本 – 2010/12/2 大崎 善治 (著)</a></p>


Webのためのタイポグラフィ【行間編】

<p>いつもはchromeブラウザを使用して、ディベロッパーツールを使いながら制作をしています。<br />
昨今レスポンシブデザインがデフォルトみたいな感じになっており、<br />
幅を縮めたり、ユーザーエージェントを変えたりしながらPC，SPを確認しながら制作を進めています。</p>
<p>そんなこんなで情報収集している最中、<br />
少し前に、「Blisk」というブラウザに出会いました。</p>
<h2>Bliskとは</h2>
<p><img decoding="async" loading="lazy" width="1024" height="568" src="/uploads-archive/2016/11/screencapture-blisk-io-1477974703073-1024x568.png" alt="screencapture-blisk-io-1477974703073" class="alignnone size-large wp-image-12308" srcset="/uploads-archive/2016/11/screencapture-blisk-io-1477974703073-1024x568.png 1024w, /uploads-archive/2016/11/screencapture-blisk-io-1477974703073-300x166.png 300w, /uploads-archive/2016/11/screencapture-blisk-io-1477974703073-768x426.png 768w, /uploads-archive/2016/11/screencapture-blisk-io-1477974703073-228x126.png 228w, /uploads-archive/2016/11/screencapture-blisk-io-1477974703073.png 1271w" sizes="(max-width: 1024px) 100vw, 1024px" /><br />
web開発者用のブラウザということで、chromeと同じエンジン、そして見た目も似ています。<br />
ディベロッパーツールもほとんど同じで、さらに、chromeの拡張機能も使えるとのこと。</p>
<p><a href="https://blisk.io/" target="_blank">Blisk &#8211; a browser for web developers</a></p>
<p>さて、肝心の機能ですが、<br />
<strong>・スマホ/タブレットとパソコンを同時に見ることができる<br />
・スクロールが連動している<br />
・URLも連動している<br />
・オートリフレッシュ機能<br />
・エラーチェック<br />
・スクリーンショットが撮れる（登録が必要）</strong></p>
<h3>スマホ/タブレットとパソコンを同時に見ることができる</h3>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2016/11/e10bae5753cc48e1d9fbef19ab952bd4-1024x536.png" alt="%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-01-13-32-31" width="1024" height="536" class="alignnone size-large wp-image-12310" srcset="/uploads-archive/2016/11/e10bae5753cc48e1d9fbef19ab952bd4-1024x536.png 1024w, /uploads-archive/2016/11/e10bae5753cc48e1d9fbef19ab952bd4-300x157.png 300w, /uploads-archive/2016/11/e10bae5753cc48e1d9fbef19ab952bd4-768x402.png 768w, /uploads-archive/2016/11/e10bae5753cc48e1d9fbef19ab952bd4-228x119.png 228w, /uploads-archive/2016/11/e10bae5753cc48e1d9fbef19ab952bd4.png 1647w" sizes="(max-width: 1024px) 100vw, 1024px" /><br />
なんといってもこれがいい。同時に見ることができるので、cssを修正した時、スマホに影響が出てしまう時もしっかり確認できます。</p>
<h3>スクロールが連動している</h3>
<p>どちらかをスクロールするとそれに合わせてもう一方の画面も同じようにスクロールします。<br />
もちろんしないように設定することも可能です。</p>
<h3>URLも連動している</h3>
<p>どちらかでページをリンクした時に同じように遷移してくれます。<br />
確認する時に便利そうですね！<br />
フォーム系のPOSTとかはどうなるのでしょうか・・・？</p>
<h3>オートリフレッシュ機能</h3>
<p>htmlやcssを修正すると、ブラウザが自動的に更新してくれる機能です。<br />
これはgulp等で実装出来る機能がデフォルトでついている感じですね。</p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2016/11/4cdbcd3474e4f03e7351fdf352d29393-1024x578.png" alt="%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-01-13-24-34" width="1024" height="578" class="alignnone size-large wp-image-12313" srcset="/uploads-archive/2016/11/4cdbcd3474e4f03e7351fdf352d29393-1024x578.png 1024w, /uploads-archive/2016/11/4cdbcd3474e4f03e7351fdf352d29393-300x169.png 300w, /uploads-archive/2016/11/4cdbcd3474e4f03e7351fdf352d29393-768x433.png 768w, /uploads-archive/2016/11/4cdbcd3474e4f03e7351fdf352d29393-228x129.png 228w, /uploads-archive/2016/11/4cdbcd3474e4f03e7351fdf352d29393.png 1546w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>ドメインの指定が必要なのでローカルの場合はlocalhost使わないとダメそうですね。</p>
<h3>エラーチェック</h3>
<p>簡単なバリデートしてくれます。<br />
エラーがあると右上に数字が表示されます。</p>
<h3>スクリーンショットが撮れる</h3>
<p>スクリーンショットをそれぞれ撮ることができます。<br />
こちらはアカウント登録が必要になっております。</p>
<p>このブラウザはまだβ版なのでこれから進化していくのを期待してます。<br />
開発者にとってこのブラウザはデフォルトになってきそうですね。。。</p>
<p><a href="https://blisk.io/" target="_blank">Blisk &#8211; a browser for web developers</a></p>
<p>ちなみにこれらの機能は有料になりますが、1日30分はテストとして無料で使えるようです。<br />
無料で使う場合は、普通のchromeみたいなブラウザって感じですね&#8230;</p>


レスポンシブサイトに最適！web制作者用ブラウザ「Blisk」が便利そう！

<p>webの開発をしているとキャッシュを消す必要がある時があります。</p>
<p>今まではまるごとキャッシュを削除してたので、関係ないサイトのキャッシュも消えちゃって気分的に削除するのは嫌だったのですが、サイト毎に削除できるということを知りました。</p>
<p>主にChromeを使っているのでChromeのみの話になります。<br />
そしてmacでの話になります。</p>
<p>２つ方法があります。<br />
・設定から消す<br />
・リロードボタンで消す</p>
<p>まずは、設定から消す方法を説明します。</p>
<h2>設定から消す</h2>
<h3>1.設定を開く</h3>
<p>Chromeブラウザの右上のメニューから「設定」を開きます。</p>
<h3>2.詳細設定を表示&#8230;をクリック</h3>
<p>設定を開くと下の方に以下のように「詳細設定を表示&#8230;」があるのでそちらをクリック<br />
<img decoding="async" loading="lazy" src="/uploads-archive/2016/10/622b9bac575def77ca6bc87c297a0962.png" alt="%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-11-17-27-38" width="662" height="116" class="alignnone size-full wp-image-12207" srcset="/uploads-archive/2016/10/622b9bac575def77ca6bc87c297a0962.png 662w, /uploads-archive/2016/10/622b9bac575def77ca6bc87c297a0962-300x53.png 300w, /uploads-archive/2016/10/622b9bac575def77ca6bc87c297a0962-228x40.png 228w" sizes="(max-width: 662px) 100vw, 662px" /></p>
<h3>3.プライバシーの「コンテンツの設定&#8230;」をクリック</h3>
<p>「詳細設定を表示&#8230;」をクリックすると下に、以下のような画面が表示されます。<br />
そこで、「コンテンツの設定&#8230;」をクリックします。</p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2016/10/94eecc372ecfa6bb4acce11ca0f151b7.png" alt="%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-11-17-26-51" width="639" height="387" class="alignnone size-full wp-image-12208" srcset="/uploads-archive/2016/10/94eecc372ecfa6bb4acce11ca0f151b7.png 639w, /uploads-archive/2016/10/94eecc372ecfa6bb4acce11ca0f151b7-300x182.png 300w, /uploads-archive/2016/10/94eecc372ecfa6bb4acce11ca0f151b7-228x138.png 228w" sizes="(max-width: 639px) 100vw, 639px" /></p>
<h3>4.「すべてのCookieとサイト データ&#8230;」をクリック</h3>
<p>「コンテンツの設定&#8230;」をクリックすると、下記の画面がポップアップで表示されます。<br />
そのままの状態で「すべてのCookieとサイト データ&#8230;」のボタンをクリックします。</p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2016/10/70738debfb10272b0362430406dc4722.png" alt="%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-11-17-27-06" width="642" height="621" class="alignnone size-full wp-image-12210" srcset="/uploads-archive/2016/10/70738debfb10272b0362430406dc4722.png 642w, /uploads-archive/2016/10/70738debfb10272b0362430406dc4722-300x290.png 300w, /uploads-archive/2016/10/70738debfb10272b0362430406dc4722-228x221.png 228w" sizes="(max-width: 642px) 100vw, 642px" /></p>
<h3>5.Cookieとサイト データの画面で削除</h3>
<p>ボタンを押すと以下のようにドメインとデータの内容等が一覧で表示されます。<br />
（画像はfacebookで絞込をしています）</p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2016/10/b7bc20079306efc3caf79e8bb27fa2d2.png" alt="%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-11-17-27-22" width="700" height="624" class="alignnone size-full wp-image-12211" srcset="/uploads-archive/2016/10/b7bc20079306efc3caf79e8bb27fa2d2.png 700w, /uploads-archive/2016/10/b7bc20079306efc3caf79e8bb27fa2d2-300x267.png 300w, /uploads-archive/2016/10/b7bc20079306efc3caf79e8bb27fa2d2-228x203.png 228w" sizes="(max-width: 700px) 100vw, 700px" /></p>
<p>右上のinputに消したいサイトを記入すると検索することができます。</p>
<p>そして、削除したい箇所にホバーすると「✕」が表示されるのでクリックすると削除できます。</p>
<p>これでOKです！</p>
<p>サイト毎にできるのはいいですね！！</p>
<p>ただ、手順がちょっと多いので頻繁に消すような事になってしまう時は面倒くさいかもしれないですね！</p>
<h2>リロードボタンから消す</h2>
<p>こちらの方法はサイト毎なのか？ちゃんと消えてるのかっていうのがちょっと検証できていないのですが一応紹介します。（Cookieまでは消せない感じがします）</p>
<p>こちらはブラウザにあるリロードボタンを長押しすると以下のように表示されます。</p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2016/10/2016101810.png" alt="2016101810" width="312" height="119" class="alignnone size-full wp-image-12212" srcset="/uploads-archive/2016/10/2016101810.png 312w, /uploads-archive/2016/10/2016101810-300x114.png 300w, /uploads-archive/2016/10/2016101810-228x87.png 228w" sizes="(max-width: 312px) 100vw, 312px" /></p>
<p>ここで一番下の「キャッシュの消去とハード再読み込み」をクリックすればOKです。</p>
<p>ただし、長押ししてこのメニューが表示されるのには条件があります。</p>
<p>私自身最近まで長押しするとこのメニューが表示される時とされない時があり、どういう時に出てくるがわかっていませんでした。</p>
<p>ただ、気になって調べたらすぐわかりました笑</p>
<p>その条件とは、<strong>「デベロッパーツール」</strong>を開いている時になります。</p>
<p>「デベロッパーツール」の表示は、command + option + uか右クリックメニューの「検証」で表示できます。</p>
<p>こちらのほうが簡単でいいですね！</p>
<p>ただ、このやり方で消せない場合は最初の方法で削除する必要があるかと思います。</p>


Chromeでサイト毎にキャッシュやcookieを消す方法を今更知った

<p>webサイトのデザインをする時に、グリッドレイアウトのデザインを作成することがあります。</p>
<p>横幅は○○ピクセルで、マージンはどのくらい空けるか、<br />
3カラム、4カラム、5カラム、どうするかみたいなことを考える時、<br />
たまに電卓を使用して、それぞれ何ピクセルだとぴったり収まるか試行錯誤することがあります。</p>
<p>地味にめんどくさかったりするので、なにか良いツールないかと探したらありました。</p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2016/09/a260c304773c438b2d2f30d9af28cfc6-1024x410.png" alt="%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-27-1-51-01" width="1024" height="410" class="alignnone size-large wp-image-12042" srcset="/uploads-archive/2016/09/a260c304773c438b2d2f30d9af28cfc6-1024x410.png 1024w, /uploads-archive/2016/09/a260c304773c438b2d2f30d9af28cfc6-300x120.png 300w, /uploads-archive/2016/09/a260c304773c438b2d2f30d9af28cfc6-768x308.png 768w, /uploads-archive/2016/09/a260c304773c438b2d2f30d9af28cfc6-228x91.png 228w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p><a href="http://www.kenjisugimoto.com/gridpx/" target="_blank">Gridpx：グリッドデザイン計算ツール | Webデザイン便利ツール</a></p>
<p>使い方は簡単です。（というかそもそもがそんなに難しいことではないんですが&#8230;笑）<br />
<strong>・コンテンツの幅<br />
・カラム数<br />
・マージンの幅</strong><br />
を入力すると、<br />
<strong>各カラムを何pxで設定</strong>したらいいか計算してくれます。</p>
<p>シンプルなツールですが、地味に便利です！！</p>


グリッドデザイン時の計算に便利なサイト「Gridpx」

<p>レスポンシブデザインでは、<br />
PC、タブレット、スマホそれぞれに合わせて、フォントサイズを変更するということが多いと思います。</p>
<p>その際、タイトルなどのアイコンを、<br />
CSSでのアイコンの大きさや背景画像などをpxによって行っていた場合、<br />
フォントサイズごとに指定の変更を行う必要が出てきます。</p>
<p>私はずっとそうしてきたのですが、<br />
そうすると、アイコンが追加になったり、変更になった場合に、多くのCSSコードを追加・変更しなければならなくなるため、<br />
非常に面倒なことになります。</p>
<p>しかし、以下のサイトで、</p>
<p><a class="link" href="http://coliss.com/articles/build-websites/operation/css/resizeable-components-with-relative-units.html" target="_blank" rel="noopener">CSSの単位（em, rem）を使った、これから取り入れていきたい実装テクニックのまとめ | コリス</a></p>
<p>CSSでの単位として、emを積極的に使うことで、<br />
問題が解決されることを知りましたので、試しにやってみました。</p>
<p><a class="demo" href="/demo/ninomiya/121/">DEMO</a></p>
<h2>例</h2>
<p></p>

		<div id="crayon-649540264504a425741992" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
h2::before {
  content: "";
  display: inline-block;
  width: 1.333333em;
  height: 1.333333em;
  margin-right: 0.5em;
  background-image: url(images/icons.png);
  background-size: 10.416667em auto;
  vertical-align: middle;
}
.ttl-chat::before {
  background-position: 0 0;
}
.ttl-pc::before {
  background-position: -1.458333em 0;
}
.ttl-sp::before {
  background-position: -2.916667em 0;
}
.ttl-calender::before {
  background-position: -4.375em 0;
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540264504a425741992-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264504a425741992-2">2</div><div class="crayon-num" data-line="crayon-649540264504a425741992-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264504a425741992-4">4</div><div class="crayon-num" data-line="crayon-649540264504a425741992-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264504a425741992-6">6</div><div class="crayon-num" data-line="crayon-649540264504a425741992-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264504a425741992-8">8</div><div class="crayon-num" data-line="crayon-649540264504a425741992-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264504a425741992-10">10</div><div class="crayon-num" data-line="crayon-649540264504a425741992-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264504a425741992-12">12</div><div class="crayon-num" data-line="crayon-649540264504a425741992-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264504a425741992-14">14</div><div class="crayon-num" data-line="crayon-649540264504a425741992-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264504a425741992-16">16</div><div class="crayon-num" data-line="crayon-649540264504a425741992-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264504a425741992-18">18</div><div class="crayon-num" data-line="crayon-649540264504a425741992-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264504a425741992-20">20</div><div class="crayon-num" data-line="crayon-649540264504a425741992-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264504a425741992-22">22</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540264504a425741992-1"><span class="crayon-i">h2</span><span class="crayon-sy">:</span><span class="crayon-sy">:</span><span class="crayon-e">before</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264504a425741992-2"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">content</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">""</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264504a425741992-3"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">display</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i">inline</span>-<span class="crayon-i">block</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264504a425741992-4"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">width</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">1.333333em</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264504a425741992-5"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">height</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">1.333333em</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264504a425741992-6"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">margin</span>-<span class="crayon-i">right</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">0.5em</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264504a425741992-7"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">background</span>-<span class="crayon-i">image</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-e">url</span><span class="crayon-sy">(</span><span class="crayon-i">images</span>/<span class="crayon-i">icons</span><span class="crayon-sy">.</span><span class="crayon-i">png</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264504a425741992-8"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">background</span>-<span class="crayon-i">size</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">10.416667em</span><span class="crayon-h"> </span><span class="crayon-i">auto</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264504a425741992-9"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">vertical</span>-<span class="crayon-i">align</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i">middle</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264504a425741992-10"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-649540264504a425741992-11"><span class="crayon-sy">.</span><span class="crayon-i">ttl</span>-<span class="crayon-i">chat</span><span class="crayon-sy">:</span><span class="crayon-sy">:</span><span class="crayon-e">before</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264504a425741992-12"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">background</span>-<span class="crayon-i">position</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264504a425741992-13"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264504a425741992-14"><span class="crayon-sy">.</span><span class="crayon-i">ttl</span>-<span class="crayon-i">pc</span><span class="crayon-sy">:</span><span class="crayon-sy">:</span><span class="crayon-e">before</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540264504a425741992-15"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">background</span>-<span class="crayon-i">position</span><span class="crayon-sy">:</span><span class="crayon-h"> </span>-<span class="crayon-cn">1.458333em</span><span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264504a425741992-16"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-649540264504a425741992-17"><span class="crayon-sy">.</span><span class="crayon-i">ttl</span>-<span class="crayon-i">sp</span><span class="crayon-sy">:</span><span class="crayon-sy">:</span><span class="crayon-e">before</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264504a425741992-18"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">background</span>-<span class="crayon-i">position</span><span class="crayon-sy">:</span><span class="crayon-h"> </span>-<span class="crayon-cn">2.916667em</span><span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264504a425741992-19"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264504a425741992-20"><span class="crayon-sy">.</span><span class="crayon-i">ttl</span>-<span class="crayon-i">calender</span><span class="crayon-sy">:</span><span class="crayon-sy">:</span><span class="crayon-e">before</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540264504a425741992-21"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">background</span>-<span class="crayon-i">position</span><span class="crayon-sy">:</span><span class="crayon-h"> </span>-<span class="crayon-cn">4.375em</span><span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264504a425741992-22"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>今回の例では、</p>
<ol>
<li>width, height</li>
<li>background-size</li>
<li>background-position</li>
</ol>
<p>について、emを使った指定を行ってみました。</p>
<p>設定するときは、pxをemへ置き換えるための計算をしなくていはいけないので、若干手間のように感じますが、<br />
一つ設定してしまえば、あとは、font-sizeごとに設定する必要が無いため、<br />
全体としては手間を減らすことができました。</p>
<p>注意点としては、emで指定する場合、小数点6桁くらいまでは指定しないと、微妙にずれてしまうことがあるようです。</p>
<p>今後はこの方法を使っていきたいと思います。</p>
<p>&nbsp;</p>
<h3>追記(2019.09.10)：</h3>
<p><a href="https://launchcart.jp/blog/img%e3%82%bf%e3%82%b0%e3%81%a7%e8%aa%ad%e3%81%bf%e8%be%bc%e3%82%93%e3%81%a01%e3%81%a4%e3%81%aesvg%e7%94%bb%e5%83%8f%e3%82%92id%e3%81%a7%e5%87%ba%e3%81%97%e5%88%86%e3%81%91%e3%82%8b%e6%96%b9%e6%b3%95/" target="_blank" rel="noopener">1つのSVGでアイコンを出し分ける方法</a>を紹介しました</p>

【CSS】レスポンシブでは画像を使ったアイコンの指定をemで行う

<p>マッチングサイトを制作する場合に情報が多いという点からwordpressという選択肢があると思いますが、マッチングや会員登録の機能を追加するのにはプラグインを駆使してもなかなかの手練れでなければ難しいところです。</p>
<p>そこで他にもっと簡単な方法はないかと探してみると、実はど真ん中のCMSが存在していました、その名もosclass。</p>
<p><a href="https://osclass.org/"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-11838" src="/uploads-archive/2016/08/1.gif" alt="1" width="640" height="585" /></a></p>
<p>osclassはwordpress同様、オープンソースです。どうやらインドの方が開発したそうです。</p>
<p>なんとデフォルトで会員登録機能やマッチング機能が備わっています。工数を考えるとosclassを使った方が早い！</p>
<p>wordpressに比べるとマイナーなので、それほど情報はありませんがこちらのサイトでosclassのインストール方法や日本語化のプラグインなど詳しく記事を書いてらっしゃるのでご参考下さい。</p>
<p>参考サイト：<a href="https://triz-web.com/toronomado/howto-install-for-osclass/">https://triz-web.com/toronomado/howto-install-for-osclass/</a></p>
<p>管理画面はこんな感じで、どことなくwordpressに似ていて入りやすいかなという印象です。</p>
<p><a href="/uploads-archive/2016/08/3.gif"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-11845" src="/uploads-archive/2016/08/3.gif" alt="3" width="640" height="565" /></a></p>
<p>デザインに関してはは、今一つな感じですがデモサイトはこんな感じです。</p>
<p><a href="https://demo.osclass.org/realestate/">不動産のデモサイト</a></p>
<p><a href="https://demo.osclass.org/cars/">車のデモサイト</a></p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #Web

2018/03/14

2018/01/17

2018/01/16

2017/10/10

2017/09/13

2017/09/12

2017/08/17

2017/06/14

2017/05/10

2017/03/15

2017/02/08

2017/02/07

2017/01/11

2016/11/01

2016/10/18

2016/10/12

2016/10/12

2016/08/31