> ハイブランドのアイテムや海外セレクトアイテムを販売されるヴィンテージショップ、Hedy（エディ）。国内ECサイトや店舗での展開のみならず、海外向けの越境EC事業も行われています。今回は、Hedyを運営される株式会社ファイヤーワークスの事業部長、布施杏奈様、海外事業部のリ・ゼンゼン様、アドリアナ・マリー・イ様に、越境EC事業やLaunchCartについてお話を伺いました。

## 全世界向けに販売。国内向けと同じくらい売り上げが伸びています。
### Hedyの越境EC事業が現在に至るまでの経緯を教えてください。
<p><img loading="lazy" src="/uploads-archive/lc/2021/01/fireworks3-300x225.jpg" alt="" width="350" height="262" class="alignright size-medium wp-image-6025" srcset="/uploads-archive/lc/2021/01/fireworks3-300x225.jpg 300w, /uploads-archive/lc/2021/01/fireworks3-1024x769.jpg 1024w, /uploads-archive/lc/2021/01/fireworks3-768x577.jpg 768w, /uploads-archive/lc/2021/01/fireworks3-600x450.jpg 600w, /uploads-archive/lc/2021/01/fireworks3.jpg 1536w" sizes="(max-width: 350px) 100vw, 350px" /></p>
<p><span class="speaker" style="color: #ff3392;">布施様：</span>2013年に日本では未入荷の、海外アクセサリーのセレクトアイテムを日本のサイトで販売する事業からHedyは始まりました。そして、別事業でも海外向けの事業を行っていたりと、社全体が海外志向がとても強かったため、2015年から越境EC事業をスタートさせました。</p>
<p>　今では全世界向けに販売をしていて、一番売れ行きが好調なのが中国です。ヨーロッパやアメリカからご購入いただくこともありますが、ご購入者様が現地にいらっしゃる中華系の方だったりすることもあります。中国の次にご購入いただくのは、マレーシアやシンガポールの中華系の方々です。でも実は、中国向けが好調になってきたのは、ここ２～３年の話で、それまでは1か月に1件注文が入るくらいでした。日本向けが主で、海外向けはおまけといった感覚だったのですが、<strong>今では日本向けと同じくらい、むしろ日本向けの方が負けてしまうくらい中国の方々に気に入ってもらい、ご購入いただいています。</strong></p>

## こだわりのブランディングと、日本からでも丁寧なお客様対応
### 中国の方にそこまで気に入っていただけるための秘訣はありますか？
<p><img loading="lazy" src="/uploads-archive/lc/2021/01/e37820313518f2cfa827700542bdd486-300x297.png" alt="" width="350" height="346" class="alignright size-medium wp-image-6029" srcset="/uploads-archive/lc/2021/01/e37820313518f2cfa827700542bdd486-300x297.png 300w, /uploads-archive/lc/2021/01/e37820313518f2cfa827700542bdd486-1024x1014.png 1024w, /uploads-archive/lc/2021/01/e37820313518f2cfa827700542bdd486-768x761.png 768w, /uploads-archive/lc/2021/01/e37820313518f2cfa827700542bdd486-600x594.png 600w, /uploads-archive/lc/2021/01/e37820313518f2cfa827700542bdd486.png 1442w" sizes="(max-width: 350px) 100vw, 350px" /></p>
<p><span class="speaker" style="color: #ffaa33;">アドリアナ様：</span>国内向け、海外向け関わらず、Hedyはブランディングにとてもこだわっています。ハイブランドヴィンテージ×モードファッションという洗練された世界観、いわゆる花柄ワンピースではなくジャケットパンツ、といったHedyの世界観が他にはなくて気に入っていただけたことが秘訣かもしれません。微博(Weibo)、小紅書（RED）等のSNSの配信をリがずっと担当していて、このようなSNSからECサイトへの流入がすごく増えました。最近は、海外に強みを持たれているアフィリエイトの企業様とご一緒させていただいて、SNSやインフルエンサーさんに紹介していただけるような動きを強化しようとしています。これが成功したら<strong>日本向け以上に海外向けの方が売り上げが上がるのではないかと期待</strong>しています。</p>
<p><span class="speaker" style="color: #b133ff;">リ様：</span>それと、中国で日本のヴィンテージ品というと、質が高くてヨーロッパのものより価格が安いという印象もあります。弊社の場合、自社にバイヤーがおり、自分たちで鑑定も買い付けもして、状態が良くて売れるだろうという価格のものを揃えているという点も、お客様に気に入っていただけている理由かもしれません。</p>

