ランサーズ（Lancers）エンジニアブログ > godgarden の記事

投稿者「godgarden」のアーカイブ

ランサーズに出戻って1年。担当した開発プロジェクトを振り返る。

godgarden｜2018年12月24日
BigQuery

「ランサーズ Advent Calendar 2018 」23日目の記事です。

こんにちは
ランサーズでEngineering Managerをしてます神庭（godgarden）です

残すところ, 今年も数営業日。1年の振り返りをしている方も多いと思います.

個人的にも, ランサーズに戻ってきて1年とちょっとが経ちました.

友人の皆さんには生存報告と, はじめましての方には, ランサーズのエンジニアこんなことをやってるんだなという, いちエンジニアの事例として開発の雰囲気を知っていただければと思います.

10年目を迎えた 「Lancers」 の完全HTTPS化

復帰作 1品目は, lancers.jp の完全HTTPS化

テクニカルな要素こそあまりありませんでしたが, 10年運営される複雑化した仕様や, ユーザやSEOをはじめとした社内外のステークホルダーにも影響を出さず移行する役目でした.

体制

  • エンジニア: 1名
  • 期間: 1ヶ月前後

もし, まだ移行が完了していない方がいれば少しでも参考になれば嬉しいです.

分析基盤 / モニダリング環境の構築

ランサーズのKPIシステムの変移だけで, ひとつ記事が書けそうですが, それはまた別の機会にでも.

分析基盤のシステムアーキテクチャの設計から, モニタリング環境の土台を作ったりしてました.

体制

  • 人員: エンジニア1名, PM（プロダクトマネージャー）1名
  • 期間: いくつかのフェーズに区切って, 2ヶ月ほど

Before

  • 依頼が集中しエンジニアは開発に, 企画者は企画に集中できなくなる
  • クエリが人によって異なり結果の差異がでる
  • データベース以外のデータが活用されていない
  • お手製KPI管理システムはメンテナンスが滞っている
  • 同じようなデータ調査を複数の人間がしている
  • データ依頼部屋がカオス…(´；ω；｀)

After

  • Redash導入
  • KPIや定常依頼系のクエリをダッシュボード化
  • 分析用のViewの作成（ex. 流通, 報酬, 取引のペア etc…)
  • アクセスログやアプリケーションログの構造化
  • ログ収集やETLのシステム一新
  • Athena導入
  • BigQuery導入
  • Digdag, embulk. fluentd, etc のETL環境

効能

以前に比べ, データ出し依頼業務も少なくなり「とりあえずRedashを見ればデータがある」がといったデータの民主化した状態は作ることが出来ました.

先日Redashのクエリを見ると, 一時的なモノも含めると 1,000を超えるクエリが登録され活用されていました.

学び

組織として, もっと早くデータに関する仕組みを整えることが出来ていたら…という点は悔やまれます.（スタートアップ期から, お手製のKPIダッシュボードは存在していましたが組織の成長に合わせて, データ環境も育てていくべきでした）

また, 同じようなプロジェクトを考えているエンジニアの方にアドバイスをしておくと,

エンジニアだけでやると結構な確率で死にます！

途中から, PMとタッグを組めたのは大きかったです（ありがとう Uさん！）

データ基盤は自社のステージ, チームとアーキテクチャを意識して設計し育てていくことが大切です.

運用に携わるエンジニアは, ただの運用者にならずデータ基盤を育てていきましょう（コストセンターからプロフィットセンターへ）

参考

ランサーズを支える会計システム基盤

全社横断のタスクフォースプロジェクトに助っ人参加。

詳細は, 22, 24日担当の @sayakob と@autumnlike の記事をご覧ください！

エンジニア組織

エンジニアの最高な福利厚生は, 好きなプロダクトを 優秀なエンジニアと働けて自己成長できることだと自分は思っています.

ランサーズには, 最高な仲間が多くいますが, 真面目な気質もあってか社内に留まっている外部に伝えきれていない魅力も多くあったり, 自分の凄さに気づけていないエンジニアも一定いたりしました.

社外のエンジニアと接点を増やすことで今の自分達の立ち位置を知って, 何かキッカケを少しでも作りたいと考え,試行錯誤してました.

  • 採用面談 / 面接にとにかく出る
  • スカウト
  • 登壇イベントの企画,運営
  • エンジニアブログ推進大臣
  • ランサーズ開発ランチ（Lunchers）の企画,運営
  • 採用要件の定義（ジョブディスクリプションから, 求人作成, ライター業など）
  • 社内のエンジニアロールの策定とジョブディスクリプション, ミッション定義（リードエンジニア制, EM)

