こんにちは、出産で里帰り中の奥さんと子供に会いに毎週末東京から新潟まで新幹線で帰っている、スマホアプリチームの @tkoshida です。
さて弊社では7月より全社でリモートワークを導入し徐々に利用が拡大していることから、今回は弊社エンジニアの、特にスマホアプリチームに絞ったリモートワークの取り組みを紹介しようと思います。
続きを読むログ解析初心者に贈る便利なコマンドの使い方
好きなMH（今はGTM？）はヴァイオラの那須（@nasum）です（アイスブレーク）。レッドミラージュも捨てがたいですが、ヴァイオラが一番好きですね。ちなみに好きなファティマは京です。
Webサービスを運営している以上、避けて通れないのがログ解析です。このログ解析あまり経験がないと何をどう始めたらいいのかよくわからないと思います。私自身今までログ解析の仕事をしたことがなかったので、わからない状態が続いているという危機感がありました。
そこで最近はできるだけ率先してログ解析の仕事があればそれをやるようにしてコマンド力を鍛えています。今回は教えていただいたり自分で調べたりして得られたログ解析するときに使うコマンドの使い方を紹介したいと思います。
以下簡単にログ解析の流れとともにコマンドを紹介します。やっていることは「ログに記録されたファイルサイズを合計して１日に配信される特定の条件を満たした応答のサイズを調べる」ということをやっていきます。
続きを読むjQueryのプッシュ通知プラグインを作りました
初めまして。インターンの@asmsuechanです。 IDに使ってる'asm'はあすみんじゃなくてアセンブリです。
最近のマイブームはgithubのstudyリポジトリをブログ代わりにtipsを書いた.mdファイルをポンポン投げていくことです。
やってること
自分は今メッセージ改修チームに所属しており、メッセージのUX改善を目標として仕事をしています。
これまでほぼほぼJavaScriptは書いたことなかったのですが最近はほとんどJavaScriptしか書いていません。JavaScript楽しいのでもっと書けるようになりたいです。
ここでする話
プッシュ通知が簡単にできるjquery_push_notificationというプラグインを作ったことについて書きます。
デモサイトはこちらです。
以下のサイトで紹介していただきました。
プラグインを作るきっかけ
メンターさんの 「FacebookのMessangerのように新着メッセージがブラウザに通知されたらUX改善になるかもね」 という提案から自分がブラウザプッシュ通知を担当することになりました。
そして実際に作る際、どうせなら他の人も簡単にプッシュ通知が出来るようになって欲しいという思いがあったのでjQueryプラグインという形に落ち着きました。
ブラウザプッシュ通知の実装
まず実装はMDNのNotifications APIとjQueryのプラグイン作成方法を見ながら最小限の実装をしました。
作ってまずメンターさんに言われたのが 「これじゃマージできないよね。エラー処理がなっていない。商業プログラムを書く時はエラー処理が一番重要になる」 でした。
この言葉はメンターさんからの指摘の中でも強く印象に残っており、仕事としてのコードを考えるきっかけになりました。
プラグインとして公開
ライブラリとして世界の人に使ってもらうにはどうすればいいのか考えて(他のライブラリを参考にしながら)、ドキュメントとデモとテストがあれば使ってくれそうだと思い、.js、.coffee、.min.jsしかなかったリポジトリにこれらを追加していきました。
ここからはもう完全に個人の時間で書き進め、プッシュ通知の部分はほとんど出来ていたので3日くらいでデモサイトとテストとREADME.mdを書きました。
また、Notifications APIをラッピングしたライブラリは他にもあったので(jQueryはなかったはず)、これらを参考に作りました。
実装
実装に特に難しい部分はなく、ただNotifications APIをラッピングしただけです。以下のようなインターフェイスで呼び出すことが出来るようにしています。
$.notify('タイトル');
テストはkarma+jasmineで書きました。
ブラウザプッシュ通知の現状
残念ながら仕様上の都合でクラウドワークスではブラウザプッシュ通知でこのプラグインが使われることはなくなりました。
ですが現在別の方法でブラウザプッシュ通知を実装していますのでリリースを乞うご期待です！
We're Hiring!
クラウドソーシングのクラウドワークスでは他のエンジニアのためになるライブラリを書きたいエンジニアを募集中です。
言われたことをやらないエンジニアになるために
はじめまして。今年の4月にクラウドワークスに入社した新卒エンジニアの戸口（@Dooor）です。自分が初の新卒エンジニアなので、周りのエンジニアが全員中途で入社された方々という贅沢な環境で開発しています。
新卒が1人しかいないのもあって、周りのエンジニアをよく観察してみたりするのですが、言われたこと（だけ*1）をやらないエンジニアが多い印象を受けます。そもそもあれをやれ、これをやれ、と言っている人もいないです。
そんな環境なので「指示は特に出さない」とよく言われます。
配属後すぐに「思っているより放置されると思うよ」とか言われたりします。
昔から言われたことはしっかりできる（と思っている）僕ですが、言われたこと（だけ）をやらないエンジニアになるためにやっていることをお話します。
続きを読む「アプリだけのオリジナルコンテンツ」をSNSで拡散してもらうために。
こんにちは、クラウドワークスで公式Androidアプリの開発などをやっている @YusukeIwaki です。 クラウドワークスアプリでは、今年の５月に「仕事を探す」機能アップデートをした際に、お仕事特集 というアプリオリジナル機能をリリースしました。
お仕事特集機能は、「電車の中で仕事をなんとなく見る」という人のために、クラウドワークス事務局側が温かみのある職人作業（誇張w）で仕事を選んで定期的に掲載しているものなのですが、 今回は、このお仕事特集機能を
といった要望 をどう実現したのか、をお話します。
SNSシェアするための要件は？
そもそもTwitterやFacebookで拡散させたい、とはどういう機能があれば実現できるでしょう？
答えは簡単で、「URLがあればいい」のです。 逆に、URL以外のメタデータ（画像やdescriptionなど）は、用意しても共有先のアプリで使われないことが多く、「URLがあればいい」が必要十分条件なのです。 （参考→ Y.A.M の 雑記帳: Facebookとそれ以外でACTION_SENDで渡すテキストを変える）
では、アプリ独自のコンテンツにURLを紐付けるにはどうすればいいのでしょうか？
ここが今回の記事の本題で、 ディープリンク という仕組みをうまく使います。
ディープリンク
ディープリンクには、大きく分けて２とおりの実装方針があります。
- アプリが独自スキームを定義して、独自スキームを含むURLをシェアする
- 特定のhttp(s)のURLへのアクセスをアプリで横取りする
もし仮にほぼ100%のユーザがアプリでリンクを開くことを期待できる場面であれば、前者の方針のように、独自スキーム (androidapp://xxxxx...、crowdworks://xxxx... ) などを定義し、そのリンクをシェアすることで、アプリに誘導をすることができます。 ところが、今回は「SNSでシェアする」という想定のため、PCを使っているユーザも一定数いるのでこの方法は使えません。PCユーザがリンクを踏んだら「androidapp://xxx」や「crowdworks://xxx」というリンクが解釈できずエラーになってしまいます。
そこで、今回のお仕事特集のシェアでは、後者の方針のように、特定のhttp(s) URLをアプリで横取りする方式を採用しました。
「お仕事特集の詳細を見ようとしたらクラウドワークスのアプリが立ち上がってきた！」というモデルにするため、
- お仕事特集詳細のURLを定義する
- お仕事特集詳細のURLをPCで見た際の代替動作を定義する
- アプリ側でお仕事特集詳細のURLを横取りする処理を実装する
の３つの対応をおこないました。
このなかで、２つ目の「お仕事特集詳細のURLをPCで見た際の代替動作を定義する」と３つ目の「アプリ側でお仕事特集詳細のURLを横取りする」という部分について、少し説明を加えます。
お仕事特集詳細のURLをPCで見た際の代替動作を定義
冒頭で述べた通り、Webサービス本体側にはお仕事特集というコンテンツは存在しません。 だからといって、たとえば「ポケモンGO特集」というリンク文字列をクリックした人がクラウドワークスのトップページに飛ばされたら「あれ？？」ってなってしまいますよね。
そこで、今回の実装では、「PCでクリックした時に見せる既存コンテンツ」を管理画面で設定できるようにしました。
これにより、たとえば
のように、それぞれの特集に対して、違和感のない既存コンテンツを指定でき、PCでリンクを踏んだ際にそれらのコンテンツを見せるようにすることで「あれ？？」ってならないような配慮ができます。
アプリ側でお仕事特集詳細のURLを横取りする
アプリ側は、単純に https://crowdworks.jp/public/feature_articles/:id を拾うよう、AndroidManifestでインテントフィルタを追加しています。
labelを独自に指定したくなる時が来るかもしれないので、既存のアクティビティに直接インテントフィルタを追加するのではなく、aliasを作成してそこにインテントフィルタを指定すると良いでしょう。
<activity-alias
android:name=".PublicFeatureArticleActivity"
android:targetActivity=".EntrypointActivity"
android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="https" android:host="@string/hostname" android:pathPrefix="/public/feature_articles" />
</intent-filter>
</activity-alias>
エイリアス先のEntrypointActivityでは、URLから特集idを抽出し、当該のお仕事特集にジャンプさせる処理を追加しています。
og:imageを正しく設定するために
おおむね上記の方法でうまくいったのですが、１つだけ問題がありました。
もともと、PCで見た際の代替コンテンツの表示を、単純なHTTP 302リダイレクトで実装していたため、リダイレクト先（仕事検索結果ページなど）のOGPが取得されてしまい、
facebookで実際にお仕事特集をシェアしてみると、イマイチな感じになってしまいました。 これでは、「ポケモン特集だ」というのがパット見わからず、バズってもらえません。
そこで、ロボットによるアクセスの場合には、302リダイレクトではなく、HTTP 200でダミーページを返し、そのなかでJavaScriptでリダイレクトをかけるように変更をしました。
| 修正前 |
|---|
 |
| 修正後 |
|---|
 |
ダミーページに指定するog:imageとog:descriptionは、以下のように管理画面で設定できるようにしました。
こうすることで、FacebookからのOGP取得は、お仕事特集の指定画像を参照するようになり、その結果・・・
このように、特集をシェアしても違和感がなくなりました。めでたしめでたし。
今後の展開
今回は、「コンテンツをシェアしてもらうために」という思いで、ディープリンクの対応を進めました。
実のところ、対応を進めているときは、「マーケティング的にはメリットはあるけど、技術/設計的にメリットは有るのかなー・・・」と複雑化に対する懸念をもちつつやっていました。しかし、対応を進めていくうちに
などなど、プッシュとの設計共通化など、新たに設計改善ができそうだなー、というポイントを発見できました。
クラウドワークスでは、アプリは少人数で開発をしているため、複雑化しちゃったあとにはしっかりリファクタリングをし、設計をシンプルに保つ、というのを常に心がけています。 直近は、プッシュ通知とディープリンクの共通設計などを行い、次なるマーケティング施策を打ちやすい土台がためを実施することになるでしょう…。
We're Hiring!
クラウドソーシングのクラウドワークス では、アプリを使って「クラウドワークスをより身近に」するエンジニアを大募集中です！
アプリなら是非やってみたい！APIならガシガシ書けるよ！というかた、お気軽に「話を聞きに行きたい」をポチッとどうぞ！
