2018年2月23日にヴァル研究所様(以下、ヴァル研様）に会社訪問した際の訪問記です。 アジャイル 、改善の導入に力を入れている会社様で、そのあたりの説明をしていただきました。 入口 ドアをくぐってすぐ右手に電車のゲームがあります。 今思うとこの時点で遊び心満載なヴァル研様だなあと思いますね。 入口右のさらに奥に行くと、これまで会社訪問された方の感想を書いた付箋が壁一面にたくさん貼ってあって圧倒されます。ここで、ヴァル研様の会社訪問担当の方と合流して見学スタートしました。 4階にある電光掲示板では、今回の見学の歓迎をしていただきました！ 以降、各部署様ごとの訪問感想となります。 総務部様 最初は総務部様にお邪魔しました。 アジャイル や スクラム というと システム開発 の手法というイメージがあったのですが、総務のお仕事で スクラム を採用していることに驚きました。 こちらでは1週間1スプリントの スクラム を採用していて 一週間でやることをホワイトボード上で付箋に貼って 見える化 一週間で各自がどれくらいのストーリーポイントを消化できたか＋スプリント中にどれくらい割り込みタスクがあったかを表で整理。 リリー ストレイン で中長期的なスケジュールを 見える化 メンバーの出社時と退社時のコンディションをニコニコカレンダーで 見える化 等を行っていました。 特に興味深いと思ったのが割り込み量タスクの 見える化 で、普通の スクラム の考え方とは違い、スプリント期間中での計画変更をあえて許容し、自分たちの作業に合うようにやり方を工夫しているのが良いなと思いました。 写真上部がバーンダウンチャート、下部に各メンバー毎の割り込みタスク量が数値で表されています。 コンテンツ部門様 駅すぱあと 向けの電車やバスの運行データを作成しているコンテンツ部門様にもお邪魔しました。 こちらは〇〇バスの時刻表データをX月X日までに作成するといったことをされているので、 それが バックログ になったカンバンが使用されていました。 優先度の高い バックログ アイテムをカンバンの上部に持ってきて、どのデータを早めに作成しないといけないかすぐにわかるようにする　といった工夫がされていて興味深かったです。 プロモーション担当部門様  こちらでは ホワイトボード上に手書きのカレンダーがあって、イベントや作業がある日に付箋を貼る イベントや作業が終わったら、完了スタンプを押す（終わってない作業がすぐ見える） ホワイトボード上にメンバーの残業時間を毎週記載して、残業時間の 見える化 。 ペアワークによる作業属人化の解消 等をされていました。独自のアイディアが沢山の部署でした。 カレンダーを使った 見える化 は弊社でもリリースまでのイベントの共有などに使えるかもと思いました。 あとお土産？に 駅すぱあと の酔っ払いモードプロモーションの ティッシュ をいただきました。 よくお酒を飲む方にはいいかもしれないですね。 開発部様、 API Technology部様 まとめてのご紹介になってしまいますが 壁一面の巨大なリリー ストレイン で各チームのリーダー層での情報共有 カンバンのdoingの幅を意図的に狭くして、WIPを制限 メンバーごとに割り込みタスクを受け付ける量をカウントして、割り込みタスクの量を 見える化 や制限する 直近のスプリントの バックログ だけではなく、3スプリント先くらいまでの バックログ を乗せたカンバンを別途用意して、今後の作業もわかるようにする。 といったことをされていました。 あと、有名なべいだー神社も拝見させていただきました。 こういった遊び心もヴァル研様らしいですね（奉納されたお酒はいつ飲むのだろうか・・・）。 最後まで訪問しての感想 最後に全体を通しての感想です。 どの部署も付箋が一杯で 見える化 が全社的に浸透していると感じました。 全部署に同じやり方を無理に適用させるのではなく、それぞれの部署の仕事内容にあったやり方を採用しているのが浸透している秘訣なのかなと思いました。 どの部署も遊び心を取り入れていて、楽しんで仕事が出来そうだなと思いました。 ニコニコカレンダーのように、業務には直接は関係しないものについても 見える化 されているのが印象的でした。これらをもとにコミュニケーションが促され結果的にパフォーマンスの向上に繋がるのだと感じました。 見える化 の完成形とも思えるヴァル研様ですが、新しいカンバンを導入してみたりと現在も改善途中とのことで、日々進化を続ける姿を見習いたいと思いました。 部署間を越えて、コミュニケーションをとるきっかけになるのかなと思いました。半年待ちでやっと会社訪問、うわさには聞いていましたが、「百聞は一見にしかず」でした。

はじめに こんにちは、入社してからもうすぐ１年になるr_yxkxrx13です。 入社したばかりの自分は、まだプログラミング未経験で、初めて Eclipse を使用してコーディングした時はスピードが遅かったです。 そこで、 Eclipse に使用されているショートカットキーを調べながら積極的に使用してみました。その結果、当初よりスピードが上がり、 マウスの操作も減ったことで効率が良くなりました。 Eclipse のショートカットキーを使ってみて分かったことは、 Windows と Mac でのショートカットキーが違っています。 今回は、プログラミングの初心者向けに、 Windows と Mac の Eclipse で個人的によく使用しているショートカットキーを紹介したいと思います。 はじめに コーディング関連ショートカットキー コメントアウト Javadocコメントの追加 指定行の削除 自動フォーマット 名前を一括変更する ヒストリーを戻す／進む デバッグ関連ショートカットキー ステップイン ステップオーバー ステップリターン ブレークポイントの設定・解除 次の警告・エラーへジャンプ 検索関連ショートカットキー 検索ダイアログを開く ワークスペース内の検索 ワークスペース内でテキストを検索 終わりに 参考 コーディング関連ショートカットキー コメントアウト 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

はじめに こんにちは！FM_Harmonyです。 Rakus Developers Blog では二回目の記事投稿になります。 前回は JavaScript について記事の投稿をさせていただきました。 tech-blog.rakus.co.jp 今回は Markdown について紹介します。 私も業務連絡等で使う機会が多いのですが、ある程度使えるようになるまで時間がかかりました。 なので、この記事が今後 Markdown について学習する方の助けになれば幸いです。 目次 はじめに 目次 Markdownとは？ 構造に関する6個の記法 改行 見出し 見出しの例 小見出しの例 列挙 表組み 引用 コードブロック 装飾に関する4個の記法 強調 囲み 打消し線 埋め込みリンク おわりに 参考にしたサイト 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 : 文章を消すと発言が追えなくなるので、消さずに内容だけ編集することが多いためです。

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 はまだ招待制で販売されていますが、今後少しずつ入手しやすくなってくると思われます。利用者が増えればスキルに要求されることも増えて可能性も広がっていくので今のうちにスキルの開発にチャレンジしておくと良いと思います。

どうも、NIR-AMAUQAです。寒い日が続いていますね。 そんな時はできるだけ家に引き籠りたい!! そして、家で何か勉強したいということで… 今回はUdemyというサービスを利用して、 スキルアップ を試みるお話です。 ※ 投稿時点では、まだ受講途中です。 Udemyって何？ なんで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%AB support.udemy.com 躓いた所 プログラムとかは問題なかったのですが、 Xcode の使い方に慣れていなくて躓いたなってところがありました。 iPhoneアプリ 作ったことのある人にとっては当たり前の事だと思いますが、解決するときに参考にした記事を紹介しておきます。 シミュレータでのUIの配置箇所がおかしい ideacloud.co.jp シミュレータでキーボードが出てこない qiita.com yutaihara.com UIパーツとプログラムの紐づけでエラー ios.steppers-hi.net やってみた感想 まとまった時間は取れないけど勉強したい方や巷で行われている勉強会のスケジュールに合わない方には良いサービスだと思います。 実際、マイペースで進められるのは結構気が楽でした。 ただし、マイペースで進められるので自分で学習するという意思が無いと三日坊主になりそうなので注意です。 利用してみて一つ難点かなと感じたのは、ノートPCのみの場合は動画を見ながら並行で進めることが難しいところかと思います。 回避策として、私はデスクトップで動画再生しながら MacBook を操作していました。 現時点では講座の途中ですが、結構学んだことが多く スキルアップ に繋がっていると感じれているので満足しています。 簡単なアプリであれば今でも作れそうだなって感じなので、講座を受け終わったころに何かアプリ作れたらいいなと思っています。 今後も気になる講座、特に 人工知能 や業務関連でフロントエンド系の技術の講座は積極的に受けていきたいです。

こんにちは sts -250rrです。 今回は最近リリースされた iPhone のOSであるiOS11から追加された「ARKit」を少し触ってみましたので紹介したいと思います。 あまり業務的ではありませんが、昨年は VR元年 と言われ3D関連は少しだけホットな話題ですよね。 インタラクティブ な内容になっていますがお付き合いいただければ幸いです。 ARKitってなに? ハードウェア ソフトウェア Apple Developer のライセンス Unityでサンプルアプリを動かしてみる Unityでプロジェクトを作成 UnityにARKit Pluginをインポートする ARKitのサンプルを開く ARKitサンプルのビルド設定 サンプルアプリの実行 まとめ 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

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を起動して「使い方・ヒント」を表示すると新着一覧が出てきます。 今回はこのアプリを作る手順と公開するための申請手順について簡単にまとめてみました。 アプリの開発 Action on Google Dialog Flow Heroku（Node.js） RSSフィードを使ってブログ情報を取得する スマホから呼ばれた場合だけブログのリンクを付けて応答する HerokuにデプロイしてDialogflowに設定 アプリの申請 アプリの起動ワード アプリの画像 プライバシーポリシー アプリの利用範囲 審査 おわりに アプリの開発 基本的な開発の流れは以前この記事にまとめられていますのでまずはそちらを確認してみてください。 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からも使えるようにしてみたいと思います。

はじめに こんにちは！新卒1年目のrs_tukkiです。 エンジニアとして入社してからもうすぐ1年。最初は右も左も分からなかった私ですが、先輩や上司の方々に しごかれ 指導していただきながら、なんとか機能開発に携われるようになってきました。 さて、今回は技術そのものとは少し違うお話です。 現在2月。 あと2か月もすれば新しく新卒として入社される、言わば 「新卒0年目」 の皆さんは、期待と同時に、どのように仕事を進めていけばいいのか、どうすれば説明会で会った先輩たちのようになれるか...という不安もお持ちだと思います。 残念ながらそういったコツは実際の業務の中で身に着けていくしかありませんが、そのヒントなら、 古今東西 のあらゆる書籍に転がっています。 そこで今回は、新卒1年目の私が、新卒0年目のエンジニアにオススメしたい、5冊+1冊の必読書...いえ、 「虎の巻」 をご紹介します！ はじめに まずは「仕事のやり方」から <文章嫌いではすまされない! > エンジニアのための伝わる書き方講座 問題解決力を鍛えるトレーニングブック 脳のパフォーマンスを最大まで引き出す 神・時間術 評価されるエンジニアとは？ リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック プログラマが知るべき97のこと 【おまけ】エンジニアじゃなくても読んでほしい「新卒虎の巻」 入社1年目の教科書 おわりに まずは「仕事のやり方」から エンジニア、というと皆さんの中には、ただずっとパソコンに向かってコードを書いていればいい、と思っている方もいるかと思います。 ですが、実際の仕事は何も自分一人だけで進めていくものではありません。 例えば自分たちの作ったものを資料にまとめて営業の人たちに説明したり、発生した問題に対して皆で対応策や回避策を考えたり...と、パソコンを使わない作業も意外と多いのです。 とはいえそんなときに、「自分はプログラミングしかできないから」と投げ出すわけにはいきません。むしろ、直接業務に関係するためにその時になってからでも学ぶことができるプログラミングよりも、 文書の書き方 や 問題に直面したときの考え方 、 そして、 そういった作業をこなしつつ本来の業務を遅らせないための取り組み方 こそが「今、このタイミングで知っておくべきこと」なのだと思います。 ここでは、そういったことを知れる本を3冊ご紹介します。 <文章嫌いではすまされない! > エンジニアのための伝わる書き方講座 <文章嫌いではすまされない! > エンジニアのための伝わる書き方講座 作者: 開米 瑞浩 発売日: 2014/06/28 メディア: 単行本（ソフトカバー） 大学時代に真面目なメールを沢山書き、重要なプレゼンを常にやっていた、という人はあまりいないのではないでしょうか。 ですが就職した後は、たとえエンジニアであっても説明のためにメールを送ったり資料を書いたりと、とにかくプログラム以外にも「書く」作業がかなり増えます。 そこで一番重要なのは、「必要な情報だけを、正確に、分かりやすく相手に伝えること」です。 この本では「誰に」「何のために」文章を書くのか、ということから始めて、図や表の作り方など、情報を的確にまとめて伝えるための方法が書かれています。よく、「コミュニケーションは仕事で一番大事なスキルだ」という人がいますが、その意見の是非はともかく、「誤解なく伝えられること」は必ず役に立つはずなのです。 問題解決力を鍛えるト レーニン グブック 問題解決力を鍛えるトレーニングブック (かんきビジネス道場) 作者: 奈良井 安 メディア: 単行本 発売は2002年と結構古い本です。が、今でも十分参考になる内容だと個人的には考えています。 安易に問題と言っても様々ですが、この本ではまず「問題」の定義とは何か？ということから考え始め、いきなり解決に取り組むのではなく、いったい何が原因なのか、どうすれば解決したと言えるのか、といったことを体系立てて「基本手順」としてまとめています。 実際に起こった問題に対する解決の事例も追えるので、エンジニアとしての問題にも十分応用が利く本です。 脳のパフォーマンスを最大まで引き出す 神・時間術 脳のパフォーマンスを最大まで引き出す 神・時間術 作者: 樺沢 紫苑 発売日: 2017/04/13 メディア: 単行本（ソフトカバー） こちらは逆に昨年4月に発売されたばかりで、私も今まさに読んでいる途中の本です。 一般的に仕事は1日8時間。特にエンジニアだと残業が多く、9時間も10時間も働くことがあるかもしれません。毎日そんなに長い間集中して取り組めというのも無理な話ですし、実際私も集中力が途切れ途切れになって注意されてしまうことがありました。 この本では、いわゆる「生産性」を叩き出す方法として、上手く集中力を維持しながら、効率よく時間を使う方法について解説しています。 「雑念が出たら紙に書け」というのはちょっと意外でした。 評価されるエンジニアとは？ ...何やら偉そうなことを 言っているように思うかもしれません。 私もそう思います プログラミングの世界には「まずは動くようになることが大事」という格言があるらしいですが、当然ただ動くようになっただけでは、ただごちゃごちゃしたものが出来上がっているだけです。 自分のコードが先輩や上司に評価されるためには、まずそのコードが読みやすいものでなければいけません。それは技術力とはまた別のところにありますが、例えるなら部屋の整理整頓をきちんとできるか、といったところでしょうか。 このように、これからエンジニアとして働く皆さんが、「デキる」エンジニアになるためには、ただ技術があるだけでなく、それをどう実際の業務で生かすか、というところまで求められているのだと思います。 コードの綺麗な書き方 や 開発への心構え など...基本的なプログラミングを覚えた人たちが、そういったノウハウを知ることが出来る本 *1 を2冊ご紹介します。 リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice) 作者: Dustin Boswell , Trevor Foucher 発売日: 2012/06/23 メディア: 単行本（ソフトカバー） エンジニアとして就職すると、当然ながら仕事としてのプログラミング技術が必要で、コードを書くことも多いと思います。 大学では、自分がコードを書いても、それを読むのはせいぜい自分と教授くらいだったかもしれません。しかし、仕事では一つのコードを多くの仕事仲間で編集するので、当然分かりやすさは大事になってきます。 分かりやすい変数名の書き方、分かりやすいコメントの書き方、分かりやすいロジックの組み立て方など...ベテランの プログラマ でも意外とできていない「分かりやすさ」のための技術がまとまっている本です。 プログラマ が知るべき97のこと プログラマが知るべき97のこと 発売日: 2010/12/18 メディア: 単行本（ソフトカバー） 既に沢山のブログで「初心者向けの必読書」として紹介されているので、もう読んだことのある人もいるのではないでしょうか。 実に73人もの プログラマ による97本のエッセイ(日本語版には更に日本人8人による10本)がまとめられています。「 浮動小数点数 は実数ではない」のような数学に近い話から、「関数の『サイズ』を小さくする」などの実際のプログラミングにも役立つ内容、更には「ハードワークは報われない」などといった働き方に関する話まで。 全てを実践する、というのは無理がある(というか矛盾する話もいくつかある)のですが、「デキる」人たちはこういうことを意識しているんだな、ということを覚えるだけでもいいと思います。 【おまけ】エンジニアじゃなくても読んでほしい「新卒虎の巻」 最後に、オススメの本をもう一冊だけご紹介します。 ですがこちらは、営業職向けの内容も多く含まれているため「エンジニアの虎の巻」とは言えません。 それでも今、このタイミングでなるべく多くの「新卒0年目」に読んでいただきたい、 「新卒の虎の巻」 です！ 入社1年目の教科書 入社1年目の教科書 作者: 岩瀬 大輔 発売日: 2011/05/20 メディア: 単行本（ソフトカバー） オススメ、という割に、この本に書いてあること自体は「仕事は絶対やりきろう」とか「早く出すことを意識しよう」とか「仕事に対する見方を変えよう」とか、割と当たり前に思われることです。 ですが、そんな当たり前が全部で50個。入社したばかりのやる気に満ちている時であればともかく、しばらくすると数多くの「当たり前」に取り組むことを忘れてしまうかもしれません。 そんな時に、この本に乗っていたことを思い出して自分のやり方を見つめ直す。そうしてまた入社したときのやる気を復活させる。そんな読み方ができる本だと個人的に考えています。だからこそ、入社する前の今に読んでおいてほしいのです。 まあ、50個の中には「宴会芸を死ぬ気でやれ」とか「同期とは付き合うな」とか個人的にどうだろうと思うものもあるのですが... おわりに 私が入社してから今までに読んだ本の中で、「これは絶対に役に立つ！」と感じた5+1冊をご紹介しました。 もちろん、読んでないといけない、というわけではありません。これらの本を全部読んで、書いてある内容を全部実践しようなんて無理だと思います。 ですが、 「読んだこと」自体は絶対に無駄になることはない と思うのです。 面白そうだと思った本を一冊流し読みしてみて、これなら自分にもできそうだと思った一つを、機会があったらチャレンジしてみようと思うだけでもいいと思います。ていうか私もそんな感じです。 私の紹介した本が、新卒0年目の皆さんの心の片隅にでも残ってくれれば幸いです。 *1 : 逆に、プログラミング未経験の方には難しい内容だと思います...