学びの機会。ランサーズ開発ランチ（Lunchers）

月に1, 2回ほど社内開発部メンバーと（エンジニア、デザイナー、PM）社外からゲストをお招きして、お弁当を食べながらカジュアルに交流をする開発ランチを企画/運営していました.

きっかけで, 興味を持ってくれた入社してくれた仲間や, 社内の開発に取り入れたりと.
登壇していただいたご友人や, ブログを書いてくれたり参加してくれた社内外のメンバーにも感謝です.

エンジニア採用

当時, 社内の事情や, 過去の経緯も重なりエンジニア採用に関してダイレクト・リクルーティングに完全振り切っていました.

正直, もっとうまい手があったと振り返ると感じるところ多くありますが, やってみて分かる多くの学びもありました.（書ききれないのでランチでも！）

お世話になった方のTwitterからの引用 になりますが, 以下に尽きると思います. 自分が決断した時もそうでした.

いい人を採用したいならやることは1つ。
声をかけ続ける。
これに尽きる。
心変わりのタイミングなんていつ来るかわからない。本人すら予測できない事も多い。
「一緒に働きたい」と心折れずにどれだけ伝え続けられるか。
その人が魅力か？ビジネスは成長するのか？仲間は？は、もっと後の話。

幸いにも, 活動の過程での出会いもあり, フリーランスCMOに許 直人氏が就任 や年明けからも優秀な仲間のJOINが決まって, 諦めかけた頃に結果はポツポツとついてくるので, 諦めないことが秘訣だなと感じました.


昨日より明日をもっとよくするをモットーに頑張りましょう.

とある新規事業の価値検証

とある新規プロダクトの価値検証を社内外のメンバーを含めた混合チームの開発リードをしてました.

詳細は, 現時点ではあまり多くは語れませんが, 落ち着いたタイミングでブログを書こうと思います.

技術スタックだけ書くと, 適材適所にに技術選定し新しいことにも取り組んでいます.

  • サーバーサイド: Go
  • フロントエンド: React
  • インフラ: AWS Fargate
  • ツール: Prott, Zeplin

ランサーズといえば, PHPのイメージが強いですが, 色々な技術スタックを実は扱ってます.

最後に

駆け足になりましたが, 思い出深いプロジェクトに沿ってランサーズのエンジニア生活の１年を振り返りました.

変えきれなかったり力不足を感じることも多くありますが, 間違いなく変化をつけられたこともあるので, 引き継ぎやっていき精神で頑張ります.

最後に, 2019年から新しい仲間も加わり, 色んなプロジェクトも動き出すので, すこしでも興味を持ってくれた方や, 関係なくもっと裏話聞きたいというお優しい方がいれば気軽に 「話を聞きに行きたいボタン」 やTwitter などで反応ください. ランチでも参りましょう

それでは良いお年を. あでゅ

ランサーズ開発ランチ（Lunchers#1）はじめました。〜はてな Mackerel CRE 編〜

godgarden｜2018年04月26日
開発ランチ（lunchers）

こんにちは。
開発部の 神庭（godgarden）です。

いつもは技術記事を中心に書いていますが、今回は趣向を変えて社内で運営している 「開発ランチ」 を紹介したいと思います。

ランサーズ開発ランチ（Lunchers）

月に1, 2回ほど社内開発部メンバーと（エンジニア、デザイナー、PM）社外からゲストをお招きして、お弁当を食べながらカジュアルに交流をする開発ランチを行っています。

技術を知る・興味を持つ, 触れるきっかけや、エンジニアの横の繋がりの場を作りたいという思いから運営しています（みんな元気で参加しやすいランチの時間に開催しているのがミソ◎）

※ （”Lunchers” の由来は “lunch lancers” → lunchers からです）

もともとは社内メンバ限定の開発ランチだった。

もともと週に一度、社内のメンバーが集まってご飯を食べながら雑談をしたり、ランチのネタに飛び込みLTのような形で「開発ランチ」をしていました。

メンバーのコミュニケーションを目的に開催をしていたのですが、このような会 “あるある” かもしれませんが、会を重ねる毎に段々とマンネリした雰囲気となり、参加メンバーも固定化してくるようになっていました。

ランチタイムなので、それでも問題はないのですが、たまにはスパイスを投入した企画物があっても面白そうだなと考え、社外のゲストを招いての「開発ランチ」としてリプレイスしてみました。

