1時間であなたもなれる、ハッタリWEB出来るマン!実務でも使えるWEB小技集その一。

WEBの仕事話

誰でもすぐ使える。コマンドプロンプトとChromeデベロッパーツール。

こんにちは、さぼてんです。本日は、皆さんに、社内や知り合いにハッタリを利かすための、小技をご紹介します。(ゲス顔)

地方WEB担とは、孤独な戦士です。提案する時も、ほぼ一人。ゆえに、普段からハッタリで、私の言うことは説得力あるんだぞ!と周囲に(ほどほどに)アピールしておく必要があります。

そんな時に役立つ心の友がこの2つ。そう、PCにある程度詳しい人なら、だれでも知っている
・コマンドプロンプト(DOSプロンプト)
・Chromeデベロッパーツール

です。

MS-DOSプロンプト
Chromeデベロッパーツール

重要なのは、起動が速いこと。

この2つには共通して言えることがあります。それは、何も知らない人間から見ると、

「おお!なんかすごい事やってる」感が、半端ないことです。
そして、さらに重要なのは速いこと。
いくらプロっぽい作業を見せたくても、まごまごと「えーとこうして、ああして…」などとしていたら興ざめです。

DOSプロンプトは、「windowsキー」をおもむろに叩き、「cmd」と打ち込みエンターで起動。また、デベロッパーツールは、ブラウザ上で「F12」を押すだけで、起動してくれます。さらに、「F5」も追加で押せば、スマホ表示に早変わりし、見た人は「おお…、おお…っ」となるわけです。(ゲス顔)

後は、
DOSプロンプトでは、「netstat」と打ってエンターしたり「ping」と打ってエンターしたりすれば、何かハッカーぽい文字列がかえってきます。そこで、「ふむ…、なるほど…」とか言えば、周りは大体、「すげーこんなん分かるんすか!」と羨望の眼差しで見てくれます。

新人にハッタリをかますのにも効果的!(逆もしかり)

中高年の前でやるのが効果的ですが、30~50代はPCに詳しい人も多いので注意。意外と若者、新人にも効くので、ちょっと先輩の凄い所見せたろか…?と思った時はお勧めです。(全然すごくない)

ただし、ITリテラシーの高い若者だと、「大したことをしてない」のが、丸分かりであり、また、それほど詳しくない子でも、後でしっかり裏をとったりするので要注意。
ばれた場合は、「いやー、大したことしてないってばれた?君はちゃんと調べてて凄いな!見込みあるよ!」と言って、話しをそらすのがお勧めです。

ハッタリツールと誤解を招かないために。本来は超仕事で役立つツールです。

ちなみに、私は、こんな邪な心をもって、これらのツールを使っているわけではありません。というか、DOSプロンプトはともかく、WEBサイトの編集に多少でも関わる人間であれば、デベロッパーツールは、もはや必須のツールです。
せっかくなので、本来の使い方の内、自分なりによく使うシーンをまとめておきます。ハッタリツールだと誤解を招いてはいけないので。本来は、仕事で滅茶苦茶使えるツールであることも、ご紹介します。

DOSプロンプト

よく使う機能
「ping

特定のIPと自分のIPが繋がっているか確かめる時に使うコマンドです。具体的には、「PC共有したくても、あれ?つながんねーぞ?」とか、「LAN経由のプリンターが見つからん!ほんとに線つながってんの?」とか、「ネットワーク不調の原因が分からん…。とりあえずルーターには繋がるのか?」などの問題が起きた時、原因特定をスピーディに行うために使います。
やり方は、
DOSプロンプトの画面で、
「ping 192.168.0.1」(ここは知りたいIPを入れる)
を打つだけ。
もっとも、これだけで問題が解決することはほぼなく、そこから先が重要なのだが…。色々と便利なのは確かです。

Chromeデベロッパーツール

よく使う機能

  • スマホ表示
  • ソースの一部書き換えプレビュー機能

このツールは非常に多機能なので、書き出すと1記事や2記事で終わらないのですが、面倒なのでその辺はカットします。いくらでも、上手に説明しているブログが他にあるしね!

私がお勧めするのは、前述したスマホ表示と、ソースの一部書き換えプレビュー機能です。

スマホ表示は、色々やり方がありますが、デベロッパーツールを起動して、スマホのアイコンをクリック、そして「F5」を押すのがお勧めです。(以降は起動してF5だけでOKになります)

起動した後、このスマホのアイコンをクリックして「F5」を押す

現在は、PCサイト、スマホサイト両方あるのが、当たり前になってきているので、いつもPCで見てるサイトを、スマホで見るとどんな感じに見えるのか、サッと比較するのに便利です。当然、逆もしかり。

そして、意外と開発者以外は知らないのが、ソースの一部書き換えプレビュー機能です。

簡単にいえば、どんなサイトでも、自分の思う通りに表示を変えてみることができます。例を出しますね。

こちらのヤフートップ記事。デベロッパーツールを起動すると、サイトのソースが表示されます。そして、変更したい箇所を見定めます。

ここの見出しを変えるか・・・

そして、この変更したい箇所をダブルクリックすると、編集モードに変わり、自分で内容を変更できるようになるので、好きなテキストを打ってみましょう。

はい。あっさり正反対の内容に変えられました。

ねっ?簡単でしょ?

勿論、あくまでデベロッパーツールで、一時的に表示を変えて見せてるだけで、本来のYahooは何も変わってません。

ですが、隣の席の人に、「おい、ちょっとこのニュース見てみろよ!凄いぞ!」とかいう、かわいいイタズラには充分使えます。(おい)

というのは嘘で、本来は、サイト編集をするときに、

  • 想定通り表示されてないときに、スピーディに検証するため
  • 別パターンの表示をさせたいときの、高速テスト

などで活用されます。

機会は待つものではなく、つくるもの

いかがでしたか?もしどちらも使ったことがなければ、ぜひ会社や友達の前で、サラッとやってみせてください。おそらく「やるなこいつ」と少しは思われるのではないでしょうか。

えっ?そんな作業をする機会があまりないって?

いえいえ。そんなことありません。

機会は待つのではなく、つくるものですよ。ネットワークに異常があったら、とりあえずDOSプロンプト!。ネット関連で問題があったら、とりあえずデベロッパーツール!と、習慣づけてみてください。

本来そこまでする必要がなかった案件だったとしても、ハッタリは存分効きますし、本当に、ツールを使って問題が解決することも多々ありです。

それに、問題が起きた時、そんな風に本気で向かっている姿を、けなしたりする人は、まずいません。大切なのは、邪な動機ではなく、心意気ではないでしょうか。

それが意外と、よい結果になったりするものです。

よろしければ、一度試してみてくださいませ。