こんにちは。エンジニアのmickey-STRANGEです。 今回はめんどくさがりによるめんどくさがりのための スマホ アプリ開発 についてお話したいと思います。 とはいえ、このブログの内容では スマホ アプリは作りません。 タイトル詐欺ぎりぎりですが、嘘はついていませんので、そういう認識でお楽しみいただけますと幸いです。 構成 GitHub Pages Web Storage IndexedDB 1.DBに接続する 2.オブジェクトストアにアクセスする 3.IndexedDBの注意点 まとめ 構成 先に書きました通り筆者は非常にめんどくさがりです。開発環境・実行環境の整備といったところに手間をかけたくありません。 今回使うのは GitHub のみです。 GitHub のみで疑似Webアプリを実現します。 では GitHub のみで疑似Webアプリをどう作るか考えていきましょう。 Webアプリというと大雑把に考えて3つ、大事な要素があります。 サーバそのもの（ apache 、 tomcat など） プログラム実行環境（ php 、 Java など） 記憶領域（postgres、 Oracle など） これらに対応させて考えていきます。 まずサーバには GitHub Pages を使用します。 GitHub Pagesは GitHub のサービスであり、静的ページを ホスティング してくれるもので、簡単なWebサイトを公開することが出来ます。 そして公開した静的Webサイト（HTML）に javascript を書いておきます。つまり実行環境は ブラウザ です。 最後に記憶領域ですが、アクセスした各端末に必要な情報を記憶させます。 javascript による永続の記憶領域として、 Web Storage や IndexedDB というものがあります。 これらを使用して スマホ でも実行可能なプログラムを作成することが可能です。では各要素について見ていきましょう。 GitHub Pages まずサーバの役割を担う GitHub Pagesです。 上記の通り静的ページの ホスティング サービスですが、すごく簡単に言うと「 GitHub にHTMLファイルをpushすればWebサイトとして公開してくれる」という認識でいいと思います。 ここから GitHub Pagesの使いかたをご説明いたします。といっても大層なものではなく、2ステップで完了です。 1.まずHTMLファイルをpushします ここは詳しい説明は省きます。方法は問いませんので自分の リポジトリ にHTMLファイルをpushしてください。 めんどくさがりの意見としてましては GitHub Desktopを今回初めて使いましたが、何も考えなくていい感じがとてもよかったです。 GitHub Desktop | Simple collaboration from your desktop 例としてHello,World!的なHTMLを作成しました。 2.pushした リポジトリ を公開する設定をします リポジトリ 画面の上部にある「Settings」リンクをクリックし… GitHub Pagesカテゴリ内のSource設定を「master branch」に変更して隣の「Save」をクリック。 以上です！ これで GitHub Pagesの設定が完了しました。pushしたファイルにアクセスしてみましょう。 表示されているリンクをクリックすると… https://mickeystrange.github.io/tools/ Hello,GitHubPages!が表示されればOKです。 発行されるURLは https://[ユーザ名].github.io/[リポジトリ名]/ファイル名 なので、 https://mickeystrange.github.io/tools/index.html にアクセスしても同じものが表示されます。 （おそらくファイル名を省略した場合にindex.htmlを自動的に表示してくれているのではないかと。） HTMLを公開する設定が出来ましたので、あとは javascript を作っていくだけです。 これで GitHub Pagesの説明は終わりです。実行環境のブラウザは言わずもがなということで記憶領域の1つ目、 Web Storage の説明に移ります。 Web Storage Web Storage はブラウザの記憶領域にKey- Value Storeで値を保持できる仕組みです。 Web Storage API - Web API | MDN 使いかたはとても簡単で、準備も不要です。 これでもう値の格納と取り出しが出来ています。それぞれ1行だけです。 もう見たままですが一応ご説明いたしますと、 3行目の localStorage.setItem( 'key' , value); の部分で 'key' というキーで変数 value の値を格納しています。 また、 5行目の var item = localStorage.getItem( 'key' ); の部分で 'key' というキーで格納されている値を変数 item に取り出しています。 localStorage というのは Web Storage の種類の1つで、記憶領域が保持される期間が永続のものです。 もう1つの種類として sessionStorage というものがありますが、こちらはブラウザを閉じるまでの間のみ有効なものになります。 この Web Storage を使用して、ページへのアクセス数をカウントする簡単なプログラムを作成いたしました。 LocalStorage 静的リソースだけでアプリケーションを作るための記憶領域テスト ページの再表示やブラウザの再起動などをして遊んでいただきますと、記憶領域をたしかに持っていることが確認出来ると思います。 開発者ツールなどで見ることが出来ますが、特別隠すようなものでもありませんのでコードは以下の通りです。 tools/storage_test.html at master · mickeySTRANGE/tools · GitHub 簡単な値の保持だけであれば Web Storage が十分な機能を持っていることをご説明いたしましたが、続いてもっと強力な記憶領域といたしましてIndexedDBの説明に移ります。 IndexedDB IndexedDBはブラウザの記憶領域にオブジェクトを保持する仕組みです。 Web Storage と比べて最大容量が多い、KVSではなく JSON を保存できる、検索に強い、などの特徴がある、 NoSQLデータベース です。 これからIndexedDBの使用方法についての説明をいたしますが、 Web Storage の後で見るととても複雑です。 インストールや外部ライブラリは不要（ブラウザの機能なので当たり前）ですが、手順が多いです。 1.DBに接続する IndexedDBは基本的にリク エス トと、そのリク エス トの結果によって実行される部分を書いていきます。 今回の例ですと、3行目の var openRequest = indexedDB.open( "sampleDatabase" , version); がDB接続のリク エス トで、4-10行目の // 接続に成功すれば各処理を実行 openRequest.onsuccess = function ( event ) { db = event .target.result; db.onerror = function ( event ) { alert ( "Database error: " + event .target.errorCode); } ; } ; が接続成功時に実行する処理、といった具合です。サンプルは関数の外の変数にDBの インスタンス を保存しています。 11-15行目の // DB定義を更新 openRequest.onupgradeneeded = function ( event ) { db = event .target.result; db.createObjectStore( 'sampleObject' , { keyPath: 'key' } ); } ; は、保存するオブジェクトの定義を行っています。 アクセスする時のオブジェクトストアの名前を第一引数に、オブジェクトの定義を第二引数に持っています。 サンプルは 'sampleObject' という名前のオブジェクトストアで 'key' をキーに定義しています。 この onupgradeneeded というものは、DBのバージョンが上がった時に実行されるものです。 3行目の open() の第二引数に version がありますが、これはIndexedDBのバージョンではなく、自分が作るDBのバージョンです。 バージョン1としてこのサンプルの通りオブジェクトストアを定義し、変更が必要になった時にバージョン2として接続し、 onupgradeneeded の中で新しくオブジェクトストアを追加したり、オブジェクトストア定義変更を行ったりすることが出来ます。 2.オブジェクトストアにアクセスする DBに接続出来れば次はデータへのアクセスです。データの格納と取得を見てみましょう。 setValueではDB接続のサンプルで作ったsampleObjectに1つのオブジェクトを追加しています。 keyは 'sample' 、 value に 'hoge' という値を持っています。keyは必須かつ重複不可の制約がありますが、他の要素は何を持っていても構いません、 getValueではsampleObjectから 'sample' というkeyPath（サンプルでは 'key' ）を持つ値を検索しています。 IndexedDBの記憶領域は全て永続なので、この構文のみでもアプリを作成することが可能です。 これらの構文を使用し、またページへのアクセス数をカウントする簡単なプログラムを作成いたしました。 Indexed Database 静的リソースだけでアプリケーションを作るための記憶領域テスト tools/indexed_database_test.html at master · mickeySTRANGE/tools · GitHub ページのリロード等をしていただきますとカウントが正常に出来ていることが分かります。 3.IndexedDBの注意点 簡単なサンプルをお見せいたしましたが、 indexed_database_test.html のコードを見ていただきますと、 Web Storage の時とは大きく構成が違うことが分かっていただけるかと思います。 そうです、「取得する関数」と「格納する関数」で分けて処理をきれいに書くことが出来なかったのです。 理由がありまして、リク エス トを書き、その成功時失敗時に実行する処理を書くと説明いたしました。 実はこれが曲者で、リク エス トが完了したかどうかをイベント外から見ることが出来ないのです。 「取得する→1増やす→格納する」という流れを切り分けることが出来ず、 取得するリク エス トのonsuccessイベントで「1増やして格納する」という処理の流れになります。 更に言うと取得するリク エス トさえ接続するリク エス トのonsuccessイベント内で実行しています。 IndexedDBは Web Storage よりも強力なデータベースが使用できる代わりに、処理の流れを作るところで非常にややこしくなってしまう、というデメリットがあると言えます。 まとめ 自分の書いたコードを簡単に スマホ で動かす方法をご紹介いたしました。いかがでしたでしょうか。 一番手軽なのはやはり Web Storage を使用する方法です。 多分これが一番早いと思います。 これに JQuery やBootstrapなどの部品を組み合わせることで十分な スマホ アプリのようなものが作れると思います。 今回の記事とは別に業務を効率化するJSなども趣味で作っていたりしたため、ここ最近でJS面で成長したことを感じています。 自分で使えるツールをもっとpushしてJSライフを楽しんでいきたいです。

