Visual Studio CodeのEmmetでlang=”en”をlang=”ja”にする方法


最近はHTMLやJavaScriptのコードを書くときには、Visual Studio Codeというエディタを利用しています(自分の利用している環境は、Windowsのv1.6.1です)。

前はBracketsを利用していたのですが、Visual Studio Codeのほうが軽くて多機能な感じがするので、気に入っています。

そのVisual Studio Codeに標準でついているのが、Emmetという機能。短縮記法でHTMLを書くことができ、例えば、『ul>li*4』と入力してタブキーを押すと、下記のようなHTMLが出力されます。

そんな中でも基本的なのは、『html:5』もしくは『!』(多分、こっちのほうがよく使う)を書いた後にタブキーを押して出力される、HTMLの基本的なテンプレート。簡単なサンプルページ的なものを作るときはまずこの記法を使うことが多いのですが、一つ問題があって、デフォルトでは下記のようにlang属性がenとなってしまっています。

これをjaにしたいと思って調べてみたら、snippets.jsonというファイルを編集したらいいということが分かりました(参考:Visual Studio Code for Windows、HTML ファイルで使う Emmet のスニペットを変更する – Browser)。ただ、ここに書いてあるフォルダが自分の環境には無く、いろいろ探してみるとVisual Studio Codeをインストールしたフォルダ内にありました。

C:\Program Files (x86)\Microsoft VS Code\resources\app\node_modules\emmet\lib\snippets.json

多分、32ビット環境なら、『Program Files (x86)』ではなく、『Proguram Files』フォルダの下にあると思います。

このファイルを編集すれば、lang=”en”から、lang=”ja”に変更できます。ただし、場合によってはこの場所にあるファイルは編集できなくなっていると思うので、ファイルを右クリックしてプロパティを選び、セキュリティからUsersの変更権限を与えて起きましょう(フルコントロールでもいいと思います)。

開くと、3行目に”lang”というキーに”en”という値が設定されています。予想できる通り、ここの”en”の値を”ja”にすれば、lang=”en”が、lang=”ja”に置き換わります(ついでにその下の”locale”の値も”en-US”から”ja-JP”にしといてもいいかもしれません)。

と、ここまで書いてVisual Studio Codeが更新を促してきたので更新したら、このファイルまで更新されちゃいました……(なので、lang=”en”に戻る)。

