晴れの日

WEBディレクターのおっさんの試行錯誤をさらす日記

スマホのブラウザシェアって…と焦った話

四十路にして新米なんていうのもおこがましいが、スマホ対応のディレクションをはじめてまだ半月程度。

いきなり一発目の案件で考えさせられる事案が発生した。

 

Androidの標準ブラウザでレイアウト崩れてますけどどうしますか?」

 

検証チームからこのような指摘があげられてきた。

しかもリリース直後に。

 

勉強不足なことこのうえないが、Androidの標準ブラウザはChromeだとズーッと思っていた。

Androidもちょっとは触らないとダメだよって神様に言われてるんだなんて気持ちと、検証中に気づいてよって気持ちが入り混じりながらも、対応を考えなくてはいけない。

 

とはいえ、今回の案件は既存ページの更新だったので、これまでの対応ブラウザを確認すれば、修正すべきか否かが分かるはずである。

そこで、前任者にこれまでは標準ブラウザを対象としていたか確認をしたところ、「今回の検証に含めるかどうか検証チームになんて伝えました?」と、期待とはちょっと異なる回答。

以前の対応方針を聞きたかったのだけど、いきなり私の不手際を指摘されても困惑してしまう…。

ちなみに、このレイアウト崩れは前任者が担当した案件から発生している問題だったのですが…という言葉はグッと飲み込んだ。

私としてはもともとある不具合だっただけに「標準ブラウザは検証の対象外です」の一言が欲しかっただけどなぁ…。

 

少々愚痴っぽくなってしまったが、検証チームとも相談した結果、レイアウト崩れが発生しているとはいえ、数pxズレてしまっているだけで、コンテンツが見れないわけではなかったので、仕様として片付けてしまった。

 

それにしても、今のチームはずっとスマホ関連のサイトディレクションをやっているはずなのに、ブラウザに対する意識があまりないのか、組織としてどこまでを対象にして、どこから切り捨てるのかをあまり考えていないように見受けられる。

 

またまた愚痴っぽくなってしまったが、このままでは、事業側から対応ブラウザについて質問が来たところで的を得た回答など出来るはずがないので、ブラウザシェアを調べてみた。

そして行き着いたのがココ。

 

・StatCounter Global Stats

f:id:snydysClimber:20170620120129p:plain

http://gs.statcounter.com/

 

全然知らなかったんだけど、ブラウザシェアを調べるならまずここをチェックすべき的なサイトらしい。

勉強不足なことこのうえない…。

 

さっそく日本のシェアを調べてみる。

「Browser Market Share」から、「Platform」で「Mobile」、「Region」は「Japan」を選択。

そして出てきた結果がコレ。

 

Source: StatCounter Global Stats - Browser Market Share

Android」となっているのが標準ブラウザのことかな。

抽出時点のシェアでAndroidは1.54%。

開発・サポートが終了していることを考えると、古い機種を使用している人がわずかに残っている程度なのかな。

担当サービスのユーザーはネットリテラシーが高いため、今回発生した不具合に遭遇する割合は1%もいないと考えられる。

結果、今回の標準ブラウザを対象外とした判断は間違っていなかったのではないかと。

 

ただ、自社のサービスではネットリテラシーがあまり高くないユーザー層をターゲットとしているものもあるため、今回の判断が全てのサービスに適応できるかというと、ちょっと足を止めて考えないといけないのかもしれない。

 

…とはいえ1.54%ですからねぇ…。

Chrome拡張機能って便利だと今さら気づいた話

colisさんでGoogleのデベロッパーツールを紹介する記事を見て、Chromeが便利だったことを思い出した。(今更)

いかんせん先月まで担当していたサービスがIE推奨だったため、Chromeなんてのは表示確認するぐらいで、ほとんど使う機会はなかった。
さりとて今月からはそのIEしばりも無くなり、さらにスマートフォン対応も必要になってくるので、Chromeに乗り換えるまたとないチャンス。
ということで、この機会に整理・追加した拡張機能をまとめておきたいと思います。


1.Window Resizer
https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=ja

f:id:snydysClimber:20170607185054j:plain

あらかじめ設定されているサイズにウィンドウサイズを変更してくれる便利ツール。
レスポンシブデザインの確認のためというのもあるんだけど、キャプチャを取るときに毎回サイズが変わるのが気になっていたので、ウィンドウサイズを程よく変更してくれる拡張機能を探して行き着いた。
ただ、タブを開きすぎていると、幅がうまくリサイズされないことがあるようなので、注意が必要。

 