はじめに 開発エンジニアのamdaba_sk（ ペンネ ーム未定）です。前回は「 ソフトウェアテストについて簡単にまとめてみた 」という記事を書きましたが、その流れで今回はセキュリティテストツール「OWASP ZAP」について少し調べてみました。 ※以下は個人的にネットで調べてみた情報をまとめたものであり、実際に開発過程で運用するなどしたものではありません。また日本語サイトを中心に調べているため、機能等の情報は古い可能性があります。 セキュリティテスト 昨今は個人情報の漏えいや顧客情報流出などのニュースをよく耳にします。怖いですね…。 ラク スでも個人情報の漏えいや顧客情報流出などは深刻な問題としてとらえていまして 1 、その発生を未然に防ぐために開発者には年1度セキュリティ学習と修了テストが課されていたりしています。 またリリース前にはとあるWebアプリケーション検査ツールを使った 脆弱性 検査を実施し、検出された 脆弱性 を修正するようにしています。 しかしながら今のツールによる検査は、はたから見ているだけの感想ですが 設定がややこしそう リリース前に修正箇所全体に対して行うため、たくさんあったときに修正が大変 ツールの稼働サーバーがチーム間で共有なため、柔軟には使用できない といった不便さを抱えているように感じます。 OWASP ZAP そこで上記の不便さに対し、 もっと簡単な設定で自動チェックをしてくれるツールはないか もっとこまめに、例えば 単体テスト の一環としてチェックできないか もっと柔軟に、チームごとに専用の環境を用意できないか といった要望を満たすツールとして私が目を付けたのが「OWASP ZAP」でした。 OWASPとは OWASP ZAPではじめる2016年のウェブアプリケーションセキュリティ では ウェブアプリケーション を作成する開発者や， ウェブアプリケーション に関わる意思決定を行う方々に対し，セキュリティに関する十分な情報を行き渡らせることを目的とし活動をしているのがOWASPです。OWASPは「The Open Web Application Security Project」の略称で，グローバルにチャプター（ 支部 ）を展開するオープンコミュニティです。 と説明されています。Webアプリケーションセキュリティの啓蒙団体といったところでしょうか。 OWASP ZAPの概要 OWASPにはWebアプリケーションセキュリティの啓蒙に関して大小さまざまなプロジェクトを展開しています。 OWASP Zed Attack Proxy （OWASP ZAP⁠）はその中でも最重要として位置づけられたプロジェクトの一つであり、その成果物としてのツールです。 IPA テクニカルウォッチ「 ウェブサイトにおける脆弱性検査手法の紹介 」でも取り上げられて、使いやすく、検知制度が高く、効率性が非常に高い初級者向けのツールという評価を受けています。またありがたいことに無料で使える オープンソース の ウェブアプリケーション 脆弱性 診断ツールで、 Github上 に ソースコード が公開されています。 用途としては「開発者が開発時に簡易的な ウェブアプリケーション 脆弱性 診断を実施する」ことを特に意識して作られており、セキュリティの専任ではない開発者でも簡単に利用できるようになっています。 なお、OWASP ZAPが検査可能な主な 脆弱性 は以下のとおりです。 クロスサイトスクリプティング SQLインジェクション パストラバーサル オープンリダイレクタ ヘッダインジェクション オートコンプリート機能の有効 アプリケーションエラーの開示 X-Content-Type-Optionsヘッダの未設定 X-Frame-Optionsヘッダの未設定 HttpOnly属性が付与されていない Cookie の利用　等 OWASP ZAPの機能 表1 はOWASP ZAPの主要な機能をまとめたものです。 表1 　OWASP ZAPの主要機能（ OWASP ZAPではじめる2016年のウェブアプリケーションセキュリティ より引用） 項番 機能名 概要 1 スパイダー機能 指定のURLを起点とし，オートクローリング（自動で 脆弱性 診断対象のリンクを辿り，存在するURLを洗い出す。）を行います。 2 動的スキャン機能 クローリングして明らかになった任意のURLに対し，ツールが準備している 脆弱性 診断用の検査文字列を用いて自動で 脆弱性 診断を行います。 3 ローカルプロキシ機能 ローカルプロキシとしてOWASP ZAPを動作させ，手動で 脆弱性 診断を行います。やや玄人向けです。 4 ディレクト リ探査機能 指定のURL配下に不要な ディレクト リが存在しないかを確認します。 5 アラート機能 脆弱性 診断結果に関する簡易の報告書を作成します。 6 ZAP Script機能 OWASP ZAPの機能を拡張し，OWASP ZAPをより自分好みにカスタマイズできます。 Javascript ， Python ， Ruby などのさまざまな言語に対応しています。情報源としては， OWASP ZAP Scripts というGroupがあります。 OWASP ZAPは Java で作られており、 クロスプラットフォーム で動作します。また windows 環境では特にありがたいのですが、利用しやすいようにグラフィカルインターフェースを備えています。 詳しい手順はその他の記事や公式のドキュメントを参照していただきたいと思いますが、項番1（スパイダー）の実行後に項番2（動的スキャン）を実行する自動 脆弱性 診断を行うだけなら 検査対象URLの入力 実行ボタンクリック という非常に簡潔な手順で実施できます。 一方でRESTfulな API による操作もできるようで、 curl などで コマンドライン からリク エス トを投げれば上の手順を スクリプト 化できます。さらにデーモンモードで起動しておけば、JenkinsなどのCIツールと連携して最初から最後まで自動で実施することもできます（e.g. JenkinsとOWASP ZAPで自動診断 - Qiita ）。 またJenkinsと連携した上の例ではOWASP ZAPの API を スクリプト で直接呼び出していますが、 公式の ZAP Jenkins plugin というものもあるようで、そちらを利用するという手もあるでしょう。 その他、手動の 単体テスト 実施時にローカルプロキシ機能を使用してチェックするとか、いろいろ設定をいじって使ってみるとか、使い方の幅も広そうです。 おわりに 以上簡単ながら「OWASP ZAP」について調べたことをまとめました。 設定も簡単、精度もよく、自動化も可能と、とっても便利そうです。ただあくまで簡易チェックツールということで、 開発中は「OWASP ZAP」で簡易検査 リリース前は精密チェックができる別のツールで本検査 という風な使い分けをしたらいいんじゃないかと今の段階では思っています。 参考 OWASP Zed Attack Proxy Project IPAテクニカルウォッチ「ウェブサイトにおける脆弱性検査手法の紹介」 OWASP ZAPではじめる2016年のウェブアプリケーションセキュリティ JenkinsとOWASP ZAPで自動診断 - Qiita zap plugin - Jenkins - Jenkin Wiki エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 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 本ブログで「 意図しない処理が実行されるCSRFとは？概要と対策 」や「 要注意！新人エンジニアが発生させた2大脆弱性 」といった記事があるように、個人レベルでも関心の高い話題です。 ↩

こんにちは！エンジニアのY-Kanohです。 弊社のエンジニアは、業務終了前にその日の稼働報告を社内システムに入力することになっています。 しかしながら、この入力を忘れるメンバー（主に私）が多く、チームのリーダーに指摘されてから、数日前の仕事状況を思い出して記入することが度々ありました...。（すみません。） そこで、チームで導入されているチャットツール、「MatterMost」に 稼働報告を忘れている人へ通知をする ようにしてみました。 Mattermost | Open Source Collaboration for Developers しかし、ただ作るだけではすぐ終わってしまったので、かねてから興味があったDockerを使ってマイクロサービスとして作り直しています。 今日はそのお話です。 概要 設計 概念図 BFF API Gateway バックエンド docker-compose.yml 実際に作成したBot 今後の拡張 概要 大雑把に言えば、作成した Bot システムは下図のようなイメージです。 プログラムは毎朝始業直前に動かすようセットします。 稼働状況は社内のDBに登録されているので、まず社内DBを参照し、昨日の入力を忘れているメンバーを見つけ、チャットに通知します。 MatterMostには外部連携機能があり、外部システムからの投稿が可能です。 *1 設計 概念図 最初は、「動けばいい」の信念のもと、上記図の Bot システムをそのまま1コンテナにしただけの設計でした。 マイクロサービスを目指すにあたり、そのコンテナ内容を機能ごとに分割し、以下のような設計で実装しています。 *2 作成したコンテナは以下の7つです。 管理用BFFコンテナ Bot 用BFFコンテナ API Gateway コンテナ API Gateway 情報DBコンテナ 社内DBアクセス用コンテナ チーム情報DBアクセス用コンテナ チーム情報DBコンテナ ※社内DBには稼働情報、チームDBにはチームメンバー情報やチームが使用しているチャット情報が格納されています。 これらのコンテナ群は、大きく BFF と API Gateway 、 バックエンド の三種類に分けることができます。 BFF BFFとは、Backends for Frontendsの略で、つまりフロントエンドのためのバックエンドです。 *3 *4 BFFは、クライアントの種類ごとに、クライアントとバックエンドの間で、データ加工や画面作成などの処理を行います。 BFFを使用することで、バックエンドから受け取ったデータを、各BFFが対象とするデ バイス やユーザ向けに適した形に加工して表示させることができます。 API Gateway 機能を各コンテナに分けるうえで、一つ問題がありました。 コンテナ同士はやり取りする相手のコンテナ接続情報を知っておく必要があります。そのため、やり取りするコンテナを増やすたびに、接続先情報をそれぞれ定義する必要があるため、 コンテナ依存関係の定義が複雑になってしまいます。 そこで、今回はバックエンドのコンテナは、互いに通信せず、必ず API Gateway を介してやり取りするようにしました。 これにより、以下のメリットが見込まれます。 API を一元管理 コンテナ間の依存関係を簡略化 共通処理を行う場合ここで実行可能 BFFからのサービス呼び出しを簡略化 バックエンドの API は、必ず API Gateway を介して呼び出されます。 Gateway に来たリク エス トは、 Gateway で適切なコンテナへルーティングされるため、Dockerコンテナで面倒なコンテナ同士の依存関係を定義する必要はなくなります。 また、今回は特に実装していませんが、バックエンドへの認証機能や、ログの収集なども、ここで一括して行うことができます。 今回、 API Gateway には、 OSS として開発が進められているKongを使用します。 Kong Open-Source API Management Gateway for Microservices バックエンド BFF、 API Gateway の導入により、バックエンドはその他の機能とかなり 疎結合 になります。 フロント側に適した データ形式 に加工する必要が少ないため、設計の制約が減ります。 そこで、バックエンドの API は、RESTの原則に基づいた実装にしました。 docker-compose.yml docker-compose.ymlは以下の通りです。 前述した API Gateway により、各コンテナはkongコンテナをlinkさせるだけでバックエンドの API が使用できます。 version: '2' #============================================================================== # Volumeの定義 #============================================================================== volumes: team_vol: driver: 'local' kong_vol: driver: 'local' #============================================================================== # servicesの定義 #============================================================================== services: ############################################################################# ## API Gateway ############################################################################# # API GatewayのDB kong-database: image: postgres:9.4 environment: - POSTGRES_USER=kong - POSTGRES_DB=kong volumes: - kong_vol:/var/lib/postgresql/data # API Gatewayの初期設定を行うコンテナ kong-migration: image: kong depends_on: - kong-database environment: - KONG_DATABASE=postgres - KONG_PG_HOST=kong-database command: kong migrations up # API Gatewayコンテナ kong: image: kong:latest depends_on: - kong-database - kong-migration environment: - KONG_DATABASE=postgres - KONG_PG_HOST=kong-database - KONG_PG_DATABASE=kong ports: - "8000:8000" - "8443:8443" - "8001:8001" - "8444:8444" ############################################################################# ## 社内DBアクセス機能 ############################################################################# qcp_watcher: links: - kong build: context: "./BEService/QcpWatcher" dockerfile: "Dockerfile" ports: - 49513:80 extra_hosts: - qcp:192.168.99.100 #社内DBのホストを指定 ############################################################################# ## Team情報管理機能 ############################################################################# # Team情報管理DB team_db: build: "./BEService/Team/DB" ports: - 54321:5432 environment: POSTGRES_USER: postgres POSTGRES_DB: postgres volumes: - team_vol:/var/lib/postgresql/data # TeamDBアクセスコンテナ team: links: - kong - team_db build: "./BEService/Team" ports: - 49514:80 ############################################################################# ## Bot用コンテナ（MatterMost連携コンテナ） ############################################################################# mm_bff: links: - kong build: "./FEService/MmBff" ports: - 49515:80 ############################################################################# ## 管理者用コンテナ ############################################################################# admin_bff: links: - kong build: "./FEService/AdminBff" ports: - 49516:80 実際に作成した Bot 毎朝こんな感じに通知してくれるようになりました。 より通知を目立たせるために、 戦闘力が53万の方にご協力いただいています 。 この方には bot をマイクロサービスにする前から協力いただいています。最初はア イコン画 像だけでしたが、メンバーからの要望により、口調もあの方になりました。 最初は 黄色いネズミ のアイコンだったのですが、こちらのほうが断然反応していただけました。 全員稼働報告が入力できていた場合は、ちゃんと褒めて(?)いただけます。ありがたや。 今後の拡張 Bot を機能ごとに分割することで、追加機能の実装もやりやすくなりました。 また、コンテナによって機能ごとにプログラムが隔離されているため、興味がある技術を試しに使ってみることもできます。 そのため、今後は業務に役立ちそうなものを 趣味 自己学習として、拡張できればと思います。 *1 : https://docs.mattermost.com/developer/webhooks-incoming.html *2 : https://www.wantedly.com/companies/wantedly/post_articles/32977 *3 : https://qiita.com/kawasima/items/356d54e253c54d730fb0 *4 : https://www.oreilly.co.jp/books/9784873117607/