第1回目のゲスト 〜はてな CRE 井上さん〜

第一回のゲストは “株式会社はてな CRE 井上（a_know）さん” にゲストとしてお越しいただいて、弊社も導入して大変お世話になっている Mackerel の話や CREの話しをしていただきました。

（余談ですが、井上さんとは地元岡山の時からの知り合だったため、お昼の時間に遊びに来ていただいてランチご一緒してもらいました。東京でご一緒出来て感慨深い…）

Mackerel（マカレル）におけるCREの取り組み

当日は、過去の登壇スライドをベースにアレンジしていただきながら話をしてもらいました。スライドと写真で雰囲気をつかんでいただければと思います。

トークキーワード

  • Mackerelは社内の仲間を助ける社内ツールが始まり（自分たちがユーザーでもある）
  • カスタマーサポートとサクセスの違い。コストセンターからプロフィットセンターに！
  • はてなにおける CRE の KPI や試行錯誤の取り組み
  • スペシャリスト・マネージメントだけでない新しいキャリアの選択肢の可能性を作りたい。その一つがCREでもある。

QAタイム

時間ぎりぎりまで質問が飛び交っていました。（井上さんのご飯食べる時間がなくなるほど…)

  • どのようなKPIをたてているの？
  • 予算みたいなものはもっているの？
  • CREと名乗ったことによって社内外からの反応は変わった？

嬉しい効能

Mackerel に普段ふれる機会が少なかったメンバーも興味を持つきっかけになったり、ちょうどカスタマーサクセス的な動きをどう取り組んでいくべきか試行錯誤していたため、学びあり, 勇気と刺激をもらえました。

  • 新卒メンバーがMackerelに興味を持つきっかけに繋がった。
  • CREという役割の理解が深まり、社内にも浸透・理解が深まった。
  • はてなさんでのカスタマーサクセスの取り組みを聞けて、良い意味で自分達のいま現在の立ち位置がわかった。（まだ試行錯誤できる＆みんな試行錯誤でがんばってる…!!）

新卒メンバー達もMackerelデビューした

社内にもCRE用語も浸透をはじめた（とある対応に反応した様子）

アンケート

井上さんの熱量で盛り上がった実感はありつつ、今後の運営改善のためアンケートも取ってみました。

最後に

熱量高く素敵なテックトークをしてくれた, はてな井上さんありがとうございました！
開発ランチご一緒してくれる方、募集しております。遊びに来てください。DMなりお待ちしております！

（※ 本記事に掲載している資料や画像は、はてな 井上様から許諾済みです）

ランサーズを完全HTTPS化へ移行するまでの軌跡。常時SSL（AOSSL）化を目指して。

godgarden｜2017年11月09日
SEO

Intro

こんばんは。
開発部の 神庭（godgarden）です。

この度、よりランサーズを安心安全に利用してもらうためサービス全体を完全HTTPS化しました。

ランサーズではこれまで、決済ページや、ID、パスワード入力ページなどの機密性が高いページに限り、安全な通信を実現するため、通信を暗号化する方法としてHTTPSを利用していました。

この度、ユーザーの皆様によりランサーズを安心安全に利用してもらうため、これらをサービス全体のページに拡大いたしました。

Proxyするメディアサイト側でのhttps対応など、いくつかの残はありますが、一つの区切りとして移行の背景や手順などについて共有し、これから移行しようとしている方のヒントになれば幸いです。

ランサーズ

 

完全HTTPS化した理由

ポイントは３つです。

  • セキュリティリスクの軽減
  • 市場の動向・変化
  • 新技術の導入の下地

セキュリティリスクの軽減

近年、公衆無線LANやスマートフォンなどのモバイル端末の普及により、屋外などオープンな場所でインターネットを手軽に利用できるようになりました。

一方、公衆無線LANの中には、暗号化されていないものや提供元が不明な、いわゆる野良Wi-Fiなどもあります。

そうしたネットワークを利用した通信は、悪意を持った第3者に覗き見されるリスクが伴うため、前提として、すべての通信を暗号化して保護することにより安全な通信を実現します。

市場の動向・変化

上記の セキュリティリスクの軽減 の項目にも書いたような理由もあり、Googleをはじめとしてプラットフォーマーが中心となりHTTPS化への移行を推進しています。

  • 各種ブラウザによるHTTPS非対応ページへの警告
  • 検索エンジンのアルゴリズムをHTTPSを優遇するようアップデート
  • Let’s Encrypt や AWS Certificate Manager など無料で利用できるSSL証明書の充実