2.Sizzy
https://chrome.google.com/webstore/detail/sizzy/nfhlbmjiiogoelaflfclodlkncbdiefo?hl=ja

f:id:snydysClimber:20170607185049j:plain

いくつかのデザイン関連の記事にもまとめられていたので、これはあらかじめ追加していた拡張機能
レスポンシブデザインの確認にはこれがあればひとまず充分なのではないかな。
実際の業務が始まってみないと分からんけど。

 

3.FireShot
https://chrome.google.com/webstore/detail/take-webpage-screenshots/mcbpblocgmgfnpjjppndjkmgjaogfceg?hl=ja

f:id:snydysClimber:20170607185041j:plain

Chromeの最新バージョンではデベロッパーツールを使うとフルページのキャプチャが取れるようになったので、もしかしたら使わなくなるかな…と思ったけど、やっぱり必要っぽい。
デベロッパーツール開いて、Ctrl+Shift+pでcapって入力するっていうのはやっぱり手間。
ツークリックでキャプチャが取れるFireShotの方が断然便利に感じる。

 

4.Alt & Meta Viewer
https://chrome.google.com/webstore/detail/alt-meta-viewer/jjcjblcbnjhgjlnclhficglfjedhpjhl?hl=ja

f:id:snydysClimber:20170607185039j:plain

実際に表示されているテキストはちゃんと校正しても、じつはaltに誤植が潜んでいて…なんてことをたまにやらかしていたので、前々から入れていた拡張機能
校正苦手。

 

5.Font Face Ninja
https://chrome.google.com/webstore/detail/fontface-ninja/eljapbgkmlngdpckoiiibecpemleclhh?hl=ja

f:id:snydysClimber:20170607185046j:plain

これからWEBフォントがたくさん使われるようになると、どんなフォントなのかソースコードを見ないでも分かれば便利だなと思って入れた拡張機能
今のところ全く使ってないけど、きっと近い将来役に立つと信じてる。

 

6.Black Menu for Google
https://chrome.google.com/webstore/detail/black-menu-for-google/eignhdfgaldabilaaegmdfbajngjmoke?hl=ja

f:id:snydysClimber:20170607185142j:plain

これは言わずも知れた感がありますが、Googleの各サービスのサマリーが見れて、さらにショートカットにもなっちゃう拡張機能
これを入れて気づいたのは、思ったよりGoogleの各サービスを使っていなかったってこと。
でもまだアンインストールはしない予定。

 

あ、それとわざわざ紹介するほどじゃないですが、Onenote拡張機能は入れています。


他にもきっとまだ便利な拡張機能はたくさんあるんだろうけど、インストールしすぎても使い切れない不器用な子(40歳)だから、ここら辺でしばらく様子を見ようと思います。

ガントチャートを簡単に作りたい話

この6月から久しぶりにWEBディレクターとして異動になった。

 

今までは自分の担当サービスがあったので、業務量もコントロールしやすかったが、これからはそうも言ってられない。
しかも、今まではだいたいの案件が自己完結できていたが、これからは制作部門へ発注することになる。
これまで以上にタスクとスケジュールの管理が大切になってくる。

 

業務を進める上でガントチャートをタダで簡単に作れたら便利なんじゃないかと探してみると、やっぱりいろいろありますね。
いくつか試してみたので、備忘録的に感想をまとめておきます。

 

1.Elegantt
https://elegantt.com/

f:id:snydysClimber:20170602181125p:plain

Chrome拡張機能で、Trelloというタスク管理サービスをベースにガントチャートを作れるもの。
触り始めはとても使いやすそうだと感じていたけど、僕の使い方が悪かったのか、拡張機能の不具合なのか分からないけど、途中からスケジュールをうまく登録出来なくなってしまった。
何度か解決を試みたものの、やっぱりダメで、このツールは見送ることに。

 

2.Brabio!
http://brabio.jp/

f:id:snydysClimber:20170602181219p:plain

Eleganttがうまく使えなかったのは、英語が理解できなかったからに違いないと、次に手をつけたサービスが「Brabio!」。
日本のサービスだし、5人までならタダで使えるということだったので、試してみたけど、速攻解約した。
ただ、なんで解約したか全然記憶がない…。
今、サービスのページを見直してみると、悪くなさそうなんだけど…とは思うけど、何か納得できないことがあったんだと思う。

 

3.Instagantt
https://instagantt.com/