こんにちは。楽楽精算開発チームの岡本です。 会社で購入したGoogleHomeで自由に遊べる権利を頂いたので、色々と遊ばせてもらいました。 先日その内容を社内でプレゼンする機会があったのですが、せっかくなのでGoogleHome自身にプレゼンしてもらいました。 今回は、その際に実施した設定を説明しようと思います。 ※設定方法については west-cさん が既に書かれているので、設定した内容だけ書いていきます。 今回やりたいこと スマートフォン でプレゼン開始を指示する。 ディスプレイにスライドが表示される。 GoogleHomeがスライドの内容を喋り始める。 スライドの内容を喋り終えると、次のスライドに切り替わる。 スライドが終了するまで２～４を繰り返す。 準備するもの Wan側 Action on Google Googleアシスタント 内で呼出し可能な チャットアプリ *1 を構築できるサービスです。 構築した チャットアプリ から更に別の Webサービス を呼び出すこともできるので、この仕組を用いれば Googleアシスタント から直接 Webサービス を呼び出せます。 今回は Dialogflow を呼び出すように構築しています。 Dialogflow 自然言語 の解析エンジンです。受取った音声データを解析してテキストに変換してくれます。 また、 Firebase の ホスティング を用いた スクリプト 実行も可能なので、変換したテキストを他の Webサービス に連携させたりもできます。 Firebase いわゆるBaasです。 今回は ホスティング 機能とDB機能を使用します。 Lan側 RaspberryPi 超小型のコンピューターです。 今回は以下の機能を実装しています。 ディスプレイへのスライド切替え通知 GoogleHomeへのメッセージ通知 GoogleHome いわゆる スマートスピーカー 。今回は喋らせるだけなのでスマートな機能は使いません。 ざっくりとした処理の流れ スマートフォン の Googleアシスタント から Action on Google で構築した チャットアプリ を呼び出す。 チャットアプリ で入力した音声データを Dialogflow に連携する。 Dialogflow の解析結果テキストを Firebase のDBに保存する。 保存したテキストをRaspberryPiに通知する。 （通知されたテキストがプレゼン開始キーワードの場合は、プレゼンを開始する。） スライドの表示/切り替えをディスプレイに通知する。 喋らせるメッセージをGoogleHomeに通知する。 Action on Google の設定 Action on Google で新規プロジェクトを作成し Action と App information を設定します。 Action ADD ACTIONS から Dialogflow を選択します。 App information 重要なのは Assistant app name の項目だけです。 Assistant app name で設定した名前で Googleアシスタント で チャットアプリ を呼び出すことになります。 今回は「発表アプリ」にしたので、 スマホ に「 OK Google 発表アプリにつないで」と話しかけると チャットアプリ が起動します。 それ以外の項目については適当に設定してしまって問題ないです。 以上で Action on Google の設定は完了です。 Dialogflowの設定 Action on Google の Action 設定から、Dialogflow画面に遷移できるので、新規プロジェクトを作成し Intents と Fulfillment を設定します。 Intentsの設定 チャットアプリ で入力した音声データに対して、どのように振舞うのかを設定します。今回は以下の2つを設定します。 Default Welcome Intent チャットアプリ が起動した時の振舞いを設定します。 今回は、アプリ起動時に チャットアプリ が「発表アプリを起動しました。」と応答するように Text response を設定しました。 プレゼン開始 チャットアプリ にプレゼン開始を指示した時の振舞いを設定します。今回は以下のような振舞いを想定しています。 １．チャットアプリに「プレゼン開始」と音声入力する。 ２．「プレゼン開始」のキーワードをFirebaseに保存する。 ３．チャットアプリが「プレゼンを開始しました。」と応答する。 「プレゼン開始」の音声入力で saveData というアクションが実行されるように設定します。 saveData の内容については Fulfillment で設定します。 アクション実行後、 チャットアプリ が「プレゼンを開始しました。」と応答するように設定します。 Fulfillmentの設定 Inline Editor を ENABLED に変更し、 index.js と package.json を以下のように設定します。 /** index.js **/ 'use strict' ; const firebase = require( "firebase" ); const functions = require( "firebase-functions" ); const DialogflowApp = require( "actions-on-google" ).DialogflowApp; // Firebaseへの接続情報 var config = { apiKey: "XXXXXXXXXXXXXXXXXXXXXX" , authDomain: "XXXXXXXXXXXXXXXXXXXXXX" , databaseURL: "XXXXXXXXXXXXXXXXXXXXXX" , projectId: "XXXXXXXXXXXXXXXXXXXXXX" , storageBucket: "XXXXXXXXXXXXXXXXXXXXXX" , messagingSenderId: "XXXXXXXXXXXXXXXXXXXXXX" } ; firebase.initializeApp(config); exports.dialogflowFirebaseFulfillment = functions.https.onRequest((request, response) => { var app = new DialogflowApp( { request, response } ); let actionMap = new Map(); // saveDataアクションを登録 actionMap.set( "saveData" , function (app) { // Firebaseにキーワードを保存する firebase.database().ref( "/googlehome" ).set( { word: "プレゼンを開始します" } ); } ); app.handleRequest(actionMap); } ); Firebaseへの接続情報 は Firebase の画面で ウェブアプリに Firebase を追加 をクリックして表示されるコードを使用します。 /** package.json **/ { "name" : "dialogflowFirebaseFulfillment" , "description" : "This is the default fulfillment for a Dialogflow agents using Cloud Functions for Firebase" , "version" : "0.0.1" , "private" : true , "license" : "Apache Version 2.0" , "author" : "Google Inc." , "engines" : { "node" : "~6.0" } , "scripts" : { "start" : "firebase serve --only functions:dialogflowFirebaseFulfillment" , "deploy" : "firebase deploy --only functions:dialogflowFirebaseFulfillment" } , "dependencies" : { "actions-on-google" : "^1.5.x" , "firebase" : "^4.8.0" , "firebase-admin" : "^4.2.1" , "firebase-functions" : "^0.5.7" , "apiai" : "^4.0.3" } } 設定後、 DEPLOY をクリックし Firebase へ スクリプト をデプロイします。 以上で Dialogflow の設定は完了です。 Firebaseの設定 Firebase の Database にデータ保存場所とアクセスルールを設定します。 データ保存場所の設定 Database > データ から保存場所を作成します。今回は /googlehome/word に作成します。 作成した保存場所には、PUTでデータを保存出来ます。 curl -X PUT \ https://XXXXXX.firebaseio.com/googlehome/word.json \ -H 'content-type: application/json' \ -d '"保存キーワード"' 保存したデータはGETで取得できます。 curl -X GET \ https://XXXXXX.firebaseio.com/googlehome/word.json \ -H 'content-type: application/json' アクセススールの設定 Database > ルール からDBへのアクセスルールを設定します。 今回は設定簡易化のため /googlehome 配下のデータには認証無しでアクセスできるように設定しています。 { "rules" : { "googlehome" : { ".read" : true , ".write" : true } , ".read" : "auth != null" , ".write" : "auth != null" } } 以上で Firebase の設定は完了です。 RaspberryPiの設定 以下の内容を スクリプト 化し、RaspberryPiのNode.js上で実行します。 GoogleHomeへのメッセージ通知 ディスプレイへのスライド表示通知 Firebase のDB更新通知の受信 ※RaspberryPiに初期インストールされているNode.jsはバージョンが古いので、最新の安定バージョンに更新する必要があります。 GoogleHomeへのメッセージ通知 GoogleHome任意のメッセージをプッシュするNode.js用ライブラリが公開されているので、ありがたく使わせていただきます。 → google-home-notifier ライブラリのインストール $ npm init $ npm install google-home-notifier 動作確認 /** testMessage.js **/ const googlehome = require( "google-home-notifier" ); const language = "ja" ; // デバイス設定(Google-Homeで始まる全デバイスにメッセージが通知される。) googlehome.device( "Google-Home" , language); // 通知するメッセージ googlehome.notify( "こんにちは。私はグーグルホームです。" , function (res) { console.log(res); } ); ※test.jsの 文字コード はUTF8で作成する。 $ node testMessage.js Device "Google-Home-XXXXXXXXXXXXXXXXXXXXXX" at 192.168.1.11:8009 <- 応答したGoogleHomeのデバイス名 Device notified ディスプレイへのスライド表示通知 スライドの表示には fbi というコマンドを使います。 コマンドのインストール $ sudo apt-get install fbi 動作確認 $ sudo fbi -nocomments -noverbose -a -T 1 -d {出力場所} {画像ファイルのパス} ※コンソール出力の場合は、{出力場所}に /dev/fb0 を、 HDMI 出力の場合は /dev/fb1 を設定します。 FirebaseのDB更新通知の受信 Firebaseのドキュメント を元に設定します。 ライブラリのインストール $ npm install firebase 動作確認 /** testFirebase.js **/ // Firebaseへの接続情報(Dialogflowの項目で設定したものと同じ) var config = { apiKey: "XXXXXXXXXXXXXXXXXXXXXX" , authDomain: "XXXXXXXXXXXXXXXXXXXXXX" , databaseURL: "XXXXXXXXXXXXXXXXXXXXXX" , projectId: "XXXXXXXXXXXXXXXXXXXXXX" , storageBucket: "XXXXXXXXXXXXXXXXXXXXXX" , messagingSenderId: "XXXXXXXXXXXXXXXXXXXXXX" } ; firebase.initializeApp(config); const path = "/googlehome" ; const key = "word" ; const db = firebase.database(); // 更新通知を受信した時の処理を記述 db.ref(path).on( "value" , function (changedSnapshot) { // 更新された値をログに表示 console.log( "取得キーワード:" + changedSnapshot.child(key).val()); } ); $ node testFirebase.js # Firebaseに「テスト」をPUTしてDBを更新する 取得キーワード:テスト index.js作成 実行ファイルとしてindex.jsを作成します。 /** index.js **/ const firebase = require( "firebase" ); const exec = require( "child_process" ).exec; const googlehome = require( "google-home-notifier" ); // メッセージを通知するGoogleHomeの設定 const language = "ja" ; const deviceName = "Google-Home-XXXXXXXXXXXXXXXXXXXXXX" ; googlehome.device(deviceName, language); // Firebaseへの接続情報を設定 var config = { apiKey: "XXXXXXXXXXXXXXXXXXXXXX" , authDomain: "XXXXXXXXXXXXXXXXXXXXXX" , databaseURL: "XXXXXXXXXXXXXXXXXXXXXX" , projectId: "XXXXXXXXXXXXXXXXXXXXXX" , storageBucket: "XXXXXXXXXXXXXXXXXXXXXX" , messagingSenderId: "XXXXXXXXXXXXXXXXXXXXXX" } ; firebase.initializeApp(config); // GoogleHomeへメッセージを通知 var notifyGoogleHome = function (word) { googlehome.notify(word, function (res) { console.log(res); } ); } ; var totalSpeakTIme = 0; var speak = function (word, speakTime) { // 前回メッセージの終了後、メッセージを通知 setTimeout( function () { notifyGoogleHome(word); } , totalSpeakTIme); // 今回メッセージの秒数分カウントアップ totalSpeakTIme += (speakTime * 1000); } // ディスプレイへスライドの表示を通知 var notifyDisplay = function (imgPath) { // fbiコマンドを使ってディスプレイに画像を表示 exec( "fbi -nocomments -noverbose -a -T 1 -1 -d /dev/fb0 " + imgPath, function (err, stdout, stderr) { if (err) { console.log(err); } } ); } ; var totalDisplayTIme = 0; var show = function (imgPath, speakTime) { // 前回スライドの終了後、表示を通知 setTimeout( function () { notifyDisplay(imgPath); } , totalDisplayTIme); // 今回スライドの表示秒数分カウントアップ totalDisplayTIme += (speakTime * 1000); } // Firebaseの更新通知を受取った時の処理 const path = "/googlehome" ; const key = "word" ; const db = firebase.database(); db.ref(path).on( "value" , function (changedSnapshot) { // 更新された値を取得 const value = changedSnapshot.child(key).val(); if (value === "プレゼンを開始します" ) { // 開始キーワードの場合はプレゼン開始 // 登録された値をFirebaseから消しておく db.ref(path).set( {[ key ] : "" } ); // プレゼン中は何もしない if (totalDisplayTIme > 0 || totalSpeakTIme > 0) { return ; } // プレゼン開始メッセージをGoogleHomeに喋らせる speak( "承知しました。" + value, 10); // 1枚目のスライドを表示する show( "./img/001.jpg" , 15); // 以下、プレゼン用スクリプトを記述 } } ); ファイルが作成できたら、実行します。 $ sudo node index.js ※ fbi コマンドの実行時にroot権限が必要なので sudo 付きで実行します。 以上で RaspberryPi の設定は完了です。 実際にやってみる 設定完了後、 スマホ に対して「発表アプリにつないで」「プレゼン開始」と指示すると、index.jsに書かれた内容でGoogleHomeがプレゼンをしてくれます。 長いので冒頭部分だけですが、実際にこんな感じでGoogleHomeにプレゼンしてもらいました。 参考 Google Home開発入門 / google-home-notifier解説 Raspberry Pi でTFT液晶モジュールにいろいろ表示する *1 : Googleアシスタント と会話できるアプリ

こんにちは。楽楽精算開発チームの堀内です。 先日、 ryuzeeさん こと吉羽さんに社内で スクラム ト レーニン グを実施して頂きました。最初から最後まで アジャイル で、全てが楽しく、得るものが多いト レーニン グでした。 今日はその紹介です。 前置き ラク スではプロダクト開発の改善活動の一部に アジャイル の考え方を取り入れて進めています。 実のところ、この改善活動の後ろで我々を支援してくれるのが吉羽さんです。 始まりとしては、プロダクトをもっと良くするにはどうするのが良いかと頭を抱えている頃に、チームメンバーの1人が「改善やチームビルディングに詳しい吉羽さん」に相談してみるのが良いのではないか、と言ってくれたことでした。 「なるほど！」と思い会社に掛け合ってみたところ、タイミングも良かったこともあり、すんなりとOKしてくれました。 早速吉羽さんに相談してみると「目的、ゴールを明確にして、アクションを決めたら一覧にして優先順位を決めて並び替えて、、、」とアド バイス を受けました。アクションを実施するためにチームを組んで少しずつ進めていると、良い感じで改善が進み始めました。そのことを吉羽さんに伝えると、「それが スクラム と言うんです」と。 それを言われて正直なところ「へぇ」という印象でした。 スクラム というものが良くわかっていなかったんです。でも、その言葉をキッカケに スクラム や アジャイル で 今でも色褪せることのない良書 とされるものを読み漁り「なるほどっ！」と思うようになりました。 改善活動も持続的に続けることができており、今では開発チーム全体に改善の文化が根付いてきたように思います。 そんな アジャイル のやり方を開発以外の方々にも知ってもらいたい、そう思って企画したのが吉羽さんによる スクラム ト レーニン グです。 ト レーニン グの様子 ト レーニン グの流れ 実施して頂いたのは半日コースのト レーニン グでした。 全体の流れは下記。 全体の説明 スクラム の概要説明 紙飛行機を使って スクラム を体験 全体のおさらい 全体説明 ト レーニン グ内容の全体を最初に説明して頂きましたが、中でも最も印象に残っているのは次の言葉でした。 「16時に終わります。終わることをコミットしますので、安心してください。16時から通常業務に戻れます。質問は常に受け付けます。好きなだけ聞いてください。ただし、質問が多ければ予定しているト レーニン グの内容が最後までいかないことになります。」 捉え方によっては、最後までト レーニン グの内容を受けたければ質問はほどほどに、とも思えますが、アウトプットは途中の状況に応じて変わるということを示してくれていたと感じます。 アジャイル で言う「スコープの調整」ということなんだろうなと。 つまり、16時に終わることをコミット（タイムボックスを固定）し、ト レーニン グの内容（スコープ）は質問の量（状況）に応じて調整する、という事なんだなと。 スクラム の概要説明 これは教科書的というか、 ryuzee.com のブログに書かれているような内容で、馴染みのない人にも分かりやすく説明して頂きました。 紙飛行機を使って スクラム を体験 今回の醍醐味とも言うべき、ゲームを通じての スクラム 体験です。 5〜6人に分かれて、チームで飛ばした紙飛行機の数を競い合うもので、以下のように進めました。  見積もり、計画、紙飛行機製作、振り返りを1セットとして4回繰り返す（つまり4スプリント実施） 紙飛行機を作る上でいくつかのルールが決められている 決められた距離以上飛ばして始めて成果となる 最後に全体の振り返り 各スプリントが始まる前に、何機製作できそうか、各チームが目標となる数字を公表します。 1回目は大体の見積もりは当たっていませんでした。 2回目の見積もり精度はかなり改善されました。 やってみないと分からなかったことが、1度実施して振り返ることで見積もりも製作も上手くなり、改善したということなんだと思います。 3回目は紙飛行機を製作する上で決められていたルールを1つだけ取り除くことができます。これはどのチームも同じルールを外しました。そのルールが ボトルネック となる「制約」と全員が考えていたんですね。3回目はどのチームも良い数字を叩き出します。 4回目は3回目に外した制約がもと通りになり、1、2回目と同じ制約のもとで紙飛行機を製作します。 途中で発生するルール変更が開発で言うところの「ビジネスの状況変化」を表すわけなんですが、ルールを変えることで成果も変わることが体感できました。 制約を外すことで成果が変わることが体感できたことは良かったのですが、それ以上に重要なことは「ルールに書かれていないことは禁止していない」と言うことでした。 例えば、製作に必要なハサミは1つだけというルールはなく、複数必要なら予備があるので使っても良かった、他のチームの紙飛行機を分析してはいけないルールは無い、などです。他にもいくつかあったのですが、決められたルールに縛られると新たな考えを「発想」する事が出来なくなるんだと気づく事ができました。 実際の開発の現場に置き換えるなら、 ボトルネック と認識されている「制約」を外すことも重要ですが、「制約」になっていないことに目を向けて工夫することも重要、ということになります。 チームと結果 最後に ト レーニン グは予定通り16時に終わりました。全体を通じて要所要所で質問もありました。紙飛行機のワークショップでは時間が若干押しているようでした。でもきっちり16時に終わりました。 ト レーニン グ内容のスコープが吉羽さんにより調整されたのか、予め想定されていたバッファに収まったのかは分かりません。 ただ、私たちの学びや満足が成果だとすると、私たちは間違いなく成果を得ることができましたし、予定通り16時から通常業務に戻ることができたため、全て計画通りでした。 アジャイル の原理原則を全体を通じて体感できる有意義なト レーニン グでした。   その後 後日、参加者にアンケートを取らせて頂いたところ、皆が満足感を得られていたことが改めてわかりました。 また、開発以外の方々と スクラム の考えを共通認識として持つことができたため、ちょっとした会話の中でも「価値」「サイズを小さくする」といったキーワードが聞こえ始めています。 今では改善活動だけでなく、開発を アジャイル で始めることができるようになりました。まだまだ始まったばかりですが、大きな一歩を踏み出しています。 募集 お陰様で順調に伸び続けている ラク スは、 アジャイル を取り込むことで更に改善し、飛躍していきます。 この変化の真っ只中で成長を実感されたい方、ぜひ一緒に働きましょう！楽しさとやりがいは保証します！ 企業の成長を支援するクラウドサービス | 株式会社ラクス