### 中国向けに販売する上でご苦労されたことはありますか？
<p><img loading="lazy" src="/uploads-archive/lc/2021/01/fireworks5-300x300.jpg" alt="" width="300" height="300" class="alignright size-medium wp-image-6026" srcset="/uploads-archive/lc/2021/01/fireworks5-300x300.jpg 300w, /uploads-archive/lc/2021/01/fireworks5-150x150.jpg 150w, /uploads-archive/lc/2021/01/fireworks5-768x768.jpg 768w, /uploads-archive/lc/2021/01/fireworks5-600x600.jpg 600w, /uploads-archive/lc/2021/01/fireworks5.jpg 960w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p><span class="speaker" style="color: #b133ff;">リ様：</span>ブランド品に対する関税がすごく高くて、ヴィンテージ品であっても新品と同じくらいの請求をされてしまうことがあります。また、お客様の対応も日本とはかなり文化の違いがあります。基本的にはWeChat経由でお問い合わせいただくのですが、洋服の場合サイズ感を確かめたいから、着て写真を撮ってみてくださいだとか、カバン等の場合は傷がついていないか、写真を撮って送ってくださいといったご要望をいただいていて、日々対応に追われています。（※写真右は、実際にリ様が撮影されたものを合成したものです。）</p>

## 全ての販売チャネルの在庫を一元管理した業務の効率化
### １点物の商品を複数のプラットフォーム（店舗、国内向けEC、越境EC）で扱われる上で、在庫管理等はどのようにされているのですか？
<p><span class="speaker" style="color: #ff3392;">布施様：</span>店舗、国内向けEC、越境ECのすべてのプラットフォームの在庫を一元管理することができる、ネクストエンジンを接続することで在庫連携をしています。ネクストエンジンを導入する前は、社内共有SkypeやLINEで「これ売れました！」と連絡すると、各プラットフォームから担当者がその商品を消す、という作業を地道に行っていました。最初は中国向けが売れていなかったため、手作業でも何とか管理できていたのですが、中国が売れ始めてからは複数プラットフォームで同じ商品が売れてしまい、１つの商品の取り合いのようになってしまって大変でした。当時は、売れていく勢いに自分たちがついていけていなかったですね。</p>

## 海外からのアクセススピードを重視し、越境ECをするには国外サーバーが不可欠
### LaunchCartを選んでいただいた理由を教えてください。
<p><img loading="lazy" src="/uploads-archive/lc/2021/01/fireworks2-300x225.jpg" alt="" width="350" height="262" class="alignright size-medium wp-image-6024" srcset="/uploads-archive/lc/2021/01/fireworks2-300x225.jpg 300w, /uploads-archive/lc/2021/01/fireworks2-1024x769.jpg 1024w, /uploads-archive/lc/2021/01/fireworks2-768x577.jpg 768w, /uploads-archive/lc/2021/01/fireworks2-600x450.jpg 600w, /uploads-archive/lc/2021/01/fireworks2.jpg 1536w" sizes="(max-width: 350px) 100vw, 350px" /></p>
<p><span class="speaker" style="color: #ff3392;">布施様：</span>実は、2015年に越境ECを始めたときは、日本語のサイトと同じプラットフォームを使用していました。言語切り替えボタンを設置して、クレジットカードとPaypalを導入しているので、海外の方にも買っていただけますよ、といった感じです。ただ、当時は海外から日本のサーバーにアクセスするにはかなり時間がかかり、注文確定まで辿り着かず、離脱してしまうという課題がありました。そこで、社内外様々な方にご相談したところ、国外サーバーの方が良いのではないか、というアドバイスをいただき、LaunchCartに辿り着きました。今でも、<strong>サーバーが日本でなく海外にあるということ</strong>は、サイトへのアクセススピードに直結する部分だと思うので、海外向けのECビジネスを行う上で非常に重要視しています。</p>

## ゆくゆくは日本初のブランドを海外へ
### 今後の展望について教えてください。
<p><span class="speaker" style="color: #ff3392;">布施様：</span>中国向けの越境ECに関しては、もっと認知を上げる施策を一番に行っていきたいです。そのため、SNSの強化やアフィリエイトの活用を行い、もっと中国でのプレゼンスを上げていけたら良いな、と思っています。ゆくゆくは海外店舗も出してみたいです。それと、現状は海外ブランドのヴィンテージ品をメインで販売していますが、日本発のブランドを、海外の方にもっと知ってもらえるような動きも加速していくつもりです。</p>