アメリカ全体では、Chrome上のHTTPSの使用は、59%から73%に上昇した。

https google

参考リンク

新技術の導入

ServiceWorker や WebPush などの最新のWeb関連の技術の多くは、HTTPSを利用することが前提とするようになっています。

新しい技術を取り入れることにより、よりサービスを快適に利用してもらう打ち手となったり、エンジニアの技術的探究心も満たされるはずです。

嬉しいおまけ

ランサーズではCakePHPを採用しており、機密性が高いページに限り、HTTPでアクセスされた際に SecurityComponent の RequreSecure機能を利用しHTTPSへリダイレクトするようにしていました。

サービス全体をHTTPS化することにより、無駄なリダイレクト処理や、このページはHTTPなのか。HTTPSなのかという開発者の無駄なオーバーヘッドが不要になり、コード面でも開発スピード面でも改善される副次的な効果がありました。

開発体制とロードマップ

リリースまでエンジニア1名で1ヶ月ほどでした。（レビューワーとしてエンジニア2名）

プロジェクトを進めるにあたり以下の2点に注意して進めました。
* ステークホルダー(関係者の可視化)
* 目的の共有

ご近所さんを探せ

サービスをHTTPS化するだけといっても、全体に関わることであるため必然的に影響範囲や関係者が多くなります。

エンジニアだけでは見落としてしまいそうなこと、把握できていない運用業務など様々なことがあります。
関係部署と担当者を明確にし可視化することで、情報連携を密に行いスムーズな移行が出来るよう心がけました。

また万が一の場合も慌てずにすみ、協力を得やすくなります。

  • サービスの機能のテスト
  • パフォーマンス
  • SEO
  • AD広告
  • ユーザーからの問い合わせ

ステークホルダー

目的の共有

なぜやるか。目的の共有 を伝えることを意識をしていました。

共有を怠ると余計な仕事が増えたと思われたり、お願いしたこと以外やってくれない。目が向かない。といったことが往々にあります。

目的を共有することでコンパスの方向を合わせ、「ここは大丈夫ですか」と自分でも見落としていたことのフィードバックも得やすくなります。

また、インフラエンジニアなどの方はよく分かると思いますが、新機能の開発などと比べると、HTTPS化など裏方の仕事は地味なものも多いです。エンジニア以外に関しては、理解されないこともあります。

  • たいへんな仕事なのに、トラブルがなくて当たり前と思われている。
  • 重要性が理解してもらない。

これってとっても損なことだと思いませんか？
エンジニア以外にも、正しく必要性・重要性を伝えることは個人としてもエンジニアチームのプレゼンスを上げるためにも、大事なミッションだと個人的に考えます。

完全HTTPS化への移行STEP

前置きが長くなりましたがここから具体的な移行ステップについて説明します。

具体的には下記のステップで移行を実施しました。

  1. HTTPSのテスト環境の構築
  2. mixedContentの修正
  3. 段階的リダイレクト
  4. 内部リンク・canonicalの修正
  5. 全体をリダイレクト

HTTPSテスト環境の構築

HTTPS化した際の動作検証する際に必要となるテスト環境を構築します。
影響調査や動作確認などに長時間利用するため、専用の環境があると作業が円滑に進みます。

テストサーバーがあることで後述する mixedContent を検知するクローラーなども利用出来るため、可能であれば専用の環境を構築することが望ましいです。

混合コンテンツ（mixedContent）の修正

mixedContentとは

mixedContentとは、端的にいうとHTTPS環境下でHTTPのimgやjsなどのリソースを読み込んだ際に発生します。mixedContent が発生すると、リソースの読込みがブロックされたり、ブラウザのアドレスバーに警告表示が出たりします。

mixedcontent

 

修正方法

修正方法は 愚直に http:// で始まるリソースを検索し影響する箇所を https:// もしくは // の形式に修正をしました。ソースコードだけではなく、DBに保存されている画像リンクなども対象となるので注意が必要です。

ランサーズの場合、効率よくmixedContent を修正するための工夫としCSPレポートと mixed-content-scanを導入しました。

CSPレポートの活用

規模の大きいサービスで、漏れなくmixedContent を修正するのは大変な作業です。また、移行後に mixedContent がどこで発生したのか把握出来ないとデバッグが大変です。
そこで CSP（ContentSecurityPolicy) のレポートを活用しました。

HTTPヘッダに付与することで、許可されていないリソースが読み込まれた際に、指定のエンドポイントへ違反レポートをJSONでPOSTします。