はじめに こんにちは。 ラク スのstrongWhiteです。 今回は Google Chrome (以下、 Chrome ) の旧バージョンをインストールする手順について書きます。 ここ最近、会社で Selenium を動かす機会があり、そのときに Chrome の旧バージョンが必要になったので、インストールする手順をいろいろ調べていました。 これから調べたインストール手順を書いていきますが、私自身、実際に手順を試していません。 なぜ試さなかったかというと、これから書く手順は レジストリ に手を加える必要があり、PCに重大な不具合を引き起こす可能性があるからです。上記を承知した上で試したい方は以下を読み進めてください。 旧バージョンは公式にはない まず前提として、 Chrome の旧バージョンは公式では提供されていません。 Chrome は、セキュリティアップデートなどで最新のバージョンが利用可能になったときに自動更新できる仕組みになっており、常に最新のバージョンを保てるようになっているからです。旧バージョンを利用すること自体、想定されていないということですね。 そのため、旧バージョンをインストールするには有志が公開している非公式なサイトから インストーラ を入手する必要があります。 ただインストールするだけじゃダメ 前述の通り Chrome は自動更新する仕組みになっているので、ただインストールするだけではダメです。自動更新を停止させる設定を行わなければいけません。 自動更新の停止設定は Chrome 側からは行えず、ターミナルなどで外部から設定しないとけません。 Windows だと レジストリ を変更する必要があり、 Mac だとdefaultsコマンドを実行しなくてはいけません。 レジストリ は不用意に変更するとPCに重大な不具合が起こる可能性があります。ひとつひとつの操作が理解できた上で慎重に行うことを強く強くオススメします。 自動更新を復活させる方法 自動更新は停止させたあとでも以下の方法で復活させることができます。 Windows の場合は レジストリ エディタから HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Google\Update に、DWORD値で DisableAutoUpdateChecksCheckboxValue という値を作成し、0に設定すればOK。 Mac の場合は defaults write com.google.Keystone.Agent checkInterval 1 を実行すればOKです。 これらは Google Update 関連のタスクを有効にする設定です。 インストールの手順 これまでのセクションを読んで察することができるかもしれませんが、 Chrome の旧バージョンをインストールする手順は公式がサポートしている手順ではないのでご自身の責任でお試しください。 以下、調べた手順。 ■ Windows 手順 すでに Chrome がインストールされている場合はアンインストールする 旧バージョンの インストーラ を取得する ネットワーク接続を切断する インストールする レジストリ エディタから HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Google\Update に、DWORD値で DisableAutoUpdateChecksCheckboxValue という値を作成し、1に設定する ネットワーク接続を有効にする ■ Mac 手順 1～4までは上と同じ ターミナルを起動し、 defaults write com.google.Keystone.Agent checkInterval 0 と実行する ネットワーク接続を有効にする ※手順を補足すると、インストール前にネットワーク接続を切断しているのは、インストール後に Chrome が自動更新しないようにするためです。その他、 Windows 手順の5と Mac 手順の2では、 Google Update 関連のタスクを無効にする設定を行っています。 おわりに 今回は Chrome の旧バージョンをインストールする手順を書きました。 冒頭でなぜ実際に手順を試していないと書いたのか、ここまで読んでいただいた方は意味がわかったかと思いますが、公式でサポートされている手順ではなく、かつPCが壊れる危険性を孕んでいますので、何度も言いますが試す際は自己責任でお願いします(汗) 参考 https://news.mynavi.jp/article/20100602-chrome-no-update/ http://yanor.net/wiki/?Windows-%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%2FChrome%2F%E5%8F%A4%E3%81%84%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%EF%BC%88%E8%87%AA%E5%8B%95%E3%82%A2%E3%83%83%E3%83%97%E3%83%87%E3%83%BC%E3%83%88%E5%81%9C%E6%AD%A2%EF%BC%89 エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 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

id:radiocat です。大阪本店で社内勉強会の運営をしています。 今回は「IT勉強会/コミュニティ運営 Advent Calendar 2017」の21日目の記事として投稿します。 qiita.com 社内の勉強会イベント 大阪では大きく2つの勉強会イベントが開催されています。 ビアバッシュ 大阪の開発部で毎月実施している勉強会です。参加自由ですが会社予算で飲み物と軽食を出してもらっています。私は主にこの運営に関わっています。先日はクリスマス版で実施しました。 もくもく勉強会 有志の呼びかけで毎週木曜日に実施する勉強会です。月末の木曜日はLT形式で発表会をします。特に予算や制約はなく、やりたいメンバーが集まってゆるくやっています。こちらは運営メンバーが以前このブログに投稿していますので詳細はそちらをご覧ください。 tech-blog.rakus.co.jp これらの運営に関わって実際にやってみた事についてまとめてみました。なお、やってみて思ったほどうまくいかなかった事も知見を得たという点では価値があると思うので惜しみなくご紹介します。 コンテンツ編 テーマを決める 自己紹介LT 開発外の部署の人にもプレゼンしてもらう ハッカソンしてみる 質問タイムを削る 会場セッティング編 会場を社外にしてみる サテライト会場で同時中継する 食べ物や飲み物を工夫してみる ツール編 スマホ三脚 Chromecast 掲示板と立て看板 スライド共有 おまけ クリスマスを楽しむ コンテンツ編 テーマを決める ビアバッシュでは毎月テーマを決めて発表者を募集しています。同じ開発部のメンバー同士とはいえチームによって文化が違ったり、使っている技術が違っていたりするため、ある程度テーマを絞ったほうが発表者が発表しやすく参加者も参加しやすいだろうと考えて運営側でテーマを決めています。ただし、あくまで参加しやすい場を作る事が目的なので、多少テーマから外れた発表であっても指摘することはありません。 過去に実施したテーマをいくつかご紹介します。 テーマ 概要 各サービスのお仕事発表会 各サービスで取り組んでいる課題やチャレンジしていることを共有してもらいました。 各サービスのトラブル特集 その名の通りトラブル事例の共有ですが、ビアバッシュでやってみると業務報告とは違った本音や苦労話が聞けました。 読書特集 技術書の紹介や効率よく読むための工夫などの読書術について共有してもらいました。 QAセッション大会 他のサービスの担当者に聴いてみたいことを事前に募集して回答してもらいました。 爆LT大会 時間の許す限りみんなでLTをやります。 自己紹介LT オフショア先の ベトナム 子会社からの出張者や中途入社、新卒の配属などで新しいメンバーが参加する場合、LT形式の自己紹介をしてもらっています。本当にただプレゼン資料を使って自己紹介するだけです。入社していきなりLTするのは敷居が高いですが、自己紹介ならば敷居は高くないと考えてお願いしています。新メンバー全員に必ずお願いする事も重要であったりします。結果的に新しいメンバーの事を知る良い機会になっています。次回以降で発表してもらう時の 心理的 敷居が下がることも密かに期待しています。 開発外の部署の人にもプレゼンしてもらう たまには開発部外の発表も聴いてみたいと考えて募集したところ、営業、人事、総務、 経理 、情シス、インフラチームといった他部門の方々からたくさん応募いただくビックイベントになりました。二部構成にして第二部は開発部のLTも行ったところ、開発部外の人も開発部の発表が聞けて新鮮だったとコメントをもらえました。ただ、ここまで大々的にやるといつもの会場に人数が収まりきらないなど、運営側はそれなりに大変です。 ハッカソン してみる ビアバッシュの特別回として ハッカソン もやってみました。ビアバッシュ2回分の枠を使い、1回目にア イデア ソンとチーム分けを行い、次の回までに ハッカソン して発表してもらいました。私も参加して同僚とチームを組んでIoT的な鳩時計を会議室で鳴らす仕組みを作ってみたりしました。 qiita.com 普段の仕事とは違った開発にチャレンジできて刺激的なイベントですが、参加者も運営側もビアバッシュよりは時間を使うことになるのでそれなりの覚悟で臨む必要はあります。ただ、この取り組みが評価されて社内で表彰していただきました。 質問タイムを削る これは結果的に バッドノウハウ でした。色々ア イデア を考えて実行すると思った以上に発表者が集まったり内容が濃くなりすぎて全体の時間が長くなりすぎることがあります。そこで質問時間を削るという苦渋の決断をしました。結果的に時間は短縮できましたが、後ほどアンケートを取ったところ反応はあまり良くなかったです。質問タイムを設けても質問が出ない事はありますが、質問タイムが無いとその場の雰囲気としてはやはり物足りないのだと思います。質問タイムは無くすのではなく時間を区切るなどで場をうまくコン トロール するほうが効果的です。 会場セッティング編 会場を社外にしてみる 開発部では四半期に一度、部全体で懇親会を実施しています。その機会を利用させてもらい、懇親会の会場でビアバッシュを行いました。今年の7月にはカフェラボという グランフロント大阪 内の施設を借りて実施しました。 kc-i.jp また、昨年は結婚式の二次会などで使う水槽のあるオシャレなお店を借りて、前出の ハッカソン イベントの発表会を実施しました。 自社のカフェスペースよりも巨大なスクリーンでマイクも使ったりなど、ちょっとしたビックイベント感が演出できました。 課題としては準備の過程でネット環境が無かったりプロジェクタがDVIしか対応していないなどが分かって事前の調整が普段以上に大変でした。部の懇親会の場を使わせてもらうので、懇親したい人もいる事を考えると懇親会の全ての時間をプレゼン発表に割り当てるのも目的が変わってしまうため、タイムスケジュールの調整も難しいところはあります。 サテライト会場で同時中継する 前出の開発部外からも参加者を招いてビアバッシュを実施したところ、人数が集まり過ぎてしまい会場に入り切らないという問題が発生しました。その対策として社内の会議室をサテライト会場にして Google ハングアウトを使って同時放映する方式を試してみました。しかし、映像が途切れたり中継の声が聞き取れなくて隣の本会場から笑い声だけが直接聞こえてくるなど、残念ながらこの試みは不評でした。 ただ、 ベトナム 出張中のメンバーからの要望で同じ仕組みを使って ベトナム オフィスと中継した時は大きな問題はなく、最低限の内容は ベトナム に伝わって楽しめているようでした。明らかに現場で見ることができないと分かったうえでの中継であれば、参加者もその前提で見るため多少の映像や音声の途切れなどは気にならないのかもしれません。 食べ物や飲み物を工夫してみる ビアバッシュの定番といえばビールとピザですが、毎回ピザも飽きるんじゃないかという仮説のもと、色々な食べ物にチャレンジしてみました。勉強会なのに食べ物にうるさいあたり、大阪っぽさが滲み出ていますがお察しください。 注意点といては予算が限られているのと、配達してもらえるか会社の近くで受け取りができる必要があり、選択肢は限られます。 実際に手配してみた食べ物を一部紹介します。 マクド ナルド ひとりあたり100円台のバーガー各種3つとチキンを手配しましたが若手はともかく中堅以上にはややキツかったようです。あと、一定金額以上になると配達の注文手続きがかなりやっかいなのが運営泣かせです。 たこ焼き 会社の近くで受け取りできるお店がソース無しタイプの 会津 屋のたこ焼きだったので、ピザを離れるにしても一足飛びにチャレンジしすぎた感はありました。 お弁当 事前に人数を確定させて人数分のお弁当を手配しました。ハンバーグ弁当、焼肉弁当などの注文も1人ずつ受付ました。ドタキャンや飛び入り参加に対応できない難しさはあります。 スパークリングワイン 12月の回ではビールの代わりにスパークリングワインを出してクリスマスを演出してみました。過去に社内で営業目標の達成イベントが行われた時に使った シャンパ ングラスを発掘してきて活用しました。 以上のように食べ物・飲み物も色々チャレンジしてみましたが、アンケートを取ってみたところ何だかんだピザの評判が良くて結局のところピザで充分という結論になっています。 ツール編 スマホ 三脚 前出の Google ハングアウトを使った同時中継で使用しました。この三脚に スマホ を固定して Google ハングアウトアプリを使うだけなので、撮影の手間がかからず高価な テレビ会議 システムなどを使わずに海外にも同時中継ができる点は運営の強い味方です。 Chromecast Chromecastを購入してプロジェクタの HDMI 端子につないでPC側はコードレスでプレゼンできるようにしました。 Chrome がインストールされたPCなら画面をそのままキャストできるのはもちろん、 Android 端末であれば手持ちの スマホ だけでプレゼンができて便利です。注意点は弊社のネット環境は社内向け環境と自由に外部接続出来る環境が分離されており、Chromecastは後者の環境に接続するため社内環境のデモなどにChromecastを使うことができません。お金をかければもっと高度な実現方法はあると思いますが、手軽に利便性を上げる事が出来る点ではこれも運営の強い味方です。 掲示 板と立て看板 ビアバッシュは開発部内のイベントとして実施するため事前に出欠をとりますが、もくもく勉強会・発表会はその日参加できる人だけでゆるく実施しているので事前に出欠はとっていません。自由でゆるくやれるメリットはありますが、参加したいと思っていてもイベント自体を忘れていて参加できなかったという事が起こります。そのためカフェスペースの 掲示 板に予定を貼り出したり、開催当日に立て看板を設置して周知するようにしました。アナログな手法ですが、以前よりもイベントの存在に気づいて社内で声をかけてもらったりするケースが増えており、意外と効果が出ているように感じています。 スライド共有 プレゼンで使った資料は共有フォルダに置いて参加できなかった人にも共有していますが、ファイルを置いてパスを共有してもなかなか見ないのが人情です。 SlideShare などのパブリックなサービスを使えばスライド共有できますが、内輪だけで楽しみたいケースもあるため全部をパブリックにしてしまうと逆に発表者のネタを縛ってしまう可能性があります。このハードルが意外と大きいのではないかという仮説のもと、社内にスライド共有の仕組みを導入しました。 現在はまだ試験運用中ですが、Knowledgeという OSS の情報共有ツールを使ってみています。 information-knowledge.support-project.org おまけ クリスマスを楽しむ 昨年の12月のもくもく発表会ではクリスマス版としてLT後に参加者同士でプレゼント交換をしました。今年もちょうどこの記事を投稿している当日に実施する予定です。ちなみに去年はプレゼント交換しようとした時に「自分の持ってきたプレゼントが自分に回ってこないように、全員にランダムにプレゼントを割り当てるプログラムってどう書くの？」という話題になりLTで使ったプロジェクタがそのまま使われて即席でモブプロが始まるというハプニングもありました。 アドベントカレンダー といえば今やクリスマスまでの期間を楽しむエンジニアのイベントの1つですが、プレゼント交換は弊社大阪のエンジニアにとってのもう1つのクリスマスイベントとして定着していきそうです。 おわりに 大阪開発部では楽しみながらエンジニアのスキルやノウハウをあげていけるように、運営メンバー同士で様々なア イデア を出し合って取り組んでいます。まだまだ色々なア イデア を試してみたいと思っていますが、社外の方との共同開催やゲスト参加なども大歓迎ですので、このブログを見て一緒に勉強会をやってみたいと感じた方がいらっしゃいましたら、是非 id:radiocat までご連絡ください。 エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 forms.gle イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ rakus.connpass.com

はじめに エンジニアのnorthmkyです。 ラク スに新卒で入社し、今年で2年目になります。 業務ではシステムの運用保守チームに所属しているので断然サーバ周りの作業が多いということで今回はその中でも yum コマンドについてまとめてみました。 おそらくこれを読めば yum と rpm との違いって？とりあえず yum 使ってるけど... yum install [package] って打つだけでなんでDL＆Installできるの？ という疑問は少し解消されるかと思います。 まだまだ浅い知識なので間違っているところがあれば指摘いただけると嬉しいです。 はじめに yumとは リポジトリとは yum/rpm/リポジトリの関係性 yum installを見てみる 1. ミラーサイトの中で一番地理的に近いミラーサーバを各レポジトリごとに探す CentOS-Base.repo 2. 必要なパッケージ情報を取得する おわりに yum とは まずものすごく大雑把にいいますと yum は下記になります。 パッケージ管理システム rpm というパッケージ管理システムをラッパーしている yum = rpm + 「 リポジトリ 」による自動更新機能 + 依存関係の管理(検出だけじゃない) yum は RedHat 系 ディストリビューション のパッケージ管理システムです。 パッケージというのは「ソフトウェアを構成するファイルらをまとめたもの」で、設定ファイルやドキュメント、プログラム本体、プログラム本体が動くためのライブラリなどがそれにあたります。 1 Linux では「パッケージ読み解き、ソフトウェアを正しく動作させるようにする」「パッケージの情報を管理する」ことでソフトウェアを使える/管理する仕組みを採用していて、今回取り上げる yum は Linuxディストリビューション のなかで RedHat 系のパッケージ管理システムとなります。 この yum ですが実際裏側では rpm というパッケージ管理システムを使っています。 「 rpm ではできなかった点を yum ができるようにしている」という立ち位置になっています。 この出来なかった点が冒頭に述べた 「 リポジトリ 」による自動更新機能 依存関係の管理(検出だけじゃない) です。 リポジトリ とは 意味のあるまとまりでパッケージを複数格納している場所のことです。 この場所には下記が格納されています。 複数のパッケージ( ./*.rpm ) その リポジトリ のメタ情報ら( ./repodata ) パッケージが複数存在してもその場所は リポジトリ とは言えません。メタ情報があって リポジトリ となります。 2 yum ではこの リポジトリ の情報を元にパッケージを検索したり、installを行います。 yum / rpm / リポジトリ の関係性 yum と rpm と リポジトリ の配置場所との関係性は下記のようになっています。 yum は /etc/yum.repos.d/*.repo に記載されている リポジトリ 場所にあるパッケージら に対して rpm 経由でDLしたり、インストールしたり、必要であればインストール時に依存関係のあるパッケージを検出して一緒にインストールしたりします。 逆をいえば、 /etc/yum.repos.d/*.repo 以外のレポジトリは情報がないので yum は取得することができませんので注意してください。 では、実際によく打つコマンドを例にしてどのようになっているか見てみます。 yum install を見てみる 「このコマンド(ソフトウェア)、インストールしてないからインストールしよう」というのはよくあると思うので 今回は yum isntall [package] を通してどんなことが行われているかを見ていきたいと思います。 大枠の流れは上記のようになっています。 今回は php をインストールしてみたいと思います。 (OS:CentOS6) [root@localhost ~]# yum install php こちらを実行すると、下記のようによく見る インストールしますか？ という対話モードになります。 この中身を見ていきましょう。 [root@localhost ~]# yum install php 読み込んだプラグイン:fastestmirror, security インストール処理の設定をしています Loading mirror speeds from cached hostfile /* 1.ミラーサイトの中で一番地理的に近いミラーサーバを各レポジトリごとに探す */ * base: ftp.jaist.ac.jp * epel: ftp.jaist.ac.jp * extras: ftp.jaist.ac.jp * remi-safe: mirrors.mediatemple.net * updates: ftp.jaist.ac.jp 依存性の解決をしています --> トランザクションの確認を実行しています。 ---> Package php.x86_64 0:5.3.3-49.el6 will be インストール --> 依存性の処理をしています: php-common(x86-64) = 5.3.3-49.el6 のパッケージ: php-5.3.3-49.el6.x86_64 --> 依存性の処理をしています: php-cli(x86-64) = 5.3.3-49.el6 のパッケージ: php-5.3.3-49.el6.x86_64 --> トランザクションの確認を実行しています。 ---> Package php-cli.x86_64 0:5.3.3-49.el6 will be インストール ---> Package php-common.x86_64 0:5.3.3-49.el6 will be インストール --> 依存性解決を終了しました。 依存性を解決しました /* 2.必要なパッケージ情報を取得する */ ============================================================================================================================= パッケージ アーキテクチャ バージョン リポジトリー 容量 ============================================================================================================================= インストールしています: php x86_64 5.3.3-49.el6 base 1.1 M 依存性関連でのインストールをします。: php-cli x86_64 5.3.3-49.el6 base 2.2 M php-common x86_64 5.3.3-49.el6 base 530 k トランザクションの要約 ============================================================================================================================= インストール 3 パッケージ 総ダウンロード容量: 3.8 M インストール済み容量: 13 M これでいいですか? [y/N] 1. ミラーサイト の中で一番地理的に近いミラーサーバを各レポジトリごとに探す 結果として リポジトリ の場所(URL)のほとんどが .jp ドメイン つきなため、一番地理的に近い ミラーサイト をレスポンスを計測して選んだというのがわかります。 これは yum が、前述した /etc/yum.repos.d/*.repo の リポジトリ の情報からインストールする リポジトリ の場所を決定しています。では php のパッケージが存在する 「base」という リポジトリ の情報が記載されている CentOS-Base.repo を見てみます。 CentOS-Base.repo 1 # CentOS-Base.repo 2 # 3 # The mirror system uses the connecting IP address of the client and the 4 # update status of each mirror to pick mirrors that are updated to and 5 # geographically close to the client. You should use this for CentOS updates 6 # unless you are manually picking other mirrors. 7 # 8 # If the mirrorlist= does not work for you, as a fall back you can try the 9 # remarked out baseurl= line instead. 10 # 11 # 12 13 [base] /* 1.リポジトリ名 */ 14 name=CentOS-$releasever - Base 15 mirrorlist=http://mirrorlist.centos.org/?release=$releasever&arch=$basearch&repo=os&infra=$infra /* 2.ミラーサイトリスト */ 16 #baseurl=http://mirror.centos.org/centos/$releasever/os/$basearch/ 17 gpgcheck=1 18 gpgkey=file:///etc/pki/rpm-gpg/RPM-GPG-KEY-CentOS-6 19 20 #released updates 21 [updates] 22 name=CentOS-$releasever - Updates 23 mirrorlist=http://mirrorlist.centos.org/? ... ... *.repo の中には基本的には リポジトリ 情報が複数記載されています。 mirrorlist に設定されているURLを実際に叩くと、 [root@localhost ~]# curl 'http://mirrorlist.centos.org/?release=6&arch=x86_64&repo=os&infra=' http://ftp.yz.yamagata-u.ac.jp/pub/linux/centos/6.9/os/x86_64/ http://ftp.iij.ad.jp/pub/linux/centos/6.9/os/x86_64/ http://mirror.fairway.ne.jp/centos/6.9/os/x86_64/ http://ftp.tsukuba.wide.ad.jp/Linux/centos/6.9/os/x86_64/ http://ftp.riken.jp/Linux/centos/6.9/os/x86_64/ http://ftp.nara.wide.ad.jp/pub/Linux/centos/6.9/os/x86_64/ http://ftp.jaist.ac.jp/pub/Linux/CentOS/6.9/os/x86_64/ http://www.ftp.ne.jp/Linux/packages/CentOS/6.9/os/x86_64/ http://mirror.0x.sg/centos/6.9/os/x86_64/ http://mirror.nus.edu.sg/centos/6.9/os/x86_64/ [root@localhost ~] ミラーサイト のリストが返ってきます。 このリストから yum は一番近い場所を選定して、 リポジトリ 内のパッケージを取得する、ということをしているようです。 今回は ftp.jaist.ac.jp でした。 2. 必要なパッケージ情報を取得する php パッケージを対象にしただけですが、実際には依存してる他パッケージもインストールの準備をしています。 パッケージが依存しているソフトウェアは、 パッケージ(. rpm )のSPECファイルというパッケージのメタ情報（ソースバージョンなど）を記載したファイルに記載してあります 。 3 この情報を RPM データベース( /var/lib/rpm ) 4 と呼ばれるパッケージの情報を保存しておくDBに登録し、install前に検索をかけ、依存関係の有無を見ています。 このような処理が走ったあとでDL&installが行われます。 おわりに yum についてまとめてみました。 yumとは に記載した パッケージ管理システム rpm というパッケージ管理システムをラッパーしている が伝えることができていれば幸いです。 ネットでは チートシート や「 rpm より yum をまずは使うべし」などのハウツーの記事は多いのですが、 改めてどういった仕組み、処理でインストールが行われているかの記事はあまり見なかったので試行錯誤しながら執筆しました。 少しでも知識の助けになれば幸いです。(そして私自身の正しい知識の定着のためにもご指摘頂けると非常に助かります...!!) エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 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 http://itpro.nikkeibp.co.jp/article/Keyword/20110427/359976/?rt=nocnt ↩ http://kazmax.zpp.jp/linux_beginner/yum_createrepo.html#an3 ↩ https://mag.osdn.jp/14/01/10/090000/2 ↩ http://www.itmedia.co.jp/enterprise/0309/05/epn05_5.html ↩

こんにちは、 west-c です。 スマートスピーカー 、国内でも各社から販売され盛り上がっていますね。 私も弊社開発チーム内での GoogleHome モニター選考に当選し *1 、自宅で使い方を模索中です。 GoogleHome（厳密には GoogleHome 内蔵の Googleアシスタント ）は、ユーザが自由にアプリを開発したり公開したりすることができます。 簡単な対話アプリであればノンプログラミングで作成することも可能です。 今回は、自分で作成した スクリプト と組み合わせたアプリの作成手順を説明したいと思います。 作成するアプリの説明 Action on Googleでプロジェクトを作成する Dialogflowでエージェントを作成する Entitiesを作成する Intentsを作成する Fulfillmentを実装する 動作確認をする おわりに お知らせ 参考 作成するアプリの説明 今回は「 指定した路線の遅延有無を教えてくれるアプリ 」を題材に説明します。以下のような会話が行えることを目標としましょう。 ユーザ：「OK Google, XX線の遅延情報を教えて」 GoogleHome： （遅延が発生している場合）「XX線で遅延発生中です。」 （遅延が発生していない場合）「現在XX線では遅延は発生していません。」 このアプリの流れを図にすると以下のようになります。 図内に登場する単語を簡単に説明します。 Action on Google ： Google アシスタント対応の アプリ開発 を行えるプラットフォームです。Action on Google で作成するアプリの単位を プロジェクト と呼びます。 Dialogflow： 自然言語 対話のプラットフォームです。Dialogflowを使うことで、 GUI で簡単に会話形アプリを作成することができます。Dialogflowで作成するアプリの単位を エージェント と呼びます。 遅延情報取得プログラム：今回作成する スクリプト です。遅延情報の取得処理はこの スクリプト で行います。Dialogflow 上で Fulfillment として設定することで Dialogflow と連携することができます。 以下から詳細な手順を説明します。 Action on Google でプロジェクトを作成する GoogleHomeと連携している Google アカウントで Action on Googleのコンソール にアクセスし、 Add/import project から新しいプロジェクト TrainDelayInfo を作成しましょう。 作成したプロジェクトをクリックし、 ADD ACTIONS から Dialogflow の BUILD を選択します。 CREATE ACTIONS ON DIALOGFLOW をクリックすると、Dialogflowのコンソールに遷移します。 Dialogflowでエージェントを作成する ここからDialogflow上での設定になります。 コンソールには以下のような画面が表示されるので、 CREATE をクリックします。 今回 Dialogflow で設定することは大きく以下の3点です。 順番に設定していきましょう。 Entitiesの作成 Intentsの作成 Fulfillmentの実装 Entitiesを作成する Entities では、ユーザからの入力として受け付ける単語を定義します。例えば、Dialogflowで提供しているEntityに @sys.color がありますが、これは色名の単語（赤色・青色・黄色など）が定義されています。 「赤」という入力を「赤色」と判断するなど、単語の揺れを補正することも可能です。 今回は電車の路線名を入力として受け取る必要があるため、路線名を定義する @train-route というEntityを新しく作成します。 Entityの作成は Entities > CREATE ENTITY から行います。 左側（reference value ）には「パラメータの単語」を、右側（synonym）には「その単語の同義語」を入力します。 日本語の場合、ひらがなで認識される可能性もあるため synonym にひらがなも入力すると良いでしょう。 上記の場合、ユーザが「おだきゅうせん」や「 小田急 」と発言しても、「 小田急 線」として認識されます。 作成が完了したら SAVE で保存しましょう。 Intentsを作成する Intents ではユーザの会話によってどの処理を実行するのかを定義します。 今回は「 路線名 の遅延情報を教えて」という会話に反応するIntentを作成するため、 Intents > Default Welcome Intent で以下のように編集しました。 User says ：このIntentとして認識される例文を入力します。追加で「 路線名 は遅延している？」という呼びかけでも認識するようにしました。黄色背景部分（路線名）はパラメータとなる部分です。 Action ：上のテキストボックスにはアクション名を指定します。後述のFulfillmentの実装で利用します。2つ目のテーブルではパラメータを指定します。 REQUIRED ：必須有無を選択できます。必須の場合、このパラメータが入力されないと次の Intent には遷移しません。 PARAMETER NAME ：パラメータ名です。Fulfillmentにてパラメータを識別するために利用します。 ENTITY ：このパラメータのEntityです。今回は先ほど作成したEntityの @train-route を指定しています。 IS LIST ：複数の値を受け取る場合に指定します。 PROMPTS ：パラメータの入力を促す文章を定義します。REQUIREDにチェックしたパラメータについて、ユーザからの入力が無かった場合やEntityに存在しない単語を入力された場合に使われます。 Response ：このIntentでのユーザへの返答を定義します。今回はFulfillmentを使って返答するため、デフォルトで設定されているものは削除します。 作成が完了したら SAVE で保存しましょう。 Fulfillmentを実装する IntentとEntityを使って路線名は取得できましたので、いよいよFulfillmentで遅延情報を確認する スクリプト を書いていきましょう。 今回は、Fulfillmentの実装に Firebase というサービスを利用します。 DialogflowはFirebaseと連携しているため、Dialogflow上でFulfillmentの実装・デプロイをすることができます。 Fulfillment > Inline Editor > ENABLED で表示されるエディタに スクリプト を記述しましょう。 今回実装したコードは以下のようなものです。 遅延情報を取得する処理は割愛しますが、 API 等を利用するなどして遅延有無を isDelay フラグにセットする想定です。 'use strict' ; process.env.DEBUG = 'actions-on-google:*' ; const App = require( 'actions-on-google' ).DialogflowApp; const functions = require( 'firebase-functions' ); // Intentのアクション名を指定 const NAME_ACTION = 'confirm_delay' ; // パラメータのPARAMETER NAMEを指定 const ROUTE_ARGUMENT = 'train-route' ; exports.dialogflowFirebaseFulfillment = functions.https.onRequest((request, response) => { const app = new App( { request, response } ); function confirmDelay (app) { // 路線名を取得する let route = app.getArgument(ROUTE_ARGUMENT); let isDelay = false ; /* 指定した路線の電車遅延情報を取得する処理をここに書く */ if (isDelay) { app.tell(route + 'で遅延発生中です。' ); } else { app.tell( '現在' + route + 'では遅延は発生していません。' ); } } let actionMap = new Map(); actionMap.set(NAME_ACTION, confirmDelay); app.handleRequest(actionMap); } ); 下部の DEPLOY ボタンを押せばFirebaseへのデプロイが完了します。 IntentからFulfillmentを呼び出すためには、 Intents > Default Welcome Intent > Fulfillment > Use webhook にチェックを付けてください。 動作確認をする これで設定は概ね完了したので、動作確認をしてみます。 右側のテキストエリアに会話文を入力することで、Dialogflowでの動作確認を行えます。 早速「おだきゅうの遅延情報を教えて」と入力してみましょう。 USER SAYS にはユーザが入力した文章が表示されます。 作成したEntity @train-route にて、「おだきゅう」は「 小田急 線」の同義語と定義したため、パラメータ train-route には 小田急線 がセットされています。 このパラメータがセットされた状態でFulfillmentが呼び出され、レスポンスとして「現在 小田急 線では遅延は発生していません」という文章が返ってきました。 GoogleHome実機でのテストは、 Integrations > Google Assistant > TEST で Googleアシスタント と連携することで実施できます。 おわりに 以上でGoogleHome上で動作するアプリを作成することができました。 Dialogflow自体はSlackや Twitter とも連携しているため、今回説明した内容を応用すれば アプリ開発 や Bot 開発の幅が広がりそうですね。 ほぼすべての設定をWeb上で実施でき敷居も低いと思いますので、皆さんもぜひお試しください。 お知らせ ラク スでは 去年 に引き続き、 ラク ス Advent Calendar 2017 を実施いたします！ Qiitaにカレンダーを公開していますのでお楽しみに。 qiita.com 参考 Build Actions for Google Assistant using Actions Builder (Level 1) Google Developers Japan: Google アシスタント対応アプリを日本語で開発してみよう Actions on Google: Building Assistant Actions using API.AI - YouTube *1 : 選考方法：じゃんけん

id:radiocat です。楽楽精算の大阪開発チームのリーダーを担当しています。 11月8日、Japan IT Weekが開催された 幕張メッセ に行ってきました。 Japan IT Weekとは Japan IT Weekは様々な IT技術 を持った出展企業とソリューションを求めるビジネスマンが商談を交わす日本最大級のIT専門展です。BtoBサービスを展開する我々にとってはスーパー重要なイベントです。東京ビックサイト、 幕張メッセ 、 インテックス大阪 の3箇所で時期を分けて開催されています。今回は数々のバンドが伝説を作り サカナクション が アルク アラウンドした 幕張メッセ にスーツを身にまとったビジネスマンが集結し列を作りました。毎年多くの人が熱狂するこの場所をビジネスマンが埋め尽くす超ビックなオトナのフェスなのです。 Japan IT Week秋＠ 幕張メッセ 11/8〜10の3日間、 幕張メッセ で開催されました。今回私は各業界の動向をウォッチしたり弊社のサービスとの機能連携の可能性を考えてみたりなど、今後の製品開発の参考にすることを目的にそれぞれのブースを回ってきました。会場は10種類の展示区画に分かれています。 http://www.japan-it.jp/seminar/ www.japan-it.jp クラウドコンピューティング EXPO Web&デジタル マーケティング EXPO データセンター展 通販ソリューション展 店舗ITソリューション展 情報セキュリティEXPO モバイル活用展 ビックデータ活用展 IoT/M2M展 AI・業務自動化展 中でもビックデータ、IoT/M2M、AI・業務自動化は近年とても注目されている分野ということもあり、多くの人で溢れかえっていました。それぞれ独立した分野というよりも、センサーを活用してビックデータを集め、AIを活用して業務を分析、改善するような、それぞれの分野を融合させた製品が多数出展されていました。まだまだ発展途上の分野でもあり、今後も注目され続けそうな熱気を感じることができました。 通販ソリューション展は弊社製品のメールディーラー／チャットディーラー、配配メール、クルメルが出展していました。そして クラウドコンピューティング EXPOには私も開発に携わっている楽楽精算と働くDBが出展していました。どちらも大変盛況で主に営業チームのメンバーが休む間もなく対応していました。一言ぐらい激励を…と思い近づこうとしたものの多忙そうで入る隙間もなく、社員なのにコンパニオンさんに勧誘されそうになってこれはまずいと思い立ち去りました。。 自分が開発に関わっている製品が多くの人達に支えられて、さらに多くのユーザーに届けられようとしているその瞬間を見られることはとても貴重なことであり良い体験になりました。 総務・人事・ 経理 ワールド＠ インテックス大阪 幕張メッセ との関連展示会として11/15〜17に大阪でも総務・人事・ 経理 ワールドという展示会が開催されました。こちらは私も関係者の1人として楽楽精算の出展のお手伝いをしてきました。 来訪頂いた人にコンパニオンさんが簡単な説明を行い、興味をもって頂いた場合はスタッフがデモをしました。僭越ながら私もスタッフの1人としてデモしました。中小企業の 経理 部門が抱えている課題は会社によって様々なので、こうして少しだけデモのお手伝いをするだけでも様々なご意見が聞けてとても参考になります。 ちなみに、私が開発に関わった機能の1つに ICリーダーアプリ がありますが、コンパニオンさんが手に持っている タブレット 端末ではこのアプリを使った説明をされていました。自分が開発に関わったアプリをお姉さまたちが手にとってコンパニオン活動をされているのを見るだけでも、慣れないスタッフ作業の疲れが吹き飛ぶほど価値ある経験でした。 まとめ 以上のように来訪者側とスタッフ側の両方を体験して私のこの秋のフェスシーズンは幕を閉じました。しかし年明けにはまた インテックス大阪 で、そして春には東京ビックサイトで次の展示会が予定されているようです。ビジネスマンの活動は既に次に向けて動き出しているのです。 おわりに なお、 ラク スでは一緒に働く社員やパートナー企業の方を募集しています。このような経験を一緒に堪能してみたいと感じられたかたがいましたらぜひお声がけください。Web技術だけでなく iOS や Android といったモバイル技術やAIなどの先進的な技術を持ったエンジニアのかたも大歓迎です。 株式会社ラクス｜採用情報

はじめに 記事をご覧のみなさん、はじめまして。新卒1年目エンジニアのkasuke18と申します。 ブラウザは圧倒的に Chrome 派です。 今回の記事では私が作ってしまった2大 脆弱性 の XSS と SQLインジェクション について、ソース例を踏まえて原因を追及します。なお、ソースの言語については PHP を利用しています。 この記事が初めてのブログ投稿ですので、「この書き方はヘンだな」と感じるときがあると思いますが、そこは温かい目で見守ってくださると幸いです。。 もくじ はじめに もくじ この記事の想定する読者 XSS XSSとは XSSが発生したソース例 なぜXSSが発生したのか 実施した対処 この件を通して感じたこと SQLインジェクション SQLインジェクションとは SQLインジェクションが発生したソース例 なぜSQLインジェクションが発生したのか 実施した対処 この件を通して感じたこと おわりに 参考文献 この記事の想定する読者 新人エンジニアの方々 「2大 脆弱性 は知ってるけど、具体的にダメな実装例が実感できない」という方が読まれた際に、理解の手助けとなれば幸いです。 つきましては「 XSS とは」「 SQLインジェクション とは」ということは今回はさらっと流します。それらをお探しの方は他のサイトをご覧ください。 IPAのサイト は国の機関なので信頼できると思われます。 「こんなパターンで 脆弱性 が発生するのか」や「ここの実装するときは気を付けないと！」などと感じていただくのが目的です。とはいっても実際のソースは 大人の事情で 載せられないので、実際のソースとは少しズレてしまいますが、そこはご容赦ください。。 XSS XSS とは いきなりですが、新人エンジニアの私から見てもわかりやすくまとまっていると感じた記事があるので引用します。「 XSS とは何か」ということをお探しの方は こちら をご確認ください。 XSS (Cross Site Scripting)は、あるWebページにアクセスした標的のブラウザ上で、攻撃者が任意のコードを実行し得るバグ、あるいはそれを用いた攻撃手法のこと XSS が発生したソース例 XSS が発生した原因などは次で説明するとして、まずは XSS が発生してしまったソース例を示します。 <!DOCTYPE> < html > < head > </ head > < body > < form action = "" method = "post" > <!-- ↓ここでXSSが発生 --> < input name = "hoge" type = "hidden" value = " <?php echo $ _POST [ 'hoge' ] ; ?> " > </ form > </ body > </ html > この時実現したかったことは、フォームから入力値を受け取り、その入力値をパラメータにセットすることです。 なぜ XSS が発生したのか ソース例を見ていただければわかるかと思いますが、直接の原因は単純に エス ケープが漏れていたことです。言い方は悪いですが半ば思考停止気味に「とりあえず エス ケープしておこう」で防ぐことはできたミスです。 ではなぜ エス ケープが漏れてしまったのかと言い訳をしますと、単純に注意不足で エス ケープをしなかったことに加えて、 「入力値検証をしっかりと行っているから大丈夫」 という無意識のうちに安心感を持っていたことです。 むしろ今回の件では見事にその意識の甘さが 脆弱性 を生み出しました。どういうことかと申しますと、具体的には以下の流れで発生していました。 Chrome のdeveloperツールでパラメータを変更し スクリプト を仕込み、確定する サーバは入力値検証を行い、エラーと入力値を返す 戻った画面では受け取った入力値をセットする XSS が発生!! 今回 XSS を発生させてしまったのは <input> の type="hidden" パラメータでした。これは通常の画面操作からは直接変更できませんが、developerツールではできてしまいます。 それでは好き放題に変更された入力値を受け入れてしまうので、普通は入力値検証を行い、決められた値以外は許可しないようにします。 また、ユーザの使いやすさを考えると、エラー時に戻った画面ですでに入力されていた内容をセットしておくことも必要です。（入力内容を1か所間違えただけで全部やり直しというのはあまりに不親切ですので。） 今回の件でもそれに乗っ取り入力値検証を行い、数値以外は許可しないようにしていました。また、エラー時に入力値をセットするということもしていました。 XSS を発生させる原因となった処理はこの「エラー時に入力値をセットする」という処理で、この入力値を出力する際に エス ケープしなかったために XSS が発生しました。 実施した対処 今回の件では エス ケープが漏れていたことが原因なので、 エス ケープを実施して対処しました。 PHP では htmlspecialchars() という関数を利用することで エス ケープできます。 以下が修正後のソース例となります。 <!DOCTYPE> < html > < head > </ head > < body > < form action = "" method = "post" > <!-- ↓ htmlspecialchars() を使用 --> < input name = "hoge" type = "hidden" value = " <?php echo htmlspecialchars ( $ _POST [ 'hoge' ]) ; ?> " > </ form > </ body > </ html > この件を通して感じたこと この XSS脆弱性 は被害という意味ではほぼ問題ないと考えています。その理由は、 入力値検証ではじかれるため、サーバが スクリプト を許容していない 1を考慮すると、 スクリプト が実行されるのは スクリプト を埋め込もうとした攻撃者のみである 以上の2点から被害はほぼないと考えました。 しかし、 エス ケープが漏れてしまっていたことは問題なので、今後は忘れないように十分に注意します。 SQLインジェクション SQLインジェクション とは XSS 同様に SQLインジェクション も詳しい説明は省略させていただきます。詳しくは IPAの資料 をご覧ください。 SQLインジェクション が発生したソース例 SQLインジェクション が発生した原因などは次で説明するとして、まずは SQLインジェクション が発生してしまったソース例を示します。 <?php $ id = $ _POST [ 'id' ] ; $ status = $ _POST [ 'status' ] ; $ conditions = '' ; $ isFirst = true ; if ( $ id !== null ){ if ( $ isFirst ){ $ conditions .= ' WHERE ' ; $ isFirst = false ; } else { $ conditions .= ' AND ' ; } $ conditions .= 'id = :id' ; } if ( $ status !== null ){ if ( $ isFirst ) { $ conditions .= ' WHERE ' ; $ isFirst = false ; } else { $ conditions .= ' AND ' ; } // ここでSQLインジェクションが発生 $ conditions .= 'status = ' . $ status ; } $ sql = 'SELECT is, name, status FROM table' . $ conditions ; $ sth = $ dbh -> prepare ( $ sql ) ; $ sth -> bindValue ( ':id' , $ id ) ; $ sth -> execute () ; ?> この時実現したかったことは、フォームから入力値を受け取り、その入力値によりDB検索を行うことです。また、フォームで入力されるパラメータは毎回すべて入力されるわけではないので、 SQL のWHERE句は動的に組み立てる必要があります。 なぜ SQLインジェクション が発生したのか 上記のソース例を見ていただければ一目でわかりますが、パラメータ id は正しくプリペアード ステートメント が使用されていますが、パラメータ status は単なる文字列結合となってしまっています。このことが SQLインジェクション を発生させていました。 また間接的な原因として、パラメータ status についての入力値検証が全く行われていなかったことがあります。ただの言い訳でしかありませんが、入力値検証を行わなかった理由はパラメータ status の入力方法がプルダウンメニューであり、「プルダウンならプログラムが用意した値以外は送られてこない」という誤った認識をもってしまっていたからです。すでに上記 XSS の項でも述べていますが、 Chrome などのdeveloperツールを利用すれば簡単に値を変更できる ことを失念していました。 実施した対処 理想論でいえば、本来は保険的な対策でしかない入力値検証だけで対処するのではなく、適切にプリペアード ステートメント を利用することが必要です。しかし今回の件では諸事情により根本的な原因である SQL の組み立て部分を変更することはできませんでした。よって入力値検証で数値以外は許容しないようにして対処しました。 XSS と同様、修正後のソース例を書こうと考えましたが、 大人の事情で 書くことができません。 代わりに、理想的な対処法であるプリペアード ステートメント を適切に利用して対処したソース例を以下に示しますので、ご容赦ください。 <?php $ id = $ _POST [ 'id' ] ; $ status = $ _POST [ 'status' ] ; $ conditions = '' ; $ isFirst = true ; if ( $ id !== null ){ if ( $ isFirst ){ $ conditions .= ' WHERE ' ; $ isFirst = false ; } else { $ conditions .= ' AND ' ; } $ conditions .= 'id = :id' ; } if ( $ status !== null ){ if ( $ isFirst ) { $ conditions .= ' WHERE ' ; $ isFirst = false ; } else { $ conditions .= ' AND ' ; } // プレースホルダを使用 $ conditions .= 'status = :status' ; } $ sql = 'SELECT is, name, status FROM table' . $ conditions ; $ sth = $ dbh -> prepare ( $ sql ) ; $ sth -> bindValue ( ':id' , $ id ) ; // 値をパラメータにバインドする $ sth -> bindValue ( ':status' , $ status ) ; $ sth -> execute () ; ?> この件を通して感じたこと 今回の件では「プルダウンなら入力値検証を行わくてもよい」という完全に誤った認識が露呈しました。プルダウンだけではなく、 XSS の項でも挙げている <input> の type="hidden" パラメータも同様で、「通常の画面操作から直接変更できないパラメータこそ入力値検証が必要」と感じました。 おわりに 以上が、私が実装してしまった2大 脆弱性 です。この記事の目的の通り、「こんなパターンで 脆弱性 が発生するのか」と把握していただけたでしょうか。実際のソースが載せられないため、正直よくあるソース例になってしまった感が否めません。。 ちなみにと言っては何ですが、今回ご紹介した 脆弱性 はどちらも 単体テスト で発見・修正しているので、大事には至っておりません。 最後までお読みいただきありがとうございました。 参考文献 脆弱性 対策： IPA 独立行政法人 情報処理推進機構 https://www.ipa.go.jp/security/vuln/index.html 結局 XSS って何なの？ - XSS になりたい http://xss.hatenablog.jp/entry/2014/12/03/154132 安全なウェブサイトの作り方： IPA 独立行政法人 情報処理推進機構 https://www.ipa.go.jp/security/vuln/websecurity.html エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 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年目のMasaKuと申します。 PHP の勉強を開始した当初は「とにかく動かせること」「思い通りに動くこと」だけで満足していました。 しかし、勉強を進めていくうちに「もっと綺麗にできないものか」と思うようになり、 フレームワーク の勉強を開始しました。 フレームワーク は、使い方を覚えるまでは時間がかかるものですが、要領が分かってくると、たった数行書くだけでいろんな機能を実現してくれるため、Web アプリ開発 を強力にサポートしてくれます。 LaravelではComposerというシステムを利用することで簡単に導入することができるため、これから フレームワーク を勉強しようとしている方にもおすすめの フレームワーク であると考えます。 本記事は、生の PHP は書いたことがあるけれど、 フレームワーク は使ったことがない、という方に対して、導入の一歩をお手伝いできるよおうな記事になれれば幸いです。 なお、以下は Windows で導入する際の手順となります。 macOS をお使いの方は、同じように進められない可能性がありますのでご了承ください。 はじめに PHPフレームワークとは Laravelとは Laravelのインストール 準備するもの XAMPPのインストール Composerのインストール ダウンロード手順 インストール手順 Laravelのインストール Laravelプロジェクトの作成 おわりに 参考資料 PHP フレームワーク とは フレームワーク とは、「開発で多様される様々な機能や仕組みを持ったソフトウェア」です。 Web アプリ制作 で最低限必要となる機能（ログイン画面など）は大抵のアプリである程度共 通化 しています。 そのため、そういったお決まりの機能の開発は フレームワーク に任せてしまおうといった思想のもと生まれました。 PHP フレームワーク で有名なものは以下の通りです。 CakePHP Symfony Zend Framework CodeIgniter 書店に行くと上記のいずれかの参考書を目にしたことがあるのではないでしょうか。 特に CakePHP の本はどの書店に行っても置いているという印象で、日本で最も人気の PHP フレームワーク なのではないでしょうか。 Laravelとは 私が大人気の CakePHP を差し置いて、Laravelの勉強をしようと思った理由は以下の通りです。 低い学習コスト 楽に導入できる GitHub で人気急上昇中 フレームワーク 導入でつまづいてしまうと、一気にやる気を失ってしまうと感じたため、スムーズに開発できる段階に移行できるものがいいなと感じました。 また、現在 GitHub で注目されているというのもポイントでした。 以下は GitHub 上でのスターなどの比較です。 GitHub での注目度比較 (2017/11/11 時点) フレームワーク 開発に携わる人が多いということは、これからも進化し続ける可能性があるということです。 また、そういった風潮を受けてか、書店では出版日が比較的若い本が販売されていたことも魅力の一つだと思いました。 Laravelのインストール さて、前置きが長くなりましたが、さっそくLaravelの導入です。 今回は、Laravelの画面が表示できるところまでを解説させていただきます。 準備するもの Laravelを導入に必要なものは以下の通りです。 XAMPP Composer 「あれ、Laravelの導入なのにLaravelは用意しなくてもいいの？」と感じる方もいらっしゃるかもしれません。 Laravelでは、Composerというプログラムを利用することで、Laravelを利用するために必要なライブラリなどを自動で入手することができます。 コマンド入力が必要となりますが、そこさえ間違えなければ、導入で失敗することはありません。 XAMPPのインストール まずはXAMPPのインストールです。 XAMPPとは PHP の実行環境を簡単に構築できる Apache ディストリビューション のことです。 以下のページからXAMPPをダウンロードしてください。 Composerを利用するためにXAMPPの PHP を利用したいだけなので、 php .iniなどの設定ファイルは触らずに、インストールだけ完了させておいてください。 www.apachefriends.org Composerのインストール 次はComposerのインストールです。 Composerは上述の通り、 PHP フレームワーク を導入する上で必要となるライブラリなどを自動で入手してくれるプログラムです。 これを利用することで、簡単にLaravelを導入ることができます。 では、Composerの インストーラ ーを以下のページからダウンロードしてください。 getComposer.org インストーラ ーをダウンロードするリンクがわかりにくいと感じたので、画像を掲載しておきます。 よければ参考にしてください。 ダウンロード手順 Download をクリック Composer-Setup.exe をクリック Composerの インストーラ ーがダウンロードできたら、次はインストールです。 インストール手順 Nextをクリック XAMPPフォルダ内の PHP が選択されていることを確認しNextをクリック プロキシサーバーを設定する画面ですが、今回は何も選択せずにNextをクリック Installをクリック Nextをクリック Finishをクリック これでComposerのインストールは完了です。 Laravelのインストール いよいよLaravelのインストールです。 Laravelのインストールでは、先ほどインストールしたComposerを利用します。 Composerを利用するには、 コマンドプロンプト を利用します。 「Windodsキー」 + 「R」 のショートカットで「ファイル名を指定して実行」を表示し、「cmd」と入力することで コマンドプロンプト を起動できます。 コマンドプロンプト が起動できたら、以下のコマンドを実行してLaravelの インストーラ ーをダウンロードします。 Composer global require "laravel/installer=~1.1" ダウンロードには少々時間がかかりますが Updating dependencies(including require-dev) までが表示されていれば、コマンドは成功していますので、気長に待っていてください。 しばらくすると、ダウンロードが開始して Generating autoload files が表示されればLaravelのダウンロードは成功です。 Laravelのダウンロードに成功した際の表示 これで一通りは完了なのですが、最後にLaravelを利用するため 環境変数 PATHを設定する作業があります。 コントロールパネル→システムとセキュリティ→システム→システムの詳細設定 の順で開き、システムのプロパティを開きます。 システムのプロパティ画面 ウィンドウ下部に「 環境変数 」というボタンがありますので、クリックします。 環境変数 ウィンドウ下部のシステム 環境変数 のリストの中に「Path」という項目があると思います。 この項目を選択して「編集」をクリックします。 システム 環境変数 のPathを選択して編集をクリック 環境変数 名の編集が表示されたら「新規」をクリックして以下のパスを追加します。 C:\Users\ここには各ユーザの名前が入ります\AppData\Roaming\Composer\vendor\bin 新規をクリックしてパスを追加する Pathの追加が完了したら各画面をOKで閉じていきます。 ここまでの作業が完了したらLaravelプロジェクトを作成する準備が完了です。 Laravelプロジェクトの作成 それでは、いよいよLaravelプロジェクトを作成して、画面を表示していきましょう。 Laravelプロジェクトを作成する場所はどこでも構いませんが、今回はわかりやすいようにデスクトップに作成しましょう。 それでは、 コマンドプロンプト 上でデスクトップに移動します。 デスクトップに移動するコマンドは以下の通りです。 cd Desktop コマンドプロンプト 上でデスクトップに移動できたら以下のコマンドを実行して、Laravelプロジェクトを作成してください。 laravel new hellolaravel laravelコマンドにより、プロジェクトを構成する上で必要なパッケージをどんどん揃えてくれます。 ダウンロードには少々時間がかかりますので、気長に待ってください。 laravelコマンド実行後の画面 Application ready! Build something amazing.が表示されればインストール完了 もし、うまくいかない場合は、 環境変数 の設定が間違っている可能性がありますので、設定を見直していただくか、以下のコマンドでもLaravelプロジェクトの作成が可能です。 Composer create-project laravel/laravel hellolaravel --prefer-dist プロジェクトの作成に成功すると、デスクトップに「hellolaravel」という ディレクト リが作られているはずです。 では、プロジェクトがうまく作成できたか確認してみましょう。 以下のコマンドを コマンドプロンプト に入力してhellolaravelの場所に移動します。 cd hellolaravel hellolaravelに移動できたら、以下のコマンドを実行してください。 php artisan serve すると Laravel development server started: <http://127.0.0.1:8000> のような表示が現れます。 Laravel では 内部サーバを利用することができ、上記のコマンドで簡単に動作確認をすることができます。 内部サーバはPHP5.4以降に実装されたビルドインサーバー機能を利用しています。 さきほど実行した artisan というコマンドでは、ビルドインサーバを利用するだけでなく、Laravelで利用可能な様々な機能を実行することができます。 以下のコマンドで実行可能なコマンドを一覧で確認することができるので、ほかにどんなコマンドがあるか気になった方は是非調べてみてください。 php artisan list さて、少し脱線しましたが、 php artisan serve でビルドインサーバが起動できたら、ブラウザ上で動作確認をしてみましょう。 ブラウザを立ち上げて http://localhost:8000 にアクセスしてみてください。 すると、Laravelのホーム画面が表示されているかと思います。 正しく表示されていたら、Laravelの導入が成功した証拠です。 おめでとうございます。 http://localhost:8000 にアクセスした際の表示 ちなみに、起動したビルドインサーバを停止させたい場合は、 コマンドプロンプト で 「Ctrl」 + 「C」 を入力します。 おわりに 以上が、Laravelの導入方法です。いかがでしたでしょうか。 私も初めて自分で フレームワーク を導入してみましたが、特に失敗することなく導入することができました。 この手軽さが、Laravelが低コストで学習することができる所以であるかしれません。 Laravelの使い方については、参考書などで勉強することが効率的かと思いますが、いくつか紹介したい機能もありますので、またいつかの機会に紹介できたらなと思います。 以上です。長文失礼しました！ 参考資料 PHP フレームワーク Laravel入門 http://www.shuwasystem.co.jp/products/7980html/5258.html ソフトウェア フレームワーク https://ja.wikipedia.org/wiki/%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF XAMPP https://www.apachefriends.org/jp/index.html XAMPPのインストール方法 https://techacademy.jp/magazine/1722 Composer https://getcomposer.org/ Composer Wiki https://ja.wikipedia.org/wiki/Composer Laravel 5.3 インストール https://readouble.com/laravel/5.3/ja/installation.html エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 forms.gle イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ rakus.connpass.com