### 越境EC事業を検討中の方にアドバイスをお願いします。
<p><img loading="lazy" src="/uploads-archive/lc/2021/01/fireworks1-300x225.jpg" alt="" width="350" height="262" class="alignleft size-medium wp-image-6023" srcset="/uploads-archive/lc/2021/01/fireworks1-300x225.jpg 300w, /uploads-archive/lc/2021/01/fireworks1-1024x769.jpg 1024w, /uploads-archive/lc/2021/01/fireworks1-768x577.jpg 768w, /uploads-archive/lc/2021/01/fireworks1-600x450.jpg 600w, /uploads-archive/lc/2021/01/fireworks1-1536x1153.jpg 1536w, /uploads-archive/lc/2021/01/fireworks1-2048x1538.jpg 2048w" sizes="(max-width: 350px) 100vw, 350px" /></p>
<p><span class="speaker" style="color: #ff3392;">布施様：</span>リとアドリアナがいることで、かなり越境EC事業が上手く回っている実感があります。なので、1人でも2人でも良いので、外国人でなくても現地を知っている人と一緒にEC事業は行った方が良いと思います。なぜかというと、やはり<strong>日本人だけだと海外の温度感が全く違うことに気づけず、色々なチャンスを逃してしまうことがある</strong>からです。例えば、独身の日のセールは日本にほとんどないですし、ブラックフライデーも年に1度の大イベントだなんて思っている日本の方はあまりいらっしゃらないですよね。他にも、日本ではライブ配信がすごく遅れていますが、中国では主流の方法です。カスタマーサポートだけではなく、そういった国ごとの色々な違いを肌感覚で知っていて、教えてくれる存在が社内にいるということは、越境EC事業を行う上ですごく大切なことだと思います。</p>


large_fireworks4.jpg

medium_fireworks4.jpg

small_fireworks4.jpg

thumbnail_fireworks4.jpg

fireworks4.jpg

株式会社ファイヤーワークス様

<h3>はじめに</h3>
<div style="padding-left: 15px;">
  本投稿では以下を扱います<br />
  ・viChrome と言う GoogleChrome アドオンの不具合解消<br />
  ・解消のためのアプローチ<br />
  ・GitHubへのcommitまでのフロー</p>
<h3>経緯</h3>
<div style="padding-left: 15px;">
  <a href="https://sterfield.co.jp/blog/other/it%e6%a5%ad%e7%95%8c/%e3%82%ad%e3%83%bc%e3%83%9c%e3%83%bc%e3%83%89%e3%83%96%e3%83%a9%e3%82%a6%e3%82%b8%e3%83%b3%e3%82%b0%e3%81%a7web%e5%b7%a1%e5%9b%9e%e3%82%92%e3%81%93%e3%81%aa%e3%81%99/">以前の投稿</a>でviChromeと言う<br />
  「キーボードでブラウザの挙動をマッピングして制御する」<br />
  アドオンを紹介しました。</p>
<p>  しかし、Chromeのアップデートに伴って使えなくなって久しいのです。<br />
  以下のGitHubにあったIssue経由で解決出来そうだ！<br />
  と言う事で幾度かに渡って挑み、最終的に解消しました。</p></div>
<h3>Keyバインドの仕様変更</h3>
<div style="padding-left: 15px;">
  最初に「恐らくキーバインドが機能していないだろう」と思い以下にたどり着きました<br />
  <a href="http://pasokatu.com/15313">http://pasokatu.com/15313</a></p>
<p>  確かにv54あたりから使えなくなった。<br />
  しばらくv53までをインストールして使うも、再起動するたびに戻さなければならない苦行。<br />
  keyIdentifierをkeyに置き換えてみるも動かず。しばらく諦め期間が続きました。</p>
<p>  改めて改造してみようと本家ViChromeのGitHubを見ると以下のIssueに行き着く。<br />
  <a href="https://github.com/k2nr/ViChrome/issues/67">https://github.com/k2nr/ViChrome/issues/67</a></p>