f:id:snydysClimber:20170602181259p:plain

最終的にたどり着いたのは、「Instagantt」というサービス。
これは「Asana」というタスク管理サービスと連携して、ガントチャートを作ってくれるもの。
「Elegantt」と同じような臭いを感じたけれど、これは特に不具合もなく、プロジェクトのスケジュール管理も問題なく出来そう。

スプレッドシートの書き出しにも対応しているので、プロジェクト関係者にもスケジュールを共有しやすい。
ただ、書き出したスプレッドシートでは曜日が分かりにくかったり、不要な情報があったりしたので、書き出したスプレッドシートの必要な部分だけをコピペすればスケジュール表が出来るエクセルは用意しておいた。
はじめからそれで管理すればよいじゃんって話は聞こえません。

総じて「Instagantt」の感触がよいのだけど、欲を言えばタスク・サブタスクにファイル添付が出来るようになればよいのになと思う。

JSやjQueryの勉強したくてProgateをはじめた話

フロントエンドエンジニアって響きが素敵すぎて、かねてからJavascriptjQueryは華麗に扱えるようになりたいなと思っていた。

 

そんなある日、こんな記事が目に飛び込んできた。

 

jp.techcrunch.com

 

東大生が作ったプログラミング学習サービスなんていったら、学歴コンプレックスの塊である私にとっては、まぶしいばかり。

 

これは試してみるしかないでしょうということで、さっそくProgateに登録。

 

prog-8.com

 

まずは無料で出来る範囲で試してみると、説明スライドで確認してから、手を動かしてコードが書けるので、勉強した感があって非常に良い感じ。

 

ただ、無料で出来るレッスンは限られており、ホント触りのところまでしか出来ない。

 

むむむむ…。似たようなサービスで「CodeStudy」なんてのもあったから、そっちに鞍替えしようかなと探してみたけど、どうやらサービス終了してしまっていたみたい。

 

それならばしょうがない・・・ということで、980円/月のプランに申し込み。

 

仮に2ヶ月続けたとしても1960円だから、そこら辺の参考書を買うのと変わらないでしょう。

 

全てのレッスンが開放されたところでレッスンを進めてみると…隙間時間を使って1~2日でJavascriptjQueryの全レッスンが終わってしまった。


レッスンで「上級編」となっているものが、実際のところ初級の中で難しい方ぐらいの位置づけなイメージ。

他にもJavaやらSwiftやらのレッスンもあるにはあるんだけどJavascriptjQueryが中途半端な状態で他の言語に手を出す気にもならず。

 

とはいえ、プログラミング学習したいなと思っていたけど、重い腰をなかなか上げれないという私のような人が、手始めに触ってみるには良い方法なのかなとも思う。

 

きっかけ作りで980円/月を安いと思うか、高いと思うかはその人次第。

 

私は1ヶ月だけなら有りな気がしました。

「Adobe XD Meeting #03」に行ってきた話

昨年末にwindows10版(β)も公開されて、注目が高まっている気がしている「Adobe XD」。

 

Adobe XD」についてほとんど知っていることはないけれど、この波には乗っておきたいところ。

 

というわけで、「Adobe XD Meeting #03」という勉強会に参加してきた。

 

詳しい内容は、参加者の皆さんのtweetをtogetterにまとめていただけているので、こちらを見ていただくのが手っ取り早い。

 

togetter.com

 

以下、私の感想。

 

Adobe XD」自体がまだβ版ということもあって、皆さん手探りで活用方法を模索している段階なのかなんだなと思った。

 

そして、やはりまだ改善点も多く残されているようで、中でも「画像書き出し機能強化」と「Adobe他社製品との連携強化」の2点は特に多く要望が出てた。

 

もちろん改善点ばかりではなく、「Adobe XD」のメリットも挙げられていた。
特に「動作の軽さ」と「操作の簡単さ」は皆さんが口をそろえて絶賛していた。

 

正直、そんなに簡単っていうんだったら、ちょっと使ってみようかなと思えたぐらい。


とはいえ、会社支給のPCはwindows7なんだよね…。


まずは自宅のmacにインストールして、Sketchとあわせて試してみようと思う。

「Sublime text 3」をもう少し調べてみた話

前回からの続き。

 

Sublime text 3」をインストールしたは良いものの、イマイチ使いこなしきれなかったので、良い使い方をしている人はいないかと検索したらLIGさんのブログに行き着いた。

 

liginc.co.jp

 

