HTML5プロフェッショナル
認定試験 レベル2 認定者
Taskey株式会社
Frontend Vice President
深見 将一さん
Taskey株式会社は、2014年に創業したスタートアップ企業です。当社では「スマートフォン小説」のプラットフォームとして、小説やイラストを投稿できるSNS「taskey」を提供しています。
スマートフォン小説というとあまり耳にしたことがないかもしれませんが、携帯小説のパワーアップ版と思っていただいて問題ありません。携帯小説はガラケー(ガラパゴス携帯)と呼ばれる携帯が小説を読む媒体でしたが、スマートフォン小説の場合は、日頃から使っているiphoneやAndroid携帯がそれにあたります。
小説を読む媒体が変わっただけではなく、スマートフォン小説の場合、文字に加えて画像や動画、音声などを作品に付与することができ、携帯小説より豊かな表現を作品に埋め込むことができます。
具体的には、サイトで使用されている言葉をユーザーがアクセスする地域に合わせて多言語化したり、日本語以外の作品も同じプラットフォーム上に投稿することができます。また、ユーザーがお気に入りの作品を翻訳して同プラットフォーム上に公開することができます。さらにその翻訳された小説をネイティブなユーザーが、微妙なニュアンスを修正したりといったブラッシュアップをすることも可能です。いわば、ウィキペディアのように、翻訳したいと思った世界中のユーザーが参加して、1つの作品の多言語化し、世界中に発信していくイメージです。現在、サイトの対応言語は日本語、英語、繁体中国語、簡体中国語の4言語で、サイト内で人気上位の小説を中心に翻訳されています。
現在、taskeyではユーザーから投稿された約1万作品の小説が掲載されています。その半数は日本以外の言語圏のユーザーからの投稿です。また、taskeyでは小説だけではなく、プロの漫画家様のコミックもtaskey内で翻訳できる仕組みを作成し、ユーザー様の力をお借りして翻訳しています。
世界展開されて多くの国で読まれている小説、マンガは存在します。それらはプロの翻訳者の方の手で翻訳され世界中で読まれているのです。しかしtaskeyでは、作品のファンとなったユーザーがウィキペディア的に翻訳することによって、従来の方法よりも劇的に速いスピードで多言語化することができます。
実際に作品のファンだからといって翻訳する人がいるのだろうかと疑問に思われる方もいらっしゃると思いますが、僕らが考えている以上に海外のファンの方の情熱はすごいものがあります。例えば某人気漫画の場合、連載されている週刊誌が発売された瞬間に海外のファンの読者によって翻訳され、海外のサイトで無料公開されています。しかも、彼らの情熱が利益のためではなく、他の人の読んでもらいたいとうい気持ちが原動力になって翻訳されているのも大きな特徴です。
将来的には翻訳された方にインセンティブを払えるような環境を作りたいというのも1つの目標です。自分のお気に入りの作品を多言語翻訳するユーザーの熱意に我々のプラットフォームを提供することで、化学反応のように新しいビジネスを創生させること。それが、まさにtaskeyの目指すところなのです。
今後は、既存の出版業界と協働し、ユーザーによって多言語化された作品を電子書籍や紙の書籍として、最速で出版できるようなビジネスモデルを確立したいと考えています。
私自身の仕事としては、画面設計やコードの最適化、インターン生の教育など、いわばサイトのフロントエンドの運営責任者として統括管理を担当しています。
具体的には、SassやSassを拡張したツール集のCompassなどCSS拡張メタ言語を使ったコーディング、タスクの煩雑な処理を自動化するツールのタスクランナー「Gulp(ガルプ)」を使用しての業務効率化、JavaScriptを使ったアプリケーションの作成などがおもな業務です。
一般的にWeb制作の現場では、Sassを編集してコンパイルを実行し、画像を圧縮、ソースコードを編集するたびにブラウザに戻ってリロードするというように多くの手間がかかります。タスクランナーを使うことは、このようなWeb制作での煩雑な処理が全て自動で行われるため、開発工数の短縮、ミスの予防につながるのです。また、一度定義したタスクやインストールしたプラグインを開発者間で共有でき、チーム内で一定の品質を保った開発ができるようになります。
また、taskeyを構築するにあたって最も注力したのは運用のしやすさでした。そのためには、Webの設計段階での留意が必要です。ですから、既存のコードが他の機能に干渉しないようにしたり、レイアウトをきっちり決めてそのページ内のCSSで指定されるなど、新しい機能を追加したいと思った時に、既存のコードが関与しているためにその修正がうまくいかないというようなことがないよう、気を使いました。
また、Webサービスでは、レスポンスの早さも重要です。アクセスのたびにindex.htmlをはじめとしてimgやCSS、JavaScript を読み込みにいきますから、その回数を減らせば、当然、レスポンス速度は早くなります。
同様に一つ一つのファイルサイズを小さくすることで、読み込み速度も短くなります。たとえば、CSS や JavaScript の場合、リソースに含まれている「改行」や「スペース」を削除するのは必須です。こうすることで、うまく行けば元ファイルから容量を数十パーセントも削減させることもできるのです。
HTML、CSS、JavaScriptなどのWeb リソースは、圧縮することで、トラフィックを少なくし、ダウンロード、解析、実行時の速度を向上させる処置を「ミニファイ」といいます。CSS や JavaScript の場合は、変数名を変更することでファイルサイズをさらに削減できます。
他にも、フレームワークによっては、静的ファイルをZip化することで、ファイル容量はさらに削減できるとか、画像をスプレライトシートにして画像経由のレスポンスを減らすなど、さまざまなダイエットの方法があります。
こうした処置は、昨今のWebサービスの基本です。これらの技術を正確に理解し、実践するためには、様々な角度からWebに関する知識を習得する必要があります。その意味でもHTML5プロフェッショナル認定試験は、Webクリエイターのスキルを向上させるもっとも実践的な資格だと思っています。
HTML5プロフェッショナル認定試験 レベル1を2014年1月に取得してから約2年、2015年11月28日にレベル2を取得しました。
レベル1は、基本的にマークアップが主な試験範囲となります。取得した当時、私にはすでに業務的なマークアップスキルはついていましたが、さらに体系的にHTML5を学びたいと考えての取得でした。
レベル2については、taskeyを始めてからはリッチなJavaScriptやアニメーションを作ることも多くなり、動的なWebサイトの制作技術を向上させたいと感じる時期にレベル2の試験内容がマッチしていました。
しかし、会社の創業メンバーとしてジョイン、サービスの立ち上げなどで多忙になり、レベル2の取得に着手することができたのは、2年後になってしまいました。前回、レベル1を取得してから間もなかったときのインタビューでは、「レベル2は誰よりも早く取得します!」と宣言したのですが、それを達成することができませんでした。それが残念です(笑)。
レベル2の試験範囲ではJavaScriptが大きなウェイトを占めます。試験準備には、HTML5プロフェッショナル認定試験レベル2の出題範囲を網羅的・体系的にまとめたLPI-Japanの認定本を参考書として購入して勉強しました。本は構成として大きくJavaScriptの言語仕様の解説と、HTML5のJavaScript API群の解説とに分かれています。JavaScriptの言語仕様の解説では、プログラミングを行うにあたっての基本的な要素についてサンプルコードを交えながら解説しています。
試験勉強には、受けると決めてから約1ヶ月間かけました。基本的には、本を読んでコードを書き章末の問題を解くという作業を反復し、通勤の電車の中では、メモと問題を照らしあわせながら勉強しました。
日常的な仕事に対処することで身についたスキルも少なくありません。今までにないようなユーザー体験を提供しようとすると、既存のサービスで多く使われている技術だけではなく、あまり多く使われていないニッチな技術を使用しなければならないことも多々あります。
taskey内の小説作成エディタなどはまさにそれです。エディタにはhtml5で追加されたContenteditable属性を使用しています。これはWebページの内容をユーザーから編集可能にするものための属性で、これを応用するとtextareaで出来る単純なエディタではなく文字を装飾したり、画像を挿入したりすることができます。PC版twitterの投稿画面や、wordpress、mediumなどはこの技術を使用しています。ただ、実装する上では、あまり多く使われている技術ではないので、日本語の記事が殆ど無く、英語のリファレンスばかりで、英語の苦手な僕には非常に辛かったです(笑)。
上記の実装を含め、レベル2の試験範囲のほとんどは仕事として触れた経験があり、初見のものは少なかったのですが、中には業務で使ったことがないものもありました。
「ハイパフォーマンスブラウザネットワーキングAPI」はその一つです。ハイパフォーマンスブラウザネットワーキングAPIは、ブラウザの通信系APIと現存のネットワーク技術をつなげ、Webアプリのパフォーマンスを最適化するためのAPIで、アプリケーションエンジニアは、UIやデータ処理、開発言語、プラットフォームの仕様や癖だけでなく、TCP、UDPといったトランスポートレイヤからアプリケーションレイヤまでのプロトコルの原理に始まり、サーバやネットワーク環境についても広く知ることを求められます。
これはフロント側でサーバにアクセスしてドメインからIPを解析し、帰ってくるまでのスピードを測るなど、チューニング作業では使いますが、僕自身は業務で使用したことがない知識でした。これについては、自分で環境を作って試して、無理やり頭にねじ込みました(笑)。
レベル2の試験を実際に受けてみて感じたことは、かなり難しかったということです。実際の試験は、参考書に載っている基礎知識と実務経験がないと解けない問題が多くありました。したがって、参考書と問題集を使って勉強しただけでは回答できないだろうなという印象です。
例えば「このAPIの特徴としてあっているものをすべて選べ」というような参考書に載っている問題が半分だとすれば、残りの半分は、コードがガッツリ書いてあって「この結果はどうなる?」とか、コードの一部が隠されていて「ここに入る変数は何?」といったようなものです。これらの問題は、実機を使って体験しないと回答できません。
ただ、資格取得のために勉強したおかげで、目的通りJavaScriptのスキルが向上したことも実感しています。これまで日常の業務では、これが作りたい→調べる→答えを発見→それを使う、といった手順で構築していました。それがJavaScriptを体系的に習得できたことで、構築に至るまでの選択の幅がとても広がりました。
taskeyのサービス面では、今後もユーザー様に快適にサービスを使っていただけるように機能を拡充しつつ、世界中に広げていきたいと思っています。また、技術面では、もともと何かを作ることが好きなので、taskeyの開発を行いつつ、個人的にもなにか新しいものを開発して、世の中に出していきたいと考えています。
技術面に関してはもう一つ、IT系の技術の基礎力をつけていきたいと思っています。最新技術を最適にプロジェクトに取り入れ、機能を最大限に活かしていくための正しい答えを導き出すためには、その土台となる基礎技術は不可欠です。私は前の会社をやめてからフロントに自分しかいなかったので、相談相手もなく、我流で突き進んで来てしまいました。
そのため、サーバ等、インターネットの環境についての知識がかなり手薄で、ハード、ネットワーク、OSについてなどの基礎知識がかなり足りていないと自分でも感じています。ですから、あらためて基礎力をしっかり身につけたいというのが今の目標です。
また、言語資料なども本格的にはほとんど紐解いたことがありませんでしたので、様々な言語を知って技術の幅を広げて行くことも、一つの方法だと思っています。
将来的には、フロントの要件だけでなく、Webサイト全体的な要件にも対応出来るようになりたいので、そのために必要な資格であれば取得に挑戦したいと思っています。今、取得したいと思っているのは、LPICとIPAの「基本情報技術者試験(FE)」ですね!
taskeyは、世界中の人たちに使ってもらえるように、常に使いやすいUIを追求しています。それを意識するとページを遷移させること無く、ajaxを使用して小さな通信を行うことが非常に多くなり、必然的にjavascriptを使用することが多くなります。このような1ページで多くの動作をするページを作成するためには調べてわかるようなピンポイントの知識ではなく、javascriptの体系的な知識が必要です。その意味でも取得のためにjavascriptを勉強することは、業務的にメリット以外ありません。私の場合も、HTML5のレベル2を取得したことで、結果として実際の仕事でのスキルを向上させることにつながりました。
また、デザイナーやフロントエンジニアのスキルを示す資格は、これまでほとんどありませんでしたが、HTML5プロフェッショナル認定試験はそれを明示できる資格だと思います。コーダーであれば持つべき資格はレベル1,Webアプリケーションを作りたければレベル2をめざすべきですね。これは採用する側にとっての査定指標でもあります。
つまり、Webクリエイターやフロントエンジニアとして、今よりももっといいものを作りたければ、取得するべき資格だといえるのではないでしょうか。
受験を決めたら、まずメルマガ登録。
学習に役立つ例題解説付きメールマガジンを定期発行