<p>  mgi166氏が何やら改良してる！？<br />
  <a href="https://github.com/mgi166/ViChrome/branches/all">https://github.com/mgi166/ViChrome/branches/all</a><br />
  Chrome v57まで併せて更新している。これは使えそう。</p>
<p>  早速自分のrepositoryへFork。<br />
  リンクフォーカスを実行してみると・・・動いた！！<br />
<img decoding="async" loading="lazy" src="/uploads-archive/2018/01/ScreenShot-2018-01-16-11.08.42-300x179.png" alt="" width="300" height="179" class="alignnone size-medium wp-image-13531" srcset="/uploads-archive/2018/01/ScreenShot-2018-01-16-11.08.42-300x179.png 300w, /uploads-archive/2018/01/ScreenShot-2018-01-16-11.08.42-768x457.png 768w, /uploads-archive/2018/01/ScreenShot-2018-01-16-11.08.42-228x136.png 228w, /uploads-archive/2018/01/ScreenShot-2018-01-16-11.08.42.png 917w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>  が、スクロールが機能しない。。。<br />
  制御している &#8220;mode.js&#8221; を直截編集してリロードしながら探ってみる。</p>

		<div id="crayon-649540264c4da577064718" 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><span class="crayon-language">JavaScript</span></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;">
  Mode.prototype.reqScrollDown = function(args, times) {
      return g.view.scrollBy(0, g.model.getSetting("scrollPixelCount") * times);
  };</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-649540264c4da577064718-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264c4da577064718-2">2</div><div class="crayon-num" data-line="crayon-649540264c4da577064718-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-649540264c4da577064718-1"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">Mode</span><span class="crayon-sy">.</span><span class="crayon-i">prototype</span><span class="crayon-sy">.</span><span class="crayon-i">reqScrollDown</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-i">args</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">times</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264c4da577064718-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-i">g</span><span class="crayon-sy">.</span><span class="crayon-i">view</span><span class="crayon-sy">.</span><span class="crayon-e">scrollBy</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-i">g</span><span class="crayon-sy">.</span><span class="crayon-i">model</span><span class="crayon-sy">.</span><span class="crayon-e">getSetting</span><span class="crayon-sy">(</span><span class="crayon-s">"scrollPixelCount"</span><span class="crayon-sy">)</span><span class="crayon-h"> </span>*<span class="crayon-h"> </span><span class="crayon-i">times</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264c4da577064718-3"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>該当箇所でconsole.logを出力すると表示される。<br />
  つまりscrollByが機能していない。<br />
  更にview.jsのscrollByでOverrideしているところで window.scrollBy すると動く。<br />
  スクロールする差分のtop, leftは値が来ている。<br />
  と言う事は</p>

		<div id="crayon-649540264c4df961923706" 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><span class="crayon-language">JavaScript</span></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;">
  $(document.body).animate({</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-649540264c4df961923706-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-649540264c4df961923706-1"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-i">document</span><span class="crayon-sy">.</span><span class="crayon-i">body</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-i">animate</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>ここが動いていないと結論。</p>
<p>  &#8220;document.body javascript animate&#8221;で検索してみると見事ヒット<br />
  <a href="http://chaika.hatenablog.com/entry/2017/09/22/090000">http://chaika.hatenablog.com/entry/2017/09/22/090000</a><br />
  これもChromeの仕様変更による、、、document.documentElementに置き換えてしまえば動く。<br />
  Firefox等では・・・と記述もあるがChromeのアドオンなので無視。</p>
<p>  最終的に以下のcommitで解決！<br />
  <a href="https://github.com/m-ohba-sterfield/ViChrome/commit/b795405539c34b6163753b80bea910e71d4facf5">https://github.com/m-ohba-sterfield/ViChrome/commit/b795405539c34b6163753b80bea910e71d4facf5</a></p>
<p>  ViChrome愛好家のお役に立てれば幸いです。</p></div>

ViChromeのIssueを解決

激闘！YouTubeをブラウザ無しで視聴する！

<h3>マウスジェスチャー機能とは？</h3>
<div style="padding-left: 15px;">
  マウスのクリックや上下左右の動きによって<br />
  各アプリケーションの機能を割り当てることです。<br />
  (主にブラウザ、ファイラーで使われます)</div>
<h3>ブラウザの動作をマウスジェスチャーで楽に！</h3>
<div style="padding-left: 15px;">
  今回はChromeのストアが提供している<br />
  「CrxMouse」<br />
  をChromeにインストールしてみました。</p>
<p>  <a haref="https://chrome.google.com/webstore/detail/crxmouse/jlgkpaicikihijadgifklkbpdajbkhjo/related?utm_source=chrome-ntp-icon">こちら</a>のページへ遷移して<br />
  右上の「無料＋」を押下してインストールするだけです。<br />
  Chromeの再起動は必要ありません。<br />
  「設定」＞「拡張機能」のCrxMouseの有効チェックをONにします。</p>
<p>  デフォルトの状態だけでも、それなりに色々出来ます。</p>
<p>  「↓→」：タブを閉じる<br />
  「↑←」：左のタブへ移動<br />
  「↑→」：右のタブへ移動<br />
  「↑↓」：再読み込み</p>
<p>  などなど。。</p>
<p>  自分の良く使う機能だけを登録して<br />
  自分だけの軽快なブラウジングを実現してみましょう！！</p></div>
<h3>参考：カスタマイズ例</h3>
<div style="padding-left: 15px;">
  例えば「→↓→」で「右側のタブ全てを閉じる」を設定します。</p>
<p>  拡張機能のアドオン一覧からCrxMouse下にある「オプション」押下。<br />
  「Mouse Gestures」の下部にある「Edit Gestures」が登録済みのジェスチャーです。</p>
<p>  登録済みのジェスチャはActionのプルダウンメニューを変更するだけ。</p>
<p>  今回の「→↓→」のジェスチャは未登録なので<br />
  ページ真ん中あたりにある「Add new」を押下します。</p>
<p>  すると画面がグレーアウトします。<br />
  この状態で右クリックを押したまま「→↓→」となぞります。</p>
<p>  画面上部に「→↓→」と表示されたら<br />
  Actionの中から「Close all tabs on the right」を選択し、Save押下。</p>
<p>  これだけです。</p></div>
<p>参考：<br />
<a href="/blog/other/it%e6%a5%ad%e7%95%8c/%e3%82%ad%e3%83%bc%e3%83%9c%e3%83%bc%e3%83%89%e3%83%96%e3%83%a9%e3%82%a6%e3%82%b8%e3%83%b3%e3%82%b0%e3%81%a7web%e5%b7%a1%e5%9b%9e%e3%82%92%e3%81%93%e3%81%aa%e3%81%99.html">viChrome</a></p>


マウスジェスチャーを活用してみよう

<p>Firefoxが29になり、デザインが一新されてスッキリし、私好みになったので、最近起動ブラウザNo2になりつつあるのですが、タブの右クリックメニューを見ていて、「<strong>タブをピン留め</strong>」「<strong>タブを保護</strong>」「<strong>タブをロック</strong>」の違いがよく分からなかったので調べてみました。</p>
<p>Chromeは「<strong>タブの固定</strong>」というメニューしかなく、基本的にはGmailなど常に開いておくようなタブを設定しています。</p>
<h2>タブをピン留め</h3>
<p>タブのピン留めをすると、アイコンのみで小さくなり、削除ボタンがなくなり、右クリックメニュー以外でタブが閉じることが出来なくなります。<br />
Chromeの「<strong>タブの固定</strong>」と似ていますが、Chromeではタブを閉じることが出来ます。</p>
<blockquote><p>ピン留めされたタブと通常のタブとの違いは？<br />
ピン留めされたタブは小さいです (サイトのアイコン (favicon) のみが表示され、タイトルは表示されません)。また、これらはタブバーの左端に置かれます。<br />
ピン留めされたタブには閉じるボタンがありません。間違って閉じられることのないようにするためです。<br />
ピン留めされたタブを閉じるには、タブを Ctrl キーを押しながらクリック し、メニューから タブを閉じる を選択します。<br />
ピン留めされたタブのページの内容が変更されると、青く光って通知されます。<br />
Gmail をアプリタブに設定した場合、例えば、別のタブを表示している時に新着メールを受信すると Gmail のタブが光ります。<br />
Firefox の終了時に設定されたすべてのピン留めされたタブは、次回起動時に再びアプリタブとして開かれます。<br />
ピン留めされたタブ内でクリックした別の Web サイトへのリンクは新規 タブに開かれるため、アプリタブが変更されることはありません。<br />
Facebook など多くの Web アプリでは、すでにサイト側でこのような動作をするように作られていますが、そうでないサイトでも新規 タブに開かれます。</p></blockquote>
<p><a href="https://support.mozilla.org/ja/kb/pinned-tabs-keep-favorite-websites-open">https://support.mozilla.org/ja/kb/pinned-tabs-keep-favorite-websites-open</a></p>
<h2>タブを保護</h3>
<p>タブを閉じられなくする機能<br />
タブの右端の閉じるボタンがなくなる他、キーボードショートカットや右クリックメニューでもタブを閉じることが出来なくなります。</p>
<h2>タブをロック</h3>
<p>ロックされたタブ内のリンクはすべて新しいタブに開く機能<br />
内部リンクも別タブに開いてしまうので、Googleなどの検索エンジンのページをロックしておくような利用シーンが想定されますね。</p>
<h2>まとめ</h3>
<p>上記、3つはそれぞれ併用をすることが出来ます。<br />
保護とロックを同時にするとタブが凍結された形になり、消すことも遷移することもなくなります。<br />
Firefoxの公式サポートでもピン留め以外は、記載がなかったので何かの参考になれば幸いです。</p>


Firefoxの「タブをピン留め」「タブを保護」「タブをロック」の違い

<p>githubで管理されているサイトのリニューアルのお仕事を頂いておりまして、エラーページについてご依頼があったため、調べてみました。</p>
<p>通常のエラーページであれば、.htaccessを書き換えることでカスタムされた404などのエラーページを表示することが出来ます。</p>
<p>githubで管理している場合は、ドキュメントルートに<code>404.htmlを置くだけでよいようです。</code></p>
<h2>エラーページの設定方法</h3>
<p>ちなみに、通常エラーページを表示させる場合の記述</p>
<p>※表示させたいファイル名を「404.html」とした場合</p>
<blockquote>
<div>ErrorDocument 404 /404.html</div>
</blockquote>
<div>となり同様にErrorDocumentの後の数字を403、500などに変更すればそれに応じたエラーページが表示されます。</div>
<h2>githubのエラーページガイドライン</h3>
<div>さらにgithubの場合は、ガイドラインにエラーページの規程をしておりまして、それが以下になります。</div>
<div></div>
<div><a href="https://github.com/styleguide/templates/2.0" target="_blank">https://github.com/styleguide/templates/2.0</a></div>
<div></div>
<blockquote>
<div>Error pages should be built such that they require zero scripting, zero javascript, and zero dependency on anything whatsoever. That means static HTML with inline CSS and base64-encoded images.</div>
</blockquote>
<div>エラーページは、JavaScriptや他のスクリプトなどの外部ファイルに依存しないように構築すべきである。それは、style要素でCSSを記述し、base64でエンコードした画像を使用した静的なhtmlということ意味している。</div>
<div>
<blockquote><p>The following are banned from every error page:</p>
<ul>
<li>All <code>&lt;script&gt;</code> tags with an <code>src</code> attribute.</li>
<li>All JavaScript that loads external data.</li>
<li>All <code>&lt;link&gt;</code> tags.</li>
<li>All <code>&lt;img&gt;</code> tags with an <code>src</code> pointing to a URL.</li>
</ul>
</blockquote>
</div>
<div>エラーページは以下を禁止する。</div>
<div>
<ul>
<li>全てのsrcを含む&lt;script&gt;</li>
<li>全ての外部データを読み込むJavasript</li>
<li>全ての&lt;link&gt;タグ</li>
<li> 全てのURLを指定した<code>&lt;img&gt;タグ</code></li>
</ul>
<p>と記述されています。</p>
</div>
<div>さらに、上記ページないでテンプレートを入手することも出来るようになっています。</div>
<div></div>
<h2>まとめ</h3>
<p>このようにガイドラインが設定されていて読み込んでみると確かにその通りですね。</p>
<p>本来、それぞれの不具合によって、エラーページが表示される訳ですから、エラーページに外部ファイルを読み込ませて更なるエラーを誘発する、もしくは、リソースを無駄遣いするということを回避すべきだということですね。</p>


githubのカスタムエラーページの設定（404,500,503など）

<p>mailto構文でメールを送る機能において文字コードをどうするか？</p>
<p>これは、今後も必ず発生する課題となるので、備忘録を兼ねてまとめておきたいと思います。</p>
<h2>結論</h3>
<p>まず、簡単に結論から述べてしまうと、</p>
<ul>
<li>UTF-8では、Windows環境Outlook系で文字化け</li>
<li>ShiftJISでは、Gmail、Thunderbird等で文字化け</li>
<li>すべての環境、メーラーで対応する術はなし</li>
</ul>
<p>となります。</p>
<h2>どちらも一長一短</h3>
<p>ご自身の環境で試されたい方はこちらが参考になります。</p>
<p><a href="http://dd-kaihatsu-room.blogspot.jp/2013/04/mailtoutf-8sjis.html" target="_blank">http://dd-kaihatsu-room.blogspot.jp/2013/04/mailtoutf-8sjis.html</a></p>
<p>Windows環境はS-JIS、それ以外のグローバルサービスではUTF-8がサポートされています。</p>
<p>メーラーを選択して、文字コードを出し分けるということは難しいため、上記のサイトのように</p>
<p>S-JISとUTF-8の両方のリンクを出さない限り、文字化けを回避することは出来ません。</p>
<p>&nbsp;</p>
<p>また、Outlook2007以降のようですと、UTF-8をサポートするというオプションがあるようですが、サイト上から一般のユーザー様にこのような操作を強いるのは酷ですね。</p>
<p><a href="http://www.justhpbs.jp/hpb16/outlook-mailto.html" target="_blank">http://www.justhpbs.jp/hpb16/outlook-mailto.html</a></p>
<h2>考察</h3>
<p>ということで、じゃあどうするのがベストなのかというのを、考察してみました。</p>
<p>通常のプロセスですとシェアに応じてプライオリティを定めるというのが王道かと思いますが、残念ながらメーラーシェアの統計でここ一年のようなものは容易に見つけることは出来ませんでした。</p>
<p>Gmialやsmartphoneが普及した昨今、WindowsベースのOutlookはシェアが落ちていることは確実かと思いますので、UTF-8一択でいいと結論着けてしまっていいものでしょうか？</p>
<p>私が考えたのは以下です。</p>
<ul>
<li>メールで送るという行為自体がレガシーなものになりつつある。</li>
<li>シェアする方法としてTwitterやFacebookが普及している。</li>
</ul>
<p>という前提からGmailやThunderbirdを使いこなすユーザーは、他の方法でシェアをする。</p>
<p>メールで送るという機能を使うユーザーこそ、Windows系に合致するため、メーラーはShiftJISで設定しておくのがベストではないかと考えます。</p>


メーラーの文字コードはUTF-8とS-JISどちらがいい？

<p>弊社では、MTを利用して、お客さまのwebサイトを作成することがよくあります。</p>
<p>そしてその運用もすることが多いのですが、</p>
<p>いつも通り、新しい記事を作り、カテゴリをチェックし、公開したら・・・</p>
<p>カテゴリのチェックがすべて外れて保存がされておりました。</p>
<p>何回やってもダメなので、調べてみると、Firefoxのver16のバグとのこと。</p>
<p>MTのverは、MT4.12とMT5.02でした。</p>
<p>&nbsp;</p>
<p>解決方法がシックス・アパートのよくある質問に載っておりました。</p>
<p><a href="http://www.movabletype.jp/faq/firefox-16-patches.html" target="_blank">Firefox 16 でカテゴリおよびフォルダの選択が保存できない。</a></p>
<p>&nbsp;</p>
<p>verが４つしかなく、自分のverにあったものがないっっ！！</p>
<p>&nbsp;</p>
<p>と思いましたが、強行で、ver4.38のpatchをダウンロードし、アップしてみたところ、</p>
<p>無事修正されました！！</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>方法は簡単ですが、自分でサーバー情報いじれない場合は、</p>
<p>別のブラウザを使うしかないようですね。</p>
<p>&nbsp;</p>
<p>firefox早くバージョンアップしないかな〜<br />
最後に<strong>面白い記事</strong>を紹介。</p>
<p>デザインする自分にとって、ものすごく同意する記事です。</p>
<p><a href="http://gori.me/it/22110">デザインをする人もデザインを依頼する人も見てもらいたい！「デザインができるまで」が話題に！ | gori.me</a><br />
<a href="http://gori.me/it/22125">クライアントよ、お前の依頼の大変さを思い知れ！これが「デザイン修正」だ！ | gori.me</a></p>
<p>&nbsp;</p>


Blogブログ

Articles

Contact Us