記事の投稿日が2012年になっているあたり、いかに私が取り残されてきたかを物語っているようで心が痛い。
そして投稿された当時にこの記事を読んだ記憶がうっすらあるんだけどなー。

 

このページで紹介してくれいるいろいろな機能を触ってみると、やっぱり「Sublime text 3」便利かもと思えてくる。
中でもショートカットキーを覚えておくとかなりはかどりそうだったので、チートシートを作って公開してくれている方もいたのだけど、まだ全体を網羅するにはちょっと早いと思ったので、ひとまず以下のページぐらいのショートカットは覚えておこうかなと思う。

 

qiita.com

 

そして、まだインストールしていなかったプラグインをいくつか追加した。
なかでも便利だなと感じたのがEMMET。
恥ずかしながらEMMETのこと自体知らなかったので、調べて以下のページで概要を確認した。

 

leko.jp

 

これ、めちゃくちゃ便利。
今までHTML・CSSを生真面目にコーディングしていたのが馬鹿らしくなった。
無知って本当に怖い。

  

今はあまりコーディングする機会がないのだけど、これからHTML・CSSを書くときはEMMETを積極的に活用したいと思った。

「Sublime text 3」をインストールした話

2017年に入って、所属している会社の景気がどうも芳しくなく、回復の目処もイマイチたたない。

 

言葉を選ばずに言うと、リストラも始まっている。
昔からの仲間でクビになってしまった者もいた。
会社の専門領域からやや遠いスキルセットを専門にしている私にとっては、明日はわが身である。

 

しかも、ここ数年はほどほどに居心地の良いチームに所属していたため、このままでも良いかな~と漫然とした日々を過ごしてしまっていた。

 

世間一般の技術・ツールなどの進歩を横目では見ているものの、ほぼ見てみぬふりをして、気がつけばしっかり取り残されてしまっている。

 

このままでは万一の事態が起きた時にどこにも拾ってもらえない。

 

私には子供は居ないが嫁がいる。

 

そんなことになったら、離婚の危機である。

 

そんな危機感を背景に、今年はここしばらく遠ざかっていたセミナーや勉強会に足しげく通うようになった。

 

そして、セミナー・勉強会で登壇者の話を聞いたり、参加者のPCを横目で覗き見て感じたことがある。

 

「私が使ってるツール、古くない?」

 

私は日常から、メモを取る時は「テキストエディタ」(ネット環境があれば「OneNote」)、HTML・CSSは「Dreamweaver」、デザインするなら「Photoshop」である。
もちろんバージョン管理なんてしていない。

 

「私、古くない?」

 

私は、スノボーするにも、サーフィンするにもまずは板から買ってしまうぐらい形から入るのが大好きなので、使用しているツールが古いのはやはり気恥ずかしく思ってしまう。

 

そこでまず使用しているツールを見直すことにした。

 

メモ取り⇒ Sublime text 3 or OneNote
HTML・CSS ⇒ Sublime text 3
デザイン ⇒ Sketch or Adobe XD
バージョン管理 ⇒ Github

 

テキストエディタ・HTML・CSSで「Sublime text 3」を選んだのは、聞いたことがあるのと、単純に黒背景でなんとなくカッコよいから。
ここでもやはり見た目を重視した。

 

さて、前置きが長くなったが「Sublime text 3」を会社(windows)と個人(mac)の2つのPCにインストールした。

 

インストール時に参考にさせてもらったページはこちら。

 

techacademy.jp

 

macでのインストール方法を紹介しているものの、この内容でWindowsも問題なくインストールすることができた。
まだどのように使っていくかイメージができていないものの、このページに書かれているプラグインも入れておいた。

 

ただメニューが全て英語で、ちょっと分かりにくい。
できれば日本語メニューに変換してたいと思ったので、このページを参考に日本語化しておいた。

 

webkaru.net

 

私は2つのPCそれぞれで同じ手順を踏んでインストールしてしまったものの、Dropboxを使用することで、複数PCで環境設定を同期することもできるらしい。

 

nelog.jp

 

これはまた後日試したい。

 

さて一通りインストールが終わり、この記事も「Sublime text 3」を使って書いているし、仕事で簡単なHTML・CSSの編集も行ったものの、今のところ劇的に何かが良いということは感じていない。
動作は軽いので、その点ではやや快適かもしれないが、気のせいかもしれない。

 

まだ簡単な作業しかしていないから当たり前と言えば、当たり前か。

 

これからもう少しの間、「Sublime text 3」を使い続けてみようと思う。