Emmetの機能ではないですが、Visual Studio Codeの機能として提供されているユーザー定義スニペットを用いて、追加しなきゃいけないのかもしれません(参考:Visual Studio Code for Mac ユーザー独自のスニペット定義(Emmet編) – Qiita

日本語環境だと、メニューの『ファイル』→『基本設定』→『ユーザースニペット」→HTMLと入力してエンターキーを押すことで、スニペットの設定ファイルが開きます。そこに全体を囲む波括弧({})の中に、下記のようにスニペットの設定を追加します。

こうすると、prefixの値に指定している『html』と入力した後にタブキーを押すと、lang属性がjaとなっているテンプレート文字列が出力されました(残念ながら、『!』ではダメでした)。

ただやっぱり、Visual Studio Codeを更新してもsnippets.jsonの内容を保持する方法があればそれが一番いいと思います。もし、やり方を知っているかたがいたら教えてください。

間違って閉じてしまったChromeを元の状態に戻す方法


Chromeを使っていて発見したのでここにメモ。

Chromeにはいくつかショートカットキーがあります。ある日、左側のタブに移動したいと思い、ショートカットキーの『Ctrl+Shift+Tab』をキー入力しようとしました。ところが、Tabキーを押すつもりが指が少しずれてしまい、『Ctrl+Shift+Q』を押してしまいました。そしたら、Chromeが閉じてしまいました。いろいろ調べてみると、Resource Hackerでchrome.dllを編集すると『Chrl+Shift+Q』でChromeを終了するように割り当てることができると書いてあったのですが、自分はそんなことをやった覚えはありません(参考:キーボード ショートカット – Google Chrome まとめWiki)。ちなみに、『Ctrl+Shift+W』や『Alt+F4』でChromeが閉じることは知っています。

それはともかく、これは困りました。Chromeには多数のタブを開いていたので、いちいち開き直すのは面倒だし、どれを開いていたかも覚えていません。

そこでふと、直前に閉じたタブを開き直す『Ctrl+Shift+T』というショートカットキーがあることを思い出しました。いやでも、あくまで開き直すのはタブであってウィンドウじゃないしなぁ……。なんて思って試してみたら、直前に開いていたウィンドウが新しいウィンドウで開き直されました。『Ctrl+Shift+T』にそんな使い方があったとは(なお、IEとFirefoxでも同様に『Ctrl+Shift+T』で直前に閉じたタブを開くのですが、直前に閉じたウィンドウは開き直されませんでした)。

ちなみに、この直前に閉じたタブを開く『Ctrl+Shift+T』というショートカットキー、知らないなら便利なので覚えておいてください。会社でもこのショートカットキーを知らないため、間違ってタブを閉じてしまってショックを受ける人が何人かいたので、教えときました。

Jetstartの航空便選択ページ印刷時にレイアウトを崩さない方法


(タイトルはJetstarとしていますが、印刷するとレイアウトが大きく崩れる他のサイトでも有効かもしれません)

久々の更新。最近どうにも仕事が忙しくて(いいわけ)。

本当いうと、そんなに忙しいと感じてはいないのですが、出張が増えました(というより、今までしたことがなかった)。出張には、新幹線を使う時もあれば格安航空を使うこともあります(実は明日の月曜日もJetstarを使って出張です)。

で、そんなJetstarのウェブサイトにおいて、日時や行き先で検索して、その結果を印刷しようとしたら、レイアウトがかなりくずれてしまうことが分かりました(下記のような感じ)。
jetstar3

原因を調べてみると、外部CSSを指定しているlinkタグのmedia属性にscreenと指定していることが分かりました(参考:ほんっとにはじめてのHTML5:[42-2] link media=” ” で 外部CSSをメディア別に切り替えよう)。これだとコンピュータの画面にしかCSSが適用されません。

そこで、開発者ツールを使って、印刷用のスタイルにも適用することにします。ブラウザでF12キーを押して開発者ツールを開き、コンソール画面に行って、下記のように指定して実行します。

JetstarのサイトではjQueryを読み込んでいるので、上記の指定で、media属性がscreenとなっているlinkタグのmedia属性を空にしています。
jestar2
上記はChromeでの利用例です。media属性がscreenとなっているlinkタグのmedia属性が空になっているのが分かると思います。

その後、印刷プレビューを見てみると、下記のようにレイアウトが崩れなくなりました。
jetstar1
なお、画像が表示されてないのは、背景指定となっているからです。背景も印刷するように指定したら表示されます。Chromeなら、左側の詳細設定をクリックして、『背景のグラフィック』にチェックをつけると画像が表示されます。

なお、この方法はCSS内でMedia Queriesを指定して、コンピュータの画面のみにスタイルを適用している場合はうまくいかないので注意してください。

Altキーを押しながらテンキーを押してみよう


現場のプロが教えるWebデザイン&レイアウトの最新常識 知らないと困るWebデザインの新ルール3で知ったのですが、Altキーを押しながらテンキーを押すという文字入力方法があるようです。

例えば、Altキーを押しながらテンキーで145という順番に押してAltキーを離すと、『‘』(シングルクォート左)と入力できます。同じように、Altキーを押しながらテンキーで146という順番に押してAltキーを離すと、『’』(シングルクォート右)と入力できます。
参考:ALTキーとテンキーで文字入力をしよう | 気ままな宇宙人

上記の参考リンク先にも有りますが、変換対応シフトJISコード表を見るとどういう順番でテンキーを押した時にどういう文字を入力できるかが分かります。16進数表記で書かれてるので分かりにくいという方は、ブラウザのコンソールを開いて(F12キーを押してコンソールタブをクリック、もしくはCtrl+Shift+Jキーを押す)、下記コードを実行してみれください。

すると16進数で書かれていた箇所が10進数表記に変わり、下記のようになると思います。
シフトJISコード表
元々が16進数表記なので少しわかりづらいかもしれませんが、ある文字のセルの左端のセルの数値と上端のセルの数値を足した値をAltキーを押しながらテンキーで押すとその文字を入力することができます。
例えば、二重丸記号は33168+13=33181なので、試しにAltキーを押しながらテンキーの33181を押してAltキーを押すと、確かに『◎』と入力されました。

こんな入力方法、今後滅多にやらないとは思いますが、今までWindowsパソコンを十数年使ってきて初めてしったので、思わずブログに書きました。

なお、なぜWebデザイン&レイアウトの本にこんなテクニックが書いてあったかというと、欧文サイトを作る時の記号の使い方について書かれてあったためです。

文中の引用符に使うダブルクォーテーションやシングルクォーテーションはShift+2キーの『”』やShit+7キーの『’』で囲むのではなく、『“”』や『‘’』で囲みましょうとのことです。『”Hello”』や『’Hello’』ではなく、『“Hello”』や『‘Hello’』と書きましょうと。なお、『“』(ダブルクォーテーション左)はAltキーを押しながら147、『”』(ダブルクォーテーション右)はAltキーを押しながら148、『‘』(シングルクォーテーション左)はAltキーを押しながら145、『’』(シングルクォーテーション右)はAltキーを押しながら146です。

後、『I’m a student.』ではなく、『I’m a student.』と書いたほうがいいとのこと。欧文サイトを作る時はこういうところも気にしたほうがいいのかもしれませんね。うちの会社で運用しているWebサービスも英語版がありますが、全くもって守れてません。

覚えやすい様々なウェブサービスの異なるパスワードを作る方法


GoogleだとかYahooだとかTwitterだとか、いろんなところでパスワードは必要になってきますが、みなさんはそれぞれのパスワードを使いまわしたりしていないでしょうか。自分も前まで使いまわしていたのですが、最近はセキュリティ面のことも考えて、それぞれ異なるパスワードを使うようにしています。

ただ、そこで問題となるのが、複数のパスワードを覚えられないということ。Googleは、『ashufdhsa』で、Twitterは『ahsiudf9』で、Yahooは『ys6978fhan』なんてつけても確実に覚えられません。

でも、ちょっとした工夫をすることで、それぞれのウェブサービスに異なるパスワードをつけて、かつ覚えられる、というより思い出せるようにすることができます。それは、ドメイン名やウェブサービス名からパスワードを作るルールを作って、それをパスワードにすることで異なるパスワードを設定することができます。
詳しくは下記ページを参考。
ちょっとセキュアな「いつもの」パスワード – ぼくはまちちゃん!(Hatena)

この方法をやる場合、まず一つ、『いつものパスワード』というものが必要になります。とりあえず、ここでは『q2w3er5t79』とします。

次にパスワードを作成するルールを決めます。今回は下記のように決めました。

  • ドメイン名のニ文字目をパスワードの3文字目(wの箇所)に置き換える
  • ドメイン名の文字数の下一桁をパスワードの4文字目(3の箇所)に置き換える
  • ドメイン名の一文字目をシーザー暗号のようにアルファベット順で一文字ずらした文字をパスワードの6文字目(rの箇所)に置き換える
  • ドメイン名の最後の文字の大文字をパスワードの8文字目(tの箇所)に置き換える

あまりルールを設けすぎると覚えづらくなって本末転倒なので、このへんで。

では、上記のルールでいろいろなウェブサービスのパスワードを作ってみます。

例えば、Googleだと、変換に利用する文字列は『google』となります(ドメインがwww.google.co.jpなため)。この文字列の二文字目は『o』、文字数は『6』、一文字目を一文字ずらした文字は『h』、最後の文字の大文字は『E』となるので、変換後のパスワードは『q2o6eh5E79』となります。

同じ要領で、ニコニコ動画だと変換に利用する文字列は『nicovideo』なので、変換後パスワードは『q2i9eo5O79』となります。

住信SBIネット銀行だと、変換に利用する文字列は『netbk』ですが、サービス名と全く関連がないのでここでは『sbi』を変換に利用する文字列とします。すろと変換後のパスワードは『q2b3et5I79』となります。

Yahoo! JAPANだと、変換に利用する文字列は『yahoo』なので、変換後のパスワードは『q2a5ez5O79』となりますす。が、Yahoo!JAPANの場合はかなりチェックが厳しいので、これだと「登録情報から推測されにくいパスワードを入力してください」なんて表示されてしまうかもしれません。自分も昨年、パスワードを変更するように促されたため、思いつくかぎりのいろいろな文字列を試してたのですが、だめでした。なので、パスワード生成ツールか何かを使って本当にランダムな20文字の文字列を生成してそれをパスワードにしています。覚えれる自信が全くありません。

他にもいろいろ工夫できそうですね。ちょっとセキュアな「思い出せる」パスワード – 考えたことや、学んだことの記録というブログエントリーにもパスワードを作る工夫が記述されています。他には、QWERTY配列をヒントに作るという手もあるかもしれませんね。ドメイン3文字目のキーの右隣の文字とか。スマホでも大概の場合、パスワード入力しようとすると、QWERTY配列のソフトウェアキーボードが表示されることが多いですし、QWERTY配列を覚えなければいけないという自体にはほとんどならないと思います。