レポートの送信先は、JSONを受け付けられれば何でも構いませんが今回、無料で利用できる ReportURI に違反データを収集しました。

mixedcontent

mixed-content-scanの活用

HTTPSのテスト環境があればクローラーを走らせることでmixedContent の疑いのある箇所をリストアップできます。DBに保存された情報やAD広告など外部から差し込まれた情報など、見落としがちなmixedContentを発見するのに重宝しました。

mixed-content-scan

段階的リリース

いきなり全体でHTTPSへリダイレクトすると影響範囲がよめないため、URLのディレクトリ単位にターゲットを決め、段階的リリースを行いました。この時、CORSなどでAJaxリクエストが失敗するなどがないよう注意が必要です。

試験的に移行したいページ、重要なため個別にリリースしたいページなどを数値をモニタリングしている部署と連携し移行を行いました。

内部リンク・canonicalの修正

HTTPなどプロコトル指定で記述されている内部リンクを修正します。
また、見落としがちな箇所として canonical も忘れずに対応が必要となります。
もしもcanonicalがHTTPのままだと、301リダイレクトしてもいずれHTTPに正規化されてしまいます。

全体のリダイレクト

段階的リリース、CSPレポート、クローラーによる検知、目視による動作確認が済んだら全てのページにリダイレクトするのみです。ランサーズの場合は、エンジニアとディレクターが双方で主要ページを目視チェックし動作に問題がないことを確認したら全体リダイレクトをGOしました。

万が一の切り戻しも考慮し、はじめは302でリダイレクトをし、数日間モニタリングし利用者からのお問い合わせや、不具合報告があがってこないことを確認した後、301へリダイレクトを行いました。

※ 301の場合、万が一の場合SEOやブラウザにキャッシュの問題が保持され切り戻し時に困難になると判断し。

最後はリダイレクトする勇気です!!!

おまけ

他部署の共有。チェッリスト

  • 関係者に目的の共有をしたか
  • エンジニア・デザイナーへmixedContentを新たに発生させないように共有したか
  • SearchConsoleの再登録の共有したか（一時的にhttpとhttpsで分散する）
  • 外部媒体へ掲載するURLの変更の共有したか
  • AD広告やWordPressの運用者にhttpsでアップするように共有したか
  • ソーシャルカウントがリセットされて問題ないか

まとめ

当初、想定していたような大きな不具合やパフォーマンスの低下、SEOの順位の下落などのトラブルもなく無事移行が完了しました。ざっくりとですが、まとめると以下のようになります。

  • HTTPSのテスト環境があると便利
  • CSPレポート + ReportURIを活用することでmixedContentの検知が可能
  • mixed-content-scanなどクローラーを活用することで見落としを防ぐ
  • なぜやるか。目的の共有と関係者を洗い出すことでプロジェクトが円滑に進む。

チャットワーク

 

参考になった記事

最後に

ランサーズでは、今回HTTPS化したことによる ServiceWorker や WebPush などをはじめとした新技術の導入やPHPのバージョンアップ、技術基盤など、より積極的に技術チャレンジを行います。

エンジニア、デザイナー、プロダクトマネージャー、マーケティングなど、働き方の多様性を普及させるために一緒に走ってくれる仲間を募集しています。すぐに一緒に働きたい方はもちろん、まずは話だけでも聞いてみたい方も、ぜひご連絡ください。

エンジニアでも必ずチェックしておきたい『開発に役立つSEOブログまとめ』

godgarden｜2015年03月03日
SEO

こんにちは！
ランサーズの開発部でエンジニアをしております、神庭（かんば）です。

本日はSEOについてです！

ところで、”SEOはエンジニアにはあまり関係ない技術だと思ってたりしませんか？”
（SEOに興味を持つまでは、私は思ってました…）

「データベース設計」や「URL設計」「サイト移転」や「リプレイス計画」など、サービス開発をするうえでエンジニアが知っておいた方が良い知識や技術はたくさんあります。

知らずにURLの構成など変更してしまうとサイトの評価が下がりKPIに直結する打撃を受けたり、リリース直前でSEO要件が満たされておらず、手戻りといったこともしばしばあるかと思います。

また、前回ご紹介させて頂いた「Google検索結果のカスタマイズの記事」 や「検索結果をもっとモバイル フレンドリーに」など、日々新しい機能の登場や検索アルゴリズムの更新など変化はとても早いです。

調べるだけでも大変ですよね、、、

SEOに関して「どう情報収集していいのか分からない」といったエンジニアのために、今回は私自身が学習も兼ねてお世話になっているSEOに関するブログを紹介していきたいと思います。

それでは、まいりましょう！（※順不同）

必ずチェックしておきたいSEOブログ6選

SEOの動向を知るうえで、必ずチェックしておきたいブログです。
今回、ご紹介しきれなかったブログや私自身がチェックしきれていないブログもたくさんあるので教えて頂ければ嬉しいです！

[SEM R] :: 検索エンジンマーケティングのことなら SEMリサーチ

 

sem
SEOコンサルティングの最大手である、株式会社アイレップ 取締役/SEO研究所所長である「渡辺 隆広」氏が運営するブログです。

海外/国内のSEOの最新情報をいち早く解説しています。
SEO業界で、有名な渡辺氏による考察記事や、業界の展望など読み応えのある記事が豊富です。

海外SEO情報ブログ – 海外のSEO対策で極めるアクセスアップ術

 

kaigaiseo
SEO業界で有名な「鈴木謙一」氏が2007年から運営するブログです。
タイトルの通り、海外のSEO関連情報をいち早く日本語で解説されています。

実務的な設定方法なども、画像などをうまく使い詳しく解説されているので、分かりやすく助かります。ほぼ毎日のように更新されており、情報が豊富です。

SEOに役立つホットな話題をブログで配信：SEO HACKS公式ブログ

 

seohacks
SEOコンサルティングを行っている、ヴォラーレ株式会社が運営するブログです。様々な事例から詳しく書かれているため、興味深い内容が多いです。

オンライン学習サイト『schoo』とコラボして動画でのSEOの授業もされています。

SEO Japan

 

seojapan
アイオイクス株式会社が運営するブログです。
2002年から更新されており、SEO関連のブログの中でも、とても歴史のあるブログです。海外のSEOの最新情報などを丁寧に解説されています。

web＞SEO | SEO辻正浩のブログ

 

webseo
SEOをやっている人なら知らない人はいないぐらい有名な、辻さんのブログです。ブログの更新頻度は高くはありませんが、更新された時は、きっとお宝情報に違いありません…!
Twitterでのフォローをおすすめします。

Googleウェブマスター向け公式ブログ

 

googlewebmaster
Google社が運営するウェブマスター向けの公式ブログです。
Google公式のブログなので、Googleの動向を知るうえで必ずチェックしておきたいブログです。

ユーモアをまじえてSEOを紹介している個人的に好きなブログ

ユーモアをまじえてSEOを分かりやすく身近に感じさせてくれるブログの紹介です。
面白いのでよく拝見させてもらっています。

馬鹿に毛が生えたブログ

 

bakanikenohaeta
ブログのタイトルからして、面白い雰囲気が漂っていますね。

日々の業務の中で使う機会の少ない情報もあるかもしれませんが【読んでもSEOスキルが全然上がらなそうな検索ニュース】など、検索エンジンの細かなアップデートをよくぞここまでキャッチアップされているなと、脱帽です。

読んでいてとても面白いです。一度、お会いしてみたい！

hinishi.com

 

hinihi
更新頻度はあまり高くはありませんが、タイトルからでも分かるように、難しいイメージをもたれがちなSEOの話題をユーモア溢れる独自の切り口で楽しく分かりやすく更新されているので、とても面白いブログです。

Tokyo Search Professionals

 

inhouse-seo

SEO関連では数少ない、定期的に勉強会を開催している「In-house SEO Meetup」の運営メンバーが運営しているブログです。イベントのレポートなども掲載されます。
「In-house SEO Meetup」では、自社でSEOに取り組んでいるWeb担当者や、エンジニアの方も参加されているので、インハウス担当者同士の情報交換などが出来る貴重なイベントです。

まとめ

どうでしたか？
今回は、SEOの情報収集するうえでランサーズのエンジニアが参考にさせて頂いているSEOのブログサイトの紹介をさせて頂きました。

エンジニアリングに関するブログはお気に入りのブログはあるけど「SEOに関してはどこのブログをチェックしていいのか分からない」というエンジニアの方の、少しでも手助けになっていれば嬉しいです！今後とも『ランサーズ（Lancers）エンジニアブログ』をよろしくお願いします！

＜神庭 良輔/Kamba Ryosuke＞

5分で完了！Webサイトに簡単にチュートリアルが作れるIntro.jsの使い方

godgarden｜2015年02月06日
JavaScript

こんにちは。

開発部の 神庭（godgarden）です。

 

先日、サービスの操作説明をするために、操作マニュアル（チュートリアル）ようなものを作りたいって要望があり、少しだけ調べる機会がありました。

操作マニュアル（チュートリアル）といえば、前職の受託システム会社で働いていた時では、ExcelやWordを駆使してゴリゴリ頑張って作っていました。

ただ、画像や文字・図形だけで作られた操作マニュアルでは、細かいところの説明や動きを、エンドユーザー様にうまく伝えることが難しく、電話で補足しないと伝わらないってことも何度かありました。（私のドキュメント作成能力の問題かもしれませんが…）

ほかにも、仕様変更や機能拡張などでシステムは日々進化していっているのに、操作マニュアルやチュートリアルは、古いままって状態もありました。ご経験ありますよね・・・？

今回調べるにあたり、そういった背景やWebサイト/Webサービスの説明をExcelやWordで作るよりも、もっと良い方法があるはずと思い、探してみたところ、、、ありました！

intro.js

 

Webページ上に簡単にチュートリアルを作れる「Intro.js」というJavaScriptライブラリが良かったので、今回は「Intro.js」の導入と使い方を簡単に紹介していきたいなと思います。

では、まいりましょう！

Webサイト上に簡単にチュートリアルが作れるIntro.jsとは？

Intro.jsはWebページ上に簡単にチュートリアルが作れるJavaScriptライブラリです。

ライブラリで提供されている外部ファイル(intro.js, introjs.css)を読み込み、指定のタグをHTML属性に追加するだけでWebページ上に簡単にチュートリアルを作ることが出来ます。

HTMLやJavaScript初心者の方でも簡単に導入して、使いやすいライブラリだと思います。

文字で説明するよりも実際に動いているものを触ってみるのがイメージつきやすいと思うので確認してみましょう！

>>【Intro.js 提供元のWebサイト】

Webページに移動して「Show me how」ボタンを押すとチュートリアルが始まります。

intro.js-fllow

Intro.jsの導入手順と使い方

導入手順といっても、本当に簡単に導入が出来ちゃうんです。

  1. ライブラリをダウンロードします。
  2. ダウンロードした「intro.js」と「introjs.css」をWebページで読み込みます。
  3. チュートリアルのステップで説明したいHTML要素に対してタグを設定します。
  4. トリガーとなるタイミングで「introJs().start();」と魔法の言葉をコールします。

ライブラリをダウンロードします。

ダウンロードページから最新のライブラリをダウンロードします。
（※ ブログ投稿時のライブラリの最新バージョンは「v1.0.0」です。）
>>【Intro.jsライブラリのダウンロードページ】

Webページでライブラリを読み込みます。

ダウンロードしてきた「intro.js」と「introjs.css」をWebページで読み込みます。

<script src="/path/to/intro.js"></script>
<link rel="stylesheet" type="text/css" href="/path/to/introjs.css">

 

HTML要素にタグを設定します。

チュートリアルのステップで説明したい部分のHTML要素にタグを設定します。（data-stepの部分が説明する順番の設定になります。）

<div data-intro="説明のテキストを入力します" data-step="1">
<div data-intro="説明のテキストを入力します" data-step="2">

魔法のことば！

最後に、チュートリアルを開始したいイベントでメソッドを呼ぶだけ！

<script>
$(function(){
    introJs().start();
});
</script>

これだけでデモで書かれているようなチュートリアルが出来ちゃいます。
とても簡単に導入して、使えちゃいますよね。

試しに開発環境で導入してみました

私も開発環境で、ランサーズで提供しているコンテンツの「クラウドソーシング相談室」に実装してみましたが５分もあれば導入から実装まで出来てしまいました。（※ デモのため開発環境で実装したので、本番環境には適用していません。）

クラウドソーシング相談室

さいごに

今回は、Webサイト上で簡単にチュートリアルが作れるJavaScriptライブラリ「Intro.jsの導入と使い方」のお話でした。いかがでしたでしょうか？

操作マニュアルや新機能の使い方であったりWebサイト/Webサービスのコンテンツの一つとしてチュートリアルを提供してみてはいかがでしょうか。

今回ご紹介させて頂いたIntro.jsの導入と使い方の記事があなたのシステム開発に少しでもお役に立てれば、とても嬉しいです！

引き続き、「ランサーズ（Lancers）エンジニアブログ」をよろしくお願いします！

参考にさせて頂いたWebサイトや書籍

【本家Intro.js】

ライブラリを提供している本家のWebサイトになります。

【jQuery レッスンブック jQuery2.X/1.X対応】

