ヴァル研究所様 2018年2月会社訪問記

2018年2月23日にヴァル研究所様(以下、ヴァル研様）に会社訪問した際の訪問記です。

アジャイル、改善の導入に力を入れている会社様で、そのあたりの説明をしていただきました。

入口

ドアをくぐってすぐ右手に電車のゲームがあります。

今思うとこの時点で遊び心満載なヴァル研様だなあと思いますね。

入口右のさらに奥に行くと、これまで会社訪問された方の感想を書いた付箋が壁一面にたくさん貼ってあって圧倒されます。ここで、ヴァル研様の会社訪問担当の方と合流して見学スタートしました。

4階にある電光掲示板では、今回の見学の歓迎をしていただきました！

以降、各部署様ごとの訪問感想となります。

総務部様

最初は総務部様にお邪魔しました。

アジャイルやスクラムというとシステム開発の手法というイメージがあったのですが、総務のお仕事でスクラムを採用していることに驚きました。

こちらでは1週間1スプリントのスクラムを採用していて

• 一週間でやることをホワイトボード上で付箋に貼って見える化
• 一週間で各自がどれくらいのストーリーポイントを消化できたか＋スプリント中にどれくらい割り込みタスクがあったかを表で整理。
• リリーストレインで中長期的なスケジュールを見える化
• メンバーの出社時と退社時のコンディションをニコニコカレンダーで見える化

等を行っていました。

特に興味深いと思ったのが割り込み量タスクの見える化で、普通のスクラムの考え方とは違い、スプリント期間中での計画変更をあえて許容し、自分たちの作業に合うようにやり方を工夫しているのが良いなと思いました。

写真上部がバーンダウンチャート、下部に各メンバー毎の割り込みタスク量が数値で表されています。

コンテンツ部門様

駅すぱあと向けの電車やバスの運行データを作成しているコンテンツ部門様にもお邪魔しました。

こちらは〇〇バスの時刻表データをX月X日までに作成するといったことをされているので、 それがバックログになったカンバンが使用されていました。

優先度の高いバックログアイテムをカンバンの上部に持ってきて、どのデータを早めに作成しないといけないかすぐにわかるようにする　といった工夫がされていて興味深かったです。

プロモーション担当部門様

 こちらでは

• ホワイトボード上に手書きのカレンダーがあって、イベントや作業がある日に付箋を貼る
• イベントや作業が終わったら、完了スタンプを押す（終わってない作業がすぐ見える）
• ホワイトボード上にメンバーの残業時間を毎週記載して、残業時間の見える化。
• ペアワークによる作業属人化の解消

等をされていました。独自のアイディアが沢山の部署でした。

カレンダーを使った見える化は弊社でもリリースまでのイベントの共有などに使えるかもと思いました。 あとお土産？に駅すぱあとの酔っ払いモードプロモーションのティッシュをいただきました。

よくお酒を飲む方にはいいかもしれないですね。

開発部様、API Technology部様

まとめてのご紹介になってしまいますが

• 壁一面の巨大なリリーストレインで各チームのリーダー層での情報共有
• カンバンのdoingの幅を意図的に狭くして、WIPを制限
• メンバーごとに割り込みタスクを受け付ける量をカウントして、割り込みタスクの量を見える化や制限する
• 直近のスプリントのバックログだけではなく、3スプリント先くらいまでのバックログを乗せたカンバンを別途用意して、今後の作業もわかるようにする。

といったことをされていました。 あと、有名なべいだー神社も拝見させていただきました。 こういった遊び心もヴァル研様らしいですね（奉納されたお酒はいつ飲むのだろうか・・・）。

最後まで訪問しての感想

最後に全体を通しての感想です。

• どの部署も付箋が一杯で見える化が全社的に浸透していると感じました。
• 全部署に同じやり方を無理に適用させるのではなく、それぞれの部署の仕事内容にあったやり方を採用しているのが浸透している秘訣なのかなと思いました。
• どの部署も遊び心を取り入れていて、楽しんで仕事が出来そうだなと思いました。
• ニコニコカレンダーのように、業務には直接は関係しないものについても見える化されているのが印象的でした。これらをもとにコミュニケーションが促され結果的にパフォーマンスの向上に繋がるのだと感じました。
• 見える化の完成形とも思えるヴァル研様ですが、新しいカンバンを導入してみたりと現在も改善途中とのことで、日々進化を続ける姿を見習いたいと思いました。
• 部署間を越えて、コミュニケーションをとるきっかけになるのかなと思いました。半年待ちでやっと会社訪問、うわさには聞いていましたが、「百聞は一見にしかず」でした。

Eclipseで使うショートカットキーを覚えよう！

はじめに

こんにちは、入社してからもうすぐ１年になるr_yxkxrx13です。
入社したばかりの自分は、まだプログラミング未経験で、初めてEclipseを使用してコーディングした時はスピードが遅かったです。 そこで、Eclipseに使用されているショートカットキーを調べながら積極的に使用してみました。その結果、当初よりスピードが上がり、 マウスの操作も減ったことで効率が良くなりました。
Eclipseのショートカットキーを使ってみて分かったことは、WindowsとMacでのショートカットキーが違っています。
今回は、プログラミングの初心者向けに、WindowsとMacのEclipseで個人的によく使用しているショートカットキーを紹介したいと思います。

コーディング関連ショートカットキー

コメントアウト

Windows	Mac
Ctrl + /	command + /

カーソルがある行をコメントアウトできます。
また複数行を選択した状態でショートカットキーを押すことで、選択行を全てコメントアウトできます。
コメントアウトを取り消したい時は、もう一度ショートカットキーを押すことで取り消すことができます。

Javadocコメントの追加

Windows	Mac
Alt + Shift + j	option + command + j

ショートカットキーを押すだけで、すぐjavadocコメントを追加できます。
またメソッドに引数や戻り値、例外処理などがある場合、それに従ってjavadocコメントを追加できます。

指定行の削除

Windows	Mac
Ctrl + d	command + d

現在カーソルのある行を1行削除できます。
また複数行を選択した状態でショートカットキーを押すことで、選択行を全て削除することもできます。

自動フォーマット

Windows	Mac
Ctrl + Shift + f	shift + command + f

インデントや改行、スペースなどのフォーマットを自動的に整えてくれます。
コーディングでフォーマットが整っていなくても、ショートカットキーで整えてくれる便利なものです。

名前を一括変更する

Windows	Mac
Alt + Shift + r	option + command + r

ソースコード内の変数名、またはメソッド名にカーソルを置いて、ショートカットキーを押すことで、同じソースコード内の変数名、メソッド名を一括で変更することができます。
呼ばれている箇所も自動的に変更することができます。修正漏れ防止の1つで大変便利なものです。

ヒストリーを戻す／進む

Windows	Mac
Alt + → ( or ← )	option + command + → ( or ← )

Alt + ←で直前まで表示していたソースコードファイルに移ります。さらにAlt + →で元のソースコードファイルに戻ることができます。 複数ソースファイルの切り替えがスムーズで大変便利です。

デバッグ関連ショートカットキー

ステップイン

Windows	Mac
F5	F5

１行ずつ実行する。（メソッドの呼び出しまで１行ずつ）

ステップオーバー

Windows	Mac
F6	F6

次の１行を実行する。（クラス内で１行ずつ）

ステップリターン

Windows	Mac
F7	F7

メソッドを最後まで実行し、呼び出し元へ戻る。

ブレークポイントの設定・解除

Windows	Mac
Ctrl + Shift + b	shift + command + b

デバッグをしたいコードをブレークポイントに設定・解除をすることができます。
※ブレークポイント：実行中のプログラムを一時停止させる箇所

次の警告・エラーへジャンプ

Windows	Mac
Ctrl + .	command + .

警告やエラーになっているコードを１つずつ見ることができます。
警告やエラーになっているコードにctrl + 1を押すと、修正のヒントが表示されます。

検索関連ショートカットキー

検索ダイアログを開く

Windows	Mac
Ctrl + h	control + h

プロジェクトの全ファイルに対して、Java検索やファイル検索などのタブから対象ファイルを検索することができます。

ワークスペース内の検索

Windows	Mac
Ctrl + Shift + G	shift + command + G

ワークスペース内で変数やクラスなどのリファレンス検索ができます。

ワークスペース内でテキストを検索

Windows	Mac
Ctrl + Alt + g	option + command + g

ワークスペース内でテキストを検索できます。

終わりに

以上、個人的によく使用するEclipseのショートカットキーを紹介しました。紹介したショートカットキーの他にもたくさんありますので、興味がある方は、インターネットなどで調べてみてください。
プログラミングの初心者は、しっかり基本を理解することが大事なので、自動の機能に頼りすぎないように注意しましょう！ 最初は短いソースコードから練習していきますが、プログラミングの業務に入ると、長〜いソースコードを書く機会が増えて時間がかかってきます。ショートカットキーを使いこなすことで、無駄な操作が減り、コーディングの効率が良くなると思います。
ショートカットキーを使いこなしたい方は、たくさんのショートカットキーを一気に覚えるのではなく、コーディングをたくさん練習しながら積極的にショートカットキーを使用してみてください！

参考

• Eclipseのショートカットキー
  
• Eclipseショートカットキー Mac & Windows 対応表 - CODESCRIBBLE
  
• 便利なEclipseショートカットキーまとめ(Mac) - Qiita
  
• eclipseでよく使うショートカット - Qiita

---

• エンジニア中途採用サイト
  ラクスでは、エンジニア・デザイナーの中途採用を積極的に行っております！
  ご興味ありましたら是非ご確認をお願いします。
  
  https://career-recruit.rakus.co.jp/career_engineer/

• カジュアル面談お申込みフォーム
  どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。
  以下フォームよりお申込みください。
  rakus.hubspotpagebuilder.com

• ラクスDevelopers登録フォーム
  
  https://career-recruit.rakus.co.jp/career_engineer/form_rakusdev/

• イベント情報
  会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！

◆TECH PLAY
techplay.jp

◆connpass
rakus.connpass.com

Markdownで文章を書くための 6 + 4 記法

はじめに

こんにちは！FM_Harmonyです。
Rakus Developers Blogでは二回目の記事投稿になります。 前回はJavaScriptについて記事の投稿をさせていただきました。
tech-blog.rakus.co.jp

今回はMarkdownについて紹介します。
私も業務連絡等で使う機会が多いのですが、ある程度使えるようになるまで時間がかかりました。 なので、この記事が今後Markdownについて学習する方の助けになれば幸いです。

目次

Markdownとは？

Markdown（マークダウン）は、文章の書き方です。デジタル文書を活用する方法として考案されました。特徴は、

• 手軽に文章構造を明示できること
• 簡単で、覚えやすいこと
• 読み書きに特別なアプリを必要としないこと
• それでいて、対応アプリを使えば快適に読み書きできること

などです。

（日本語Markdownユーザー会公式サイト、Markdownの概要より引用）

要するに、文章を見やすく手軽に書くための記法がMarkdownです。 見出しや表組みなどの文章の構造を設定したり、太字や囲みなど文章を装飾することが簡単にできます。

私が知っているものだと、以下のサービスで利用することができます。

• チャットツール（Slack, Mattermost, ...）
• プロジェクト管理サービス（GitHub, GitLab, ...）
• Redmine*1
• 記事投稿サービス（はてなブログ, Qiita, ...）

上の三種類はエンジニアが利用することの多いサービスですね。 これらのサービスを利用して、円滑なコミュニケーションを図るためにMarkdownへの理解は必須です。

では、Markdownの記法を紹介します。 今回紹介するのは構造に関する6個の記法と装飾に関する4個の記法、合わせて10個の記法です。

構造に関する6個の記法

改行

文章を意図的に改行する際は、改行したい部分に（半角スペース2つ）を付けて改行します。

• 使用例（文章をドラッグしてみてください）

改行は文章の終わりで行いましょう。  
こんな風にね。

• 実際の表示
  改行は文章の終わりで行いましょう。
  こんな風にね。

見出し

段落に見出しを付けたい場合は、#（シャープ）を利用します、＃が多いほど小さな見出しになります。 文章とマークの間に半角スペース1個分の空白が必要な場合がほとんどです。
また、はてなブログやQiitaでは、見出しから自動的に目次を作成してくれます。

• 使用例

#### 見出しの例  
見出しがあると話の流れが分かり易いですね。  
##### 小見出しの例  
小見出しを入れるためには#の数を増やします。

• 実際の表示

  見出しの例

  見出しがあると話の流れが分かり易いですね。

  小見出しの例

  小見出しを入れるためには#の数を増やします。

列挙

一つ、二つ、・・・というように何かを列挙したい場合は*(アスタリスク)、+（プラス）、 -（マイナス）のどれかを使います。 どれを使っても表示に変わりはありません。

列挙マークも見出しマークと同じで、文章とマークの間は半角スペース1個分空けます。 また、使用例のように列挙の中に文章を入れたり、階層的に列挙することも可能です。

ちなみにはてなブログでは、最初の列挙マークの上に空白行を入れないとマークとして認識されないことがあるので注意が必要です。

• 使用例

  * りんご  
     おいしいよね！
  * みかん  
     * 温州みかん  
     * 愛媛みかん
  * もも  

• 実際の表示
  • りんご
    おいしいよね！
  • みかん
    • 温州みかん
    • 愛媛みかん
  • もも

表組み

表組みを作るには、|（パイプ）、:（コロン）、-（ハイフン）の三つを利用します。

表の形式は一行目が列名、二行目が列の揃え、三行目以降が値という風になっています。 それぞれの文章を|で囲みますが、この時列と列との間で|が重複しないようにします。

• 正

|列名|列名|
|:-:|:-:|
|値|値|

• 誤

|列名||列名|
|:-:||:-:|
|値||値|

文章の揃え方は左揃え、中央揃え、右揃えから選ぶことができます。 デフォルトは左揃えです。
揃えを表すためには、:、-を利用します。 :の位置で揃える方向を決めると覚えれば、ほぼ間違いありません。 が、中央揃えは-の両端に:を置くので気を付けてください。

また、一番左の|の前にスペースを入れると正しく認識されないことがあるので、注意が必要です。

• 使用例

|揃えない列|左揃えの列|中央揃えの列|右揃えの列|
||:-|:-:|-:|
|リンゴ|ゴリラ|ラッパ|パセリ|
|こんな|ふうに|表が|できます|

• 実際の表示

揃えない列	左揃えの列	中央揃えの列	右揃えの列
リンゴ	ゴリラ	ラッパ	パセリ
こんな	ふうに	表が	できます

引用

引用を示す場合は文章の前に>（大なり記号）を置きます。 チャットなどで相手の発言を明示したい場合に利用するとよいでしょう。
注意点としては、引用マークの直後にある行も引用と認識される事が挙げられます。 引用が終わった後は、空白行を入れておくと間違いがないでしょう。

• 使用例

> Aがいい？ Bがいい？  
> それともCがいい？  
あるいはDがいい？

Aがいいね！

• 実際の表示

  Aがいい？ Bがいい？
  それともCがいい？
  あるいはDがいい？

  Aがいいね！

コードブロック

`（バッククォート）三つで文章を囲みます。 始めのバッククォート三つのあとに言語名*2を書くと、シンタックスハイライトが有効になります。

コードブロック内では、Markdown記法が使えません。

• 使用例

  ``` java
  public class SomeLogic{ 
    public static void someMethod(){
       System.out.println("Hello World!");
    }  
  }; 
  ``` 

• 実際の表示

public class SomeLogic{ 
  public static void someMethod(){
     System.out.println("Hello World!");
  }  
}; 

装飾に関する4個の記法

強調

*（アスタリスク）、または_（アンダーバー）で文章を囲みます。 強調マーク一つで囲むとイタリック体、二つで囲むと太字*3になる場合が多いようです。

• 使用例

_Hello World!_  
**ここが大事です！**  

• 実際の表示
  Hello World!
  ここが大事です！

囲み

`（バッククォート）一つで文章を囲みます。 ファイル名を示すときなどによく使います。

• 使用例

`C:\Program Files\設定ファイル.xlsx`  

• 実際の表示
  C:\Program Files\設定ファイル.xlsx

打消し線

~（チルダ）二つで文章を囲みます。
チャットでうっかり誤った情報を流したけど、書いたことは消さずに取り消したい*4なんて時に使います。

• 使用例

会議は~~10時からです。~~  
11時からでした。

• 実際の表示
  会議は10時からです。
  11時からでした。

埋め込みリンク

[]（ブラケット）、()（丸かっこ）を使います。 []で文章を囲み、()でURLを囲むことで文章にリンクを埋め込むことができます。
URLを打てば自動的にリンクが張られるのですが、リンク先を分かりやすくしたいという場合にはこちらを使います。

• 使用例

http://tech-blog.rakus.co.jp/
ラクスの技術者ブログは[ココ！](http://tech-blog.rakus.co.jp/)

• 実際の表示
  http://tech-blog.rakus.co.jp/
  ラクスの技術者ブログはココ！

おわりに

以上がMarkdownで文章を書くための基本的な記法になります。

Markdownの記法は他にもありますが、今回紹介したものが使えれば概ね問題ありません。 特に改行、列挙、強調、囲み、打消しの5つはよく使うので、これらを使えるようになるだけでもかなり見やすい文章を書くことができます。

Markdownを覚えるコツとしては、とにかく書いて表示を見ることに尽きます。 例えば、Mattermostではプレビュー機能が追加されましたし、StackEditなどMarkdownが有効なテキストエディタのサービスもあります。 これらを利用して理解を深めることが、Markdownに慣れるための一番の近道だと私は思います。

まだMarkdownを使っていない方は、この機会にMarkdownについて学習することをおススメします。
きっとMarkdownを身につけた後では、あなたの書く文章がより見やすくなっていることでしょう。

参考にしたサイト

• Markdown記法 チートシート - Qiita
  Markdownについて学習する際に利用させていただきました。
• StackEdit
  おわりにで紹介した、ブラウザ上のテキストエディタサービスです。
  文章のプレビューを行う際に利用しています。

---

• エンジニア中途採用サイト
  ラクスでは、エンジニア・デザイナーの中途採用を積極的に行っております！
  ご興味ありましたら是非ご確認をお願いします。
  
  https://career-recruit.rakus.co.jp/career_engineer/

• カジュアル面談お申込みフォーム
  どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。
  以下フォームよりお申込みください。
  rakus.hubspotpagebuilder.com

• ラクスDevelopers登録フォーム
  
  https://career-recruit.rakus.co.jp/career_engineer/form_rakusdev/

• イベント情報
  会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！

◆TECH PLAY
techplay.jp

◆connpass
rakus.connpass.com

*1:オプションからMarkdownを使えるようにできます、こちらを参考。

*2:ファイル名を書いてもよい場合もあります。

*3:はてなブログのPC版では太字の代わりに、色付き囲みになります。

*4:文章を消すと発言が追えなくなるので、消さずに内容だけ編集することが多いためです。

【Amazon Echo】フラッシュニュースでブログの最新記事のタイトルを紹介するAlexaスキルを公開した話

id:radiocat です。毎朝Amazon Echo Dotでニュースを聴いています。

先日公開したGoogle Assistant対応アプリ に続いてAmazon Echo向けのAlexa Skillも申請が承認されました。

使い方

お手元のAlexaアプリのメニューから スキル を開いて RAKUS Developers Blog を探してみてください。

スキルの画面を開いて 有効にする ボタンを押してください。

しばらく待つと有効化されて 設定 ボタンが表示されるのでこれも押します。

フラッシュニュースの管理 画面を開きます。

フラッシュニュースの一覧が表示され オン になっていることを確認します。順番も好きな位置に変更できます。

この設定によって、以下のように呼びかけると設定した順番にニュースが読み上げられます。

Alexa、最新のニュースを流して

これで、朝のニュースを聴く前にブログの更新情報を聴くことができます。

スキルの開発

Alexa Skillsには4種類のスキルがあります。フラッシュニュースはそのうち フラッシュブリーフィングスキル という種類のスキルで、基本的にはRSSフィードの情報を読み上げるだけで、Alexaとの会話を構築することはできません。そのため4種類の中でも最もシンプルな仕組みで簡単に作成できるスキルです。図のような仕組みでフィードに含まれる情報がEchoで読み上げられます。

設定は簡単で、基本的にはブログのRSSフィードを設定するだけです。ブログが更新されるとAlexaは最新のRSSフィードの情報を読み上げてくれます。例えばこのブログのRSSフィードは以下のようになっていますが、Alexaが読み上げるのは <description> 要素の内容です。

<item>
    <title>Google Homeがブログの記事タイトルを読み上げるアプリを作って公開した話</title>
    <link>http://tech-blog.rakus.co.jp/entry/2018/02/05/130449</link>
    <description>&lt;p&gt;&lt;a href=&quot;http://blog.hatena.ne.jp/radiocat/&quot;&gt;id:radiocat&lt;/a&gt; です。&lt;a class=&quot;keyword&quot; href=&quot;http://d.hatena.ne.jp/keyword/Google%20Home&quot;&gt;Google Home&lt;/a&gt; Miniと&lt;a class=&quot;keyword&quot; href=&quot;http://d.hatena.ne.jp/keyword/Amazon%20Alexa&quot;&gt;Amazon Alexa&lt;/a&gt; Dotの二刀流プレイヤーです。&lt;/p&gt;
    （省略）

Alexaが読み上げるテキストの内容は以下のような条件を満たす必要があります。

各フィードアイテムの文字数が4,500文字以内であること。 SSML、HTML、XMLのタグなどの特殊文字を含まない、プレーンテキストであること。

詳細はデベロッパーサイトに解説されていますが、現状のブログ記事のままだとこの条件を満たすことが難しくエラーが発生してしまいました。

developer.amazon.com

上記デベロッパーサイトの解説によるとRSSフィード以外にJSON形式にも対応しています。そこで、RSSフィードをJSON形式に変換することを考えました。先日公開したGoogle Assistant対応アプリ もHeroku上でRSSフィードをJSON形式に変換したので、仕組み的にはこれと同じ方式です。そのためこのHerokuの環境へ新たにAlexa向けのエンドポイントを追加することにしました。

全体の構成図は以下のようになります。

前回同様FeedParserを使ってRSSフィードの内容を取得し、以下のような要領でフラッシュブリーフィングスキルの仕様に合わせてJSONオブジェクトを生成します。

var feedData = [];
http.get(BLOG_RSS_URL, function(res) {
  res.pipe(new FeedParser({}))
    // 省略
    .on('readable', function() {
      var stream = this, item;

      while (item = stream.read()) {
        feedData.push(
          {
            "uid": item.guid,
            "updateDate": item.pubDate,
            "titleText": item.title,
            "mainText": item.title,
            "redirectionUrl": item.link
          }
        );
      }
    .on('end', function() {
      response.setHeader("Content-Type", "application/json");
      response.send(JSON.stringify(feedData));
    });
  
});

Alexaが読み上げるのは mainText の内容です。上記の例では記事のタイトルを読み上げます。また、複数の場合はオブジェクトを配列にすると updateDate が新しい順に最大5件が読み上げられます。日付が古いものは無視されるとのことで、試したところ1週間以上前のものは読み上げられませんでした。

なお、 ラジオニュースのようにオーディオファイルを再生させたい場合は streamUrl 要素を追加しオーディオファイルのURLを設定するようです。

Amazon Echoで聴いたフラッシュニュースの内容はAlexaアプリにも表示されます。

この画面に表示されているブログ記事のタイトルは titleText で指定したものです。もっと読む のリンク先は redirectUrl のURLになります。

開発手順についてはQiitaにもまとめましたので参照ください。

qiita.com

スキルの申請

HerokuにデプロイしたらAlexaのデベロッパーコンソールにエンドポイントのURLとフィードの情報を設定することでフラッシュブリーフィングフィードの設定は完了です。512x512pxのアイコンは冒頭に紹介したようにフラッシュニュースの一覧画面に表示されます。

最後にスキルの 公開情報 と プライバシーとコンプライアンス を設定します。スキルの画面に表示される108x108pxと512x512pxの2種類のアイコンを準備する必要があります。また、個人情報を収集する場合はプライバシーポリシーのURLを準備する必要がありますが、フラッシュブリーフィングフィードは発信するのみで個人情報は収集できないので不要です。Google Assistantの場合はプライバシーポリシーのURLを必ず準備する必要がありましたが、Alexaの場合は個人情報を収集しない場合は必要ありません（逆に指定すると申請時にリジェクトされるようです）。

一通り設定が終わると申請ボタンを押して申請します。休日中に申請すると翌営業日には連絡が来て無事承認されました。

おわりに

フラッシュブリーフィングスキルはRSSフィードが取得できるコンテンツであれば手軽に作成することができ、今回のようにカスタマイズも容易にできます。毎朝聴くニュースと一緒に聴いてもらえるので、コンテンツを持っているなら作って損はないのではと思います。

Google AssistantとAlexa Skillsのそれぞれで開発から公開までチャレンジしてみましたが、どちらも実現は容易で手軽さがあります。ただ、1つのプラットフォームで出来ることは限られているので、やりたいことを実現するためには今回のようにHerokuを使ったり、GoogleやAmazonの他のクラウドプラットフォームと連携させたりといった工夫は必要になると思います。また、公開のための審査はどちらもスピーディーなレスポンスなので、リジェクトを恐れず申請してみるのが良いと思います。

私は先日神戸で開催された Alexa Day 2018 に行ってきました。会場でも話題になっていましたが、音声のVUIはスマホなどの既存のUIよりも利用者にとって身近で手軽なもので、子供からお年寄りまでが扱うことができるインターフェースとして大きな可能性を秘めています。Amazon Echoはまだ招待制で販売されていますが、今後少しずつ入手しやすくなってくると思われます。利用者が増えればスキルに要求されることも増えて可能性も広がっていくので今のうちにスキルの開発にチャレンジしておくと良いと思います。

Udemyを利用してみた!!

どうも、NIR-AMAUQAです。寒い日が続いていますね。
そんな時はできるだけ家に引き籠りたい!!
そして、家で何か勉強したいということで…
今回はUdemyというサービスを利用して、スキルアップを試みるお話です。
※ 投稿時点では、まだ受講途中です。

Udemyって何？

Udemyとは多数の講座をeラーニングで提供するサービスです。
実際にサイトを見てみるといろいろな種類の講座があるのがわかると思います。

www.udemy.com

言語は英語が中心ですが、日本語の講座も結構あります。
※英語の講座でも、字幕付きの講座もあるみたいです。

パッと見た感じだと有料コンテンツが多いですが、無料コンテンツもあります。
トップページで無料と検索すると、少しですが出てきます。

なんでUdemyを受けようと思ったのか

先日、社内メールでUdemyの講座で業務もしくは技術に関連するものであれば会社負担で受けられますよという連絡がありました。
これはエンジニアにとってはかなり嬉しいですね!!
業務に直接関係ない講座でも技術関連であればOKとのことでした。

そして、eラーニングでのスキル学習に興味もあったのでやってみよう!!
という経緯です。

そもそも社内メールを見るまで、Udemyの存在を知りませんでした。（無知なのは突っ込まないでください。笑）

どんな講座を受けたのか

技術関連であればOKとのことでしたので、以下の条件で探しました。

• 業務とは違う分野
• 普段使っていないプログラミング言語
• 身近なもの

結果、今回は全く触ったことのないSwiftの勉強をすることに!!
Xcodeにも触れたことが無かったので初心者用講座を探しました。
いろいろあった中から「【Swift4.0対応】超豪華版！未経験者が有名アプリ開発者になるiOS 11の全て 20個以上アプリをつくりプロになる」を選択。 www.udemy.com

余談ですがSwiftを選択したどうでもよい理由

• 去年買ったMacBookが自宅で放置されている
  （エンジニアとしてそれはどうなのか…デスクトップ派なもので…）
• 流行ってるものは触ってみたい
• 友人にiOSエンジニアが多いから気になった

理由はどうあれ、きっかけがあれば良いと思います。（笑）

講座内容を簡単に紹介

有料コンテンツなので詳しくは書きませんが少しだけ…

未経験者にフォーカスしていることもあり、Xcodeをインストールする所から丁寧に解説されていました。
プログラムの基本的な知識や構文の書き方などに関しても解説されています。
※ 用語に関しては未経験者の方は調べながらやった方が理解しやすいかと思います。

アプリ作成に使用する画像なども用意されているので、プログラムの経験者であればすぐに作成することが出来ると思います。
参考までに最初の方に作った物のサンプルを載せておきます。

• パラパラ漫画的なのを再生
  タイマーの使い方や、ボタンを押したときの処理を学ぶ項目にて。

• ログイン画面的なやつ
  テキストボックスの操作やキーボードの使い方を学ぶ項目にて。
  ラクスカラーっぽくしてみました。

学習の進め方

動画と並行して手を動かす

私の選択した講座はハンズオン形式でしたので、基本的には動画を見ながら手を動かして進めていきました。
一度購入した講座は何度でも見れるので、聞き逃した所なども再度見ることができます。

学習した項目を応用

学習した項目に関しては、自分のスキルにするために自分が納得するまで調べたり操作したりしました。
再度同じことをしようとしたときに、自分の思い描いた通りにできるのが理想ですね。

隙間時間を活用

少しだけ空いた暇な時間などには積極的に進めるようにすることで無駄な時間が無くなりました。
動画と並行で進めるとは言っても、先に内容を知っておいた方がやはり効率が良いので、通勤中の電車で動画を見て予習をしました。
Udemyはスマホアプリ版があるのでいつでも動画を見ることが出来るのは良かったです。
※ 動画を見ていた続きから再生されるので、PCとアプリを交互に使う際に手軽でした。

Andorid版 play.google.com iPhone版

Udemy:ビデオで授業が受けられる学習アプリ

• Udemy
• 教育
• 無料
• 

この記事を書いている時に知ったんですが、スマホでオフライン時に再生するためにあらかじめダウンロードができるようです。
これを利用すると、モバイル通信費を節約できるのでいいですね。

https://support.udemy.com/hc/ja/categories/204119668-%E3%83%A2%E3%83%90%E3%82%A4%E3%83%ABsupport.udemy.com

躓いた所

プログラムとかは問題なかったのですが、Xcodeの使い方に慣れていなくて躓いたなってところがありました。 iPhoneアプリ作ったことのある人にとっては当たり前の事だと思いますが、解決するときに参考にした記事を紹介しておきます。

• シミュレータでのUIの配置箇所がおかしい

ideacloud.co.jp

• シミュレータでキーボードが出てこない

qiita.com

yutaihara.com

• UIパーツとプログラムの紐づけでエラー

ios.steppers-hi.net

やってみた感想

まとまった時間は取れないけど勉強したい方や巷で行われている勉強会のスケジュールに合わない方には良いサービスだと思います。
実際、マイペースで進められるのは結構気が楽でした。
ただし、マイペースで進められるので自分で学習するという意思が無いと三日坊主になりそうなので注意です。

利用してみて一つ難点かなと感じたのは、ノートPCのみの場合は動画を見ながら並行で進めることが難しいところかと思います。
回避策として、私はデスクトップで動画再生しながらMacBookを操作していました。

現時点では講座の途中ですが、結構学んだことが多くスキルアップに繋がっていると感じれているので満足しています。
簡単なアプリであれば今でも作れそうだなって感じなので、講座を受け終わったころに何かアプリ作れたらいいなと思っています。
今後も気になる講座、特に人工知能や業務関連でフロントエンド系の技術の講座は積極的に受けていきたいです。

ARKit + Unityのサンプルアプリで手軽にAR体験

こんにちはsts-250rrです。

今回は最近リリースされたiPhoneのOSであるiOS11から追加された「ARKit」を少し触ってみましたので紹介したいと思います。

あまり業務的ではありませんが、昨年はVR元年と言われ3D関連は少しだけホットな話題ですよね。インタラクティブな内容になっていますがお付き合いいただければ幸いです。

ARKitってなに?

ARKitはその名の通りAR(拡張現実：Augmented Reality)なアプリケーションを開発するためのフレームワークです。

何か特別なセンサー類を用意せずともARアプリの開発が可能になったためハードルは下がったのではないかと思います。

ARKitでの開発を始めるために必要なものは以下のものです。

ハードウェア

• Mac macOS Sierra以降
• iPhone 6s以降でiOS11が入っているもの

ソフトウェア

• Unity version5.6.2以降
• Unity ARKit Plugin
• Xcode version9以降

Apple Developer のライセンス

• 今回はAppStoreに公開するわけではないため無料のもので良いです。 無料ライセンスでもアプリを3つまでiOSデバイスに転送できます。サンプルを動かす分には十分です。

Unityでサンプルアプリを動かしてみる

Unityでプロジェクトを作成

まずはUnityでプロジェクトを作成していきます。 プロジェクト作成時点で注意すべき点はありませんがプロジェクト名を「ARSample」とでもしておき、[Create Project]しましょう。 作成が終わるとUntitledという名前のシーンが作成された状態になります。 私も3DモデリングやUnity自体に詳しいわけではないですが、シーンとは3Dオブジェクトを配置していくための「舞台」であると解釈しています。 iOS用のビルド設定を行う

Fileメニューの[Build Settings]を開くと図のような画面が開きます。 [Platform]にiOSを選択して[Switch Platform]ボタンを押してビルド設定をiOSにします。 ※iOSの項目にUnityのアイコンが表示されているはずです。

UnityにARKit Pluginをインポートする

UnityのWindowメニューから[Asset Store]を選択すると画面上にAsset Storeが表示されます。 Asset StoreはプラグインやUnityで使用できる3Dモデルや素材を画像などを購入することができます。無料のものもあるので色々探してみるのも良いと思います。

話を戻しましょう。Asset Storeの検索フォームから「Unity ARKit Plugin」を検索し、インポートします。 ダイアログが出てくる場合がありますが、特に問題はないようなので気にせずインポートします。

ボタンをぽちぽちしているとなんのパッケージをインポートするのかといった画面が出てきますので全てのチェックボックスにチェックが入っていることを確認し[Import]しましょう。

インポートが完了すると[Project]ウィンドウの[Asset]フォルダに[Unity ARKit Plugin]のフォルダが作成されます。
これでUnityでARKitプロジェクトを作成する準備が整いました。

ARKitのサンプルを開く

[Unity ARKit Plugin/Example/UnityARKitScene]にサンプルのシーンがあるのでダブルクリックして開きます。
[Scene]ウィンドウに切り替えると図のようなシーンが表示されています。この画面をARで表示していくわけです。
左側のタブに表示されているものはシーンに追加されているオブジェクトの一覧です。
今回は3Dモデリングに関しての話がメインではないので割愛します。

ARKitサンプルのビルド設定

再びFileメニューの[Build Settings]を開き、上部のUnityARKitSceneのチェックボックスをチェックします。
次に[Player Settings...]ボタンを押すと[inspector]タブにiOSの用のプレイヤー設定画面が表示されます。
[Other Settings]の項目を設定していきます。設定を行う項目は以下の3点です。

• Identification [Bundle Identifier]
  「com.unity.arkitscene」という文字列が入っていますが、ここの固有（一意）のものでないといけません。自身でドメインを持っておられるような方はドメインを入れてしまうのが手っ取り早いです。
  ここが固有のものでなかった場合、後の工程でつまづきます。（筆者談）

• Configuration [Camera Usage Description]
  「AR BABY」の文字列が入っていることを確認します。
  ここの値は今回作成するARアプリがiPhoneのカメラにアクセスする権限を得るために必要なようです。 （よくある「〇〇がアクセスを求めています」のやつ）

• Supported URL schemes [Target minimum OS Version]
  中身の値を「11.0」に変更。

Build Settingsのウィンドウの[Build And Run]を押下して、任意の名前（UnityARKitSceneで良いです）で保存しビルドを始めます。 処理が完了すると、Xcodeが起動し「Unity-iPhone」のプロジェクトが表示されます。

サンプルアプリの実行

MacとiPhoneを接続し、Xcodeの左上の▶️ボタンを押すとiPhone側にアプリが転送され問題なく完了するとiPhone上でアプリが起動します。カメラへのアクセス許可を求められるので、拒否しないであげてください。
カメラ画面が表示されると画面上に黄色い点が表示されたり、水色の枠が表示されます。黄色い点は特徴点、水色の枠は水平面を認識していることを示しています。水色の枠内をタップすると立方体が設置されます。
この立方体は水平面上に配置されているので、回り込んでみたりするとまるでその場所に置いてあるように見えます。
色々なところをぐるぐる見回してみたり、平面に立方体を設置してみてAR体験をしてみてください。

まとめ

簡単なサンプルでしたがいかがでしょうか？
実際にアプリを開発しようと思うと3DモデリングやiOSアプリ開発の知識が必要になるかと思いますが、比較的ハードルが低く感じられたのではないでしょうか？

筆者の感想としては、iPhoneの優秀さが感じられ非常に手軽に楽しく開発ができそうだなと思いました。

みなさんのアイデアをぜひARで実現してみませんか？

---

• エンジニア中途採用サイト
  ラクスでは、エンジニア・デザイナーの中途採用を積極的に行っております！
  ご興味ありましたら是非ご確認をお願いします。
  
  https://career-recruit.rakus.co.jp/career_engineer/

• カジュアル面談お申込みフォーム
  どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。
  以下フォームよりお申込みください。
  forms.gle

• イベント情報
  会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ rakus.connpass.com

Google Homeがブログの記事タイトルを読み上げるアプリを作って公開した話

id:radiocat です。Google Home MiniとAmazon Alexa Dotの二刀流プレイヤーです。

先日、このブログのタイトルを読み上げるGoogle Assistant対応アプリの申請が承認されました。

Google Assistant | RAKUS Developers Blog

お手元のGoogle HomeかスマホのGoogle Assistantを起動し、以下のように呼びかけてみて下さい。

OK Google, RAKUS Developers Blog につないで

スマホの場合は以下のように最新5件の記事のタイトルと投稿日、そしてこのブログへのリンクが表示されます。スピーカーの場合はタイトルと投稿日を読み上げます。

しばらくは新着一覧にも表示されるようです。スマホのGoogle Assisntantを起動して「使い方・ヒント」を表示すると新着一覧が出てきます。

今回はこのアプリを作る手順と公開するための申請手順について簡単にまとめてみました。

アプリの開発

基本的な開発の流れは以前この記事にまとめられていますのでまずはそちらを確認してみてください。

tech-blog.rakus.co.jp

今回作ったアプリの全体の構成イメージは以下の図のようになります。

ブログ情報を取得する機能はNode.js＋Expressで実装しました。

Action on Google

プロジェクトを作成し、ActionsにDialogflowを設定します。それ以外の入力項目はアプリの申請時までに入力を完成すれば良いので、いったんは未入力またはダミー入力で構いません。

Dialog Flow

今回のアプリはブログの情報を応答するだけで会話をしないので、Default Welecom Intentに直接 Use Webhook を設定しました。また、今のところ応答後に会話を継続させる機能もないので End conversation を設定しました。つまりアプリにつなぐとブログ情報の応答を返してすぐアプリは終了します。

Heroku（Node.js）

Heroku上でNode.js＋Expressを使ったGoogle Assistantアプリの基本的な開発手順については以前Qiitaに公開していますので、まずはそちらを参照してみてください。

qiita.com

メインとなるブログ情報を取得して応答する機能の主要な部分について以降で解説していきます。

RSSフィードを使ってブログ情報を取得する

応答を返す前に、まずブログ情報を取得する必要があります。 当ブログが利用しているはてなブログはブログのURLに /rss を付けるとRSSフィードを取得できます。このURLを利用して記事のタイトルと投稿日を取得することにしました。RSSフィードをJSON形式で取得するためにFeedParserというライブラリを使います。

github.com

詳細は上記の公式サイトにまとめられていますが、ざっくり以下のような流れでRSSフィードを取得できます。

  // RSSフィードを取得する
  http.get(BLOG_RSS_URL, function(res) {
    res.pipe(new FeedParser({}))
      .on('readable', function() {
        var stream = this, item;
        // 最新5件だけ取得
        while (item = stream.read()) {
          if (itemCount >= 5) {
            break;
          }
          // item.title のように必要な属性を取得

スマホから呼ばれた場合だけブログのリンクを付けて応答する

スマホから呼ばれたかどうかはWebhookのリクエストのJSONの surface.capabilities をチェックすることで判別できます。詳細はQiitaにまとめています。

qiita.com

また、Google AssistantにはBasic Cardというリンク付きのカードを表示するRich Responsesという仕組みが準備されています。これもQiitaにまとめています。

qiita.com

これらの仕組みを使うことでスマホの画面ではちょっとだけ見栄えを向上させることができます。

HerokuにデプロイしてDialogflowに設定

RSSフィードからブログの情報を取得してJSONでレスポンスを返す仕組みが完成したらHerokuへデプロイし、そのURLをDialogflowのFulfillmentに設定します。

あとはAction on GoogleのSimulatorで問題なく動作することが確認できれば公開するアプリの準備は完了です。

アプリの申請

いよいよアプリを公開するために申請の準備を行います。基本的にはAction on Googleの画面で全ての項目を入力するだけです。必須項目を全て入力すると以下のように SUBMIT DRAFT FOR REVIEWボタンが押せる状態になります。

アプリの起動ワード

Sample invocationsでアプリの起動ワードを設定します。「○○につないで」や「○○と話したい」という言葉を設定します。今回は会話系アプリではないので「○○につないで」というワードのみ設定しました。

アプリの画像

以下の2つの画像を準備する必要があります。

• Large banner image (1920 x 1080)
  • Google AssistantのアプリのページのTopに表示されるバナーです
• Small square logo (192 x 192)
  • アプリのページやアプリ一覧で表示されるアプリのロゴです

プライバシーポリシー

今回のアプリでは特に個人情報を扱うことはないので以下のような簡単なページを準備しました。Herokuを使うのでExpress上に静的ページを準備して配置しました。

アプリの利用範囲

今回は特に制限していませんがSurface capabilitiesでアプリをスピーカーだけ、スマホだけの利用に制限することもできます。

審査

申請するとその翌日には結果が返ってきました。一度目は申請内容に不備があってリジェクトされました。指摘は2点で1点は単にプライバシーポリシーのURLが間違っていたためで、もう1点は以下のような起動ワードが不適切という指摘でした。

Sample Invocationsでは、<アプリ名、または、 Pronunciation + Trigger Phrase>を組み合わせた形で文言を作成し、 必ずその文言がアプリ起動することをご確認いただいてから、ご申請頂く必要があります。

最初に申請した時はアプリ名にはとらわれず、利用シーンや利便性を考えて下記のようなワードも登録していました。

• ラクスブログについないで
• 最新のラクスブログ情報を教えて

これらが "<アプリ名、または、 Pronunciation + Trigger Phrase>を組み合わせた形" ではなかったことが原因です。試していなかったのですが、これらのワードでは呼び出すことができないようです。事前にAction on GoogleのSimulatorから設定した全てのワードで呼び出せるこをとを確認してから申請するのが良さそうです。また、手軽に呼び出しできるようにするには、呼び出しやすいアプリ名／Pronunciationを考える必要がありそうです（もちろん、呼び出しやすくてもアプリの趣旨に沿わない名称では結局リジェクトされると思います）。

上記を修正後、再度申請しその翌日に無事承認されました。すごく幸福感のある返信メールが届きました。ありがとうございます。

なお、メールにも書かれているように複数言語でアプリを公開したい場合は全ての言語で承認を受ける必要があるようです。

おわりに

無事にアプリを公開することができました。なお、今回作ったアプリは弊社のシステムリソース等は使わずパブリックなクラウドサービスを利用して個人で作った実験的なものであり会社の公式的なサービスとして公開されたものではないことはご了承ください。

次回はこの機能をAlexaからも使えるようにしてみたいと思います。