山崎大助さんが書かれているJQueryのレッスンブックです。Intro.jsの使い方についてもサンプル付きで分かりやすく紹介されています。こちらの書籍でIntro.jsの存在を知りました！ありがとうございます。

＜神庭 良輔/Kamba Ryosuke＞

Google検索結果のサイトリンク検索ボックスの表示・カスタマイズ方法

godgarden｜2015年01月16日
SEO

こんにちは！

新年あけましておめでとうございます。
開発部の 神庭（godgarden）です。
普段はプラットフォームの開発と、SEOを担当しています。

ところで、少し前の話題になってしまいますが、Google検索をした際に特定のサイトで検索結果ページのタイトルや説明文の他に、検索ボックスが表示されているのはご存知でしょうか？

本日は、この検索ボックスの簡単な説明とカスタマイズ方法について、
説明していきたいと思います。

では、まいりましょう！

検索結果ページに表示されるサイトリンク検索ボックスとは

ブランドワードなどでGoogle検索した際に、特定のサイトでタイトルや説明文の他に、このような検索ボックスが表示されることがあります。

cap1

2014年9月にはGoogle検索結果に表示する検索ボックスをサイトの説明文の下の目立つ位置に配置し、予測変換（オートコンプリート）機能を追加するなど機能強化の動きも見られます。

【Webmaster Central Blog】
cap2

検索ボックスで検索した際の動作について

検索ボックスで検索をした際の動きとして、２通りの動きがあります。

① ユーザーの検索したキーワードを含んだ「site:」の検索結果

大半のサイトでは、Google検索の「site:」ページへ遷移することが多いのではないでしょうか。

ユーザーが入力したキーワードで情報が絞りこまれ、探しやすくなる一方で「Web担当者Forum」の【新しい検索ボックスの落とし穴】の記事でも紹介されているように、検索したキーワードによっては「site:」の検索結果ページに競合サイトの広告が表示されてしまい、好ましくないことがあります。
cap3
自社のサイトではなく広告領域のページをクリックされてしまうと、競合ページへアクセスが奪われ機会損失に繋がる可能性もありそうです。

② schema.orgでマークアップし、任意のページへ誘導

海外では、靴を中心とした商品を扱う通販サイトの「Zappos」や、クラウドソーシングサービスの「Odesk」などでは、自社サイトのページへリダイレクトして誘導しているようです。

大手のサイトでは、とくに特別な設定をしなくても、この検索ボックスが表示されていますが、
「schema.org」を使ってマークアップすることで、「表示されていないサイトでも表示を促す」ことや、Zapposやodeskのように「任意の自社ページへリダイレクト」して誘導することが出来るようです。

cap6

以下のページが詳しく書かれているので参考になると思います。

【schema.orgを使ってGoogleの検索結果にサイトリンク検索ボックスを表示させよう】

【Sitelinks Search Box】（Google Developers）

そもそも検索ボックスを表示させないという選択肢も

「site:」検索結果で競合サイトの広告が表示され、アクセスが奪われるリスクがある場合や、効果が見込まれない場合などはあえて、検索ボックスを表示させないように設定しているWebサイト/Webサービスもあります。

amazonは検索ボックスをいち早く非表示にする対応を行っています。

cap5

その他にも、国内ではcookpadをはじめ楽天市場などの大手サービスも、検索ボックスを非表示にする対応を行っているようです。

【Sitelinks Search Box】

<meta name="google" content="nositelinkssearchbox">

最後に

みなさんが、運営しているWebサイト/Webサービスの性質や、検索結果の状態などにより、検索ボックスを表示させるか、表示させないかの判断は変わってくると思います。

自社のサイトの状態や、“検索ボックス”からの流入状況などを分析してみて、最適な形に調整をしてみて頂ければと思います。

どうでしたか？
本日は、Googleの検索結果の検索ボックスの簡単な説明とカスタマイズ方法をお伝えしました。
Webサイト/Webサービスを運営している会社では、オーガニック検索などSEOでの集客は非常に重要だと思います。

近年では、Googleの検索のアルゴリズムや検索結果のレイアウトの変更など、変化も活発です。

マーケティング担当者やWeb担当者だけでは気づきにくいGoogleの仕様変更や改善要素を、エンジニアからも情報をキャッチし提案してサービスの成長に貢献してもらえればいいなと思います。

本年もランサーズエンジニアブログをよろしくお願いします。
では、またお会いしましょう！

＜神庭 良輔/Kamba Ryosuke＞