こんにちは 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

ラク スエンジニアのstrongWhiteです。 過去に「 WIP制限の大切さ 」の記事を書いているので、興味がある方はそちらも参考にしてくださいませ。 さて、今回は ラク ス大阪本店で開催している もくもく勉強会 のご紹介をさせていただきます。 もくもく勉強会とは 「勉強会」と付いていますが、共通のテーマをもとに議論したりはしていません。 何らかの課題や目的をもつ人々が集まって、それぞれの目的のもとにそれぞれが自由に取り組むこと を目的として活動しています。 そのため勉強の内容も参加者によってさまざまで、必ずしもITや技術に関係するトピックを扱っていません。 ↓↓↓勉強内容はこんな感じです↓↓↓ 業務と関係のない言語や フレームワーク の勉強をする プライベートサービスの開発をする 今後業務にぶっこんでやろうと思っている何かの予習をする 積ん読 を消化する 資格の勉強をする IoT的ななにか ペアプロ をする etc... 月イチで発表会も開催しており、勉強会の成果や、勉強会の活動とは全く関係なく発表したいことがある人が発表を行っています。 ここまで読んでいただいて分かる通り、割とゆるやか～な雰囲気で活動しております。 10月の発表会の様子 では実際に10月の発表会の様子を一部紹介したいと思います。 写真はオフィスのカフェスペースにぶら下がってる電球を Philips Hue v2 に差し替えて、 AWS IoT ボタン を押した際に電球の色を変えてみよーという試みを行っている様子です。 カフェスペースをいつもの白色から色鮮やかで華やかでスタイリッシュに変えてみようという感じです(笑) AWS IoT ボタン の入力をローカルサーバで受け取り、 Philips Hue v2 と同期することで電球の色が変わります。 次の写真はカフェスペースでいまいろんな意味で流行りの ドローン を飛ばしてみた様子です。 制御自体は Raspberry Pi で行っており、離着陸、旋回以外に一回転するなどのトリッキーな動きも実現しています。 写真の真ん中で紫色の光を放っているのがドローンです。今まさに一回転してます(笑) もくもく勉強会のよいところ 私が参加して良いなと思うところは 技術的興味の窓口(キッカケ)ができる ところかなと思います。 他のエンジニアの人が行っている勉強内容から興味を持ち、自分も学んでみようというキモチが生まれるイメージです。 勉強会では他のエンジニアの方と和気あいあいと話しながら楽しく学べるので、普段は話さない人ともコミュニケーションが盛んになり、 同時に技術的知識を蓄えられるので一石二鳥かなと思います。 おわりに ラク スでのもくもく勉強会を紹介しました。 エンジニアならば自由に技術の話題を見聞きするのは楽しいと思うはずです。 弊社ではこういった技術的勉強会に対してオープンなので、エンジニアとしては嬉しい限りです。 これからも続いていけるようにしていきます。 以上strongWhiteからのもくもく勉強会の紹介でした。 参考 Philips Hue v2 AWS IoT ボタン Raspberry Pi

はじめに はじめまして、新卒一年目のd_ shr と申します。 現在、業務では PHP を用いて開発を行っています。業務に入る前は大学在学中の研究開発や入社後の新人研修で Java を使っていました。 在学中に PHP を学習した経験はありましたが、業務で扱うことになると入出力のチェックなど セキュリティの観点には特に注意しなければいけないため、 プログラミング言語 の細かい仕様まで把握する必要があると思います。 そこで変数の扱いなどに PHP 独特のものを感じ、 Java とは違う仕様に戸惑うことがありました。 本記事では、 Java から PHP に転向した際に戸惑ったことを中心に、主に Java 経験者から見た PHP の特徴、注意点などをまとめていこうと思います。 PHP の学習を考えている方や PHP 初心者の方に少しでも参考になれば幸いです。 目次 はじめに 目次 PHPを使い始めて戸惑ったこと PHPの変数の扱い 暗黙的な型変換 変数のスコープ その他、気になったこと 配列の値渡し まとめ PHP を使い始めて戸惑ったこと 業務で実装をしていて1番戸惑ったことは、変数の扱いです。 セキュリティの観点から正しい値が格納されていることをチェックする実装することがありますが、その際に PHP の変数の扱いに戸惑いました。 PHP の変数の扱い まず、 PHP は変数の型がありません。 Java と比較すると、 PHP の大きな特徴であると思います。 変数に型がない PHP では、1つの変数に数値と文字列を格納することができます。 <?php $ hoge = 123 ; $ hoge = "hogehoge" ?> 他にも... 以下のような書き方ができることにも最初はすごく違和感を感じました。 <?php $ hoge = 1 ; $ hoge = $ hoge == true ? "true" : 0 ; ?> PHP 側で解釈してくれるので型の宣言をする必要がなく、記述量が減るメリットはあると思います。 (可読性を考えると、このように書くことはあまりないと思いますが) しかし、 PHP が勝手に型を合わせてしまうため、 Java のような型に厳密な言語を触った後では、変数の扱いに戸惑うことがよくありました。 暗黙的な型変換 暗黙的な型変換とは、 PHP が変数の型を勝手に変換してしまうことです。 例えば、以下のような変数の比較。 <?php $ a = 0 ; $ b = "hoge" ; if ( $ a == $ b ) { // true } ?> PHP で数値と文字を比較すると、文字を数値に変換しようとします。 文字列の最初の部分により値が決まり、有効な数値がない場合は0になるため、 このような結果になります。 PHP の仕様通りに変換され意図しない結果が得られることがあるため、 PHP での条件分岐を作る際には、変数の扱いには注意が必要です。 扱いに注意が必要な例 <?php if ( 0 == 0 ) // true if ( 0 == "0" ) // true if ( 0 == false ) // true if ( 0 == null ) // ture ?> これらは、型が正しいかどうか厳密な比較を行う 演算子 "＝＝＝"を使うことで解決できます。 しかし、厳密な比較を行わない、switch文も注意が必要です。 <?php switch ( $ hoge ) { case 0 : // hogeが0, "0",false, null,""などで実行される break ; case "0" : // ここは実行されない break ; } // 厳密な型変換を行う場合 switch ( true ) { case $ hoge === 0 : // hogeが数値の0のときだけ break ; case $ hoge === "0" : // hogeが文字列の"0"のときだけ break ; } ?> 型に厳密な プログラミング言語 の経験がある場合は、 変数の扱いで引っかかりやすいのではないかと思いました。 PHP で正しく変数の扱うためには、変数について仕様をしっかり把握し注意しないといけません。 変数のスコープ PHP の変数の扱いで戸惑ったことは暗黙的な型変換だけでなく、 変数のスコープでも経験があります。 変数のスコープとは、変数の有効範囲のことです。 PHP では、関数単位のスコープしかなく、 if文やループ中のみでしか使わないような変数を定義できません。 <?php $ flag = true ; if ( $ flag ) { $ value = "true" ; } else { $ value = "false" ; } Java ではif文の中で定義された変数は、if文のブロックの中だけで有効です。 PHP のスコープを把握していなかったときに、以下のような ソースコード を書いたことがあります。 <?php $ flag = true ; $ value = "" ; if ( $ flag ) { $ value = "true" ; } else { $ value = "false" ; } // $valueに空を入れたくなかったときはこっちで書いた $ flag = true ; $ value = "true" if ( !$ flag ) { $ value = "false" ; } スコープを正しく理解していないと可読性の低い ソースコード になってしまうこともあります。 スコープも プログラミング言語 で特徴があるので、 各言語ごとに把握しておかないといけないことだと思います。 その他、気になったこと 上記以外で、実装中に疑問に思って調べたことや違和感を感じたことです。 配列の値渡し Java のデフォルトは参照渡しですが、 PHP のデフォルトは値渡しです。 PHP でも参照渡しはできます。 値渡しの例 <?php $ array = [ 1 , 2 , 3 ] ; $ copy = $ array ; $ copy [ 1 ] = 5 ; print_r ( $ array ) ; print_r ( $ copy ) ; $array: Array ( [0] => 1 [1] => 2 [2] => 3 ) $copy: Array ( [0] => 1 [1] => 5 [2] => 3 ) 参照渡しの例 <?php $ array = [ 1 , 2 , 3 ] ; $ copy = $ array ; $ copy2 = & $ array ; $ copy [ 1 ] = 5 ; $ copy2 [ 1 ] = 5 ; print_r ( $ array ) ; print_r ( $ copy ) ; ?> $array: Array ( [0] => 1 [1] => 5 [2] => 3 ) $copy: Array ( [0] => 1 [1] => 5 [2] => 3 ) まとめ Java から PHP を扱うようになって戸惑ったことや違和感についてまとめてみました。 当初はこの違和感に嫌気が差していましたが、今では PHP に 洗脳され 慣れてしまいました。 PHP を学び始めた方や、次の新卒で入社される方に参考になればと思います。 また、同じような境遇の方に共感いただければ幸いです。 エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 forms.gle イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ rakus.connpass.com

はじめに 皆さんこんにちは，kuwa_38です．今年から ラク スに入社した新卒です．社会人になって色々と気づいたことはありますが，その1つが「エクセルって意外と使うな」ということです．テキストファイルや wiki などに書かれることもありますが，それらと同じかそれ以上にエクセルの資料は多いように感じます．そのため，エクセルを早く扱えて損はないと思っています． この記事ではエクセルのショートカットや便利機能について記載します．エクセルに向かう時間を短くし，皆さんの貴重な時間を少しでも確保する手助けになれば幸いです． はじめに 誰もが使える便利機能 クイックアクセスツールバー：よく使う機能をお気に入り登録する シートの選択：シートを効率的に探す 図形の編集を効率化する オブジェクトの選択：図形を一気に選択する 図形の編集：途中で図形を変更する 表やグラフの作成を効率化する 選択セルの■をダブルクリック：表の一番下までオートフィルを掛ける フィル機能：数千行の数値を作成する 右クリックのオートフィル：書式のみコピー 「Ctr + *」：表を選択する 「F11」：棒グラフのグラフシートを作成する セル移動と入力を効率化する 「tab」：表の入力を効率化する 「Ctr + 矢印キー」：セル移動を効率化する 「F2」：編集と入力を切り替える 「F4」：参照先の「$」を付ける/はずす 「Ctr + :」：現在時刻を入力する 「Ctr + ;」：現在の日付を入力する おわりに 誰もが使える便利機能 クイックアクセス ツールバー ：よく使う機能をお気に入り登録する よく使うツールをお気に入り登録できる機能です． クイックアクセス ツールバー 登録方法： 登録したいツールの上で，右クリック＞クイックアクセス ツールバー に追加で登録できます． クイックアクセス ツールバー への登録 小技 クイックアクセス ツールバー に追加した機能は，マウスを使わずとも，Alt(F10) + 数字(左から順に自動で割り振られます)で使うことができます．自分の登録した機能の数字を覚えておくとより早く作業できます． ショートカットキーでアクセスする方法 リボン折りたたむと ツールバー が非表示になり，より広く画面を使うことができます．多くの機能を使わない，かつ，画面を広く使いたい方は，使う機能をクイックアクセス ツールバー に登録してピン留めをはずすと良いでしょう． 　 リボンを折りたたむ／結果： ツールバー が非表示になる シートの選択：シートを効率的に探す 図のようにエクセルの左下の箇所(「◁ ▷」の所)で右クリックを押すとシート名の一覧が表示されます． シートの選択 図形の編集を効率化する オブジェクトの選択：図形を一気に選択する 複数の図形の移動や編集に便利な機能です． 手順： 1. ホーム＞「編集」のグループにある「検索と選択」＞「オブジェクトの選択」 2. 選択したい範囲をドラック オブジェクトの選択メニュー 　 2.選択範囲をドラック／結果：ドラックした範囲内の図形が全てアクティブになる 図形の編集：途中で図形を変更する 変更したい図形を選択 「書式」＞「図形の編集」＞図形を選択 図形の変更／結果 表やグラフの作成を効率化する 選択セルの■をダブルクリック：表の一番下までオートフィルを掛ける 手順： 1. オートフィルを掛けたい列の起点となるセルにおいて，■の上にマウスカーソルを置く(「＋」が表示されます．) 2. 1の状態でダブルクリック 　 ■をダブルクリックでオートフィル／結果 フィル機能：数千行の数値を作成する ID1~3000まで作りたいといった時，ドラックしてオートフィルを掛けると時間がかかります．しかし，前項の「表の一番下までオートフィルを掛ける」は他の列が入力済みでないと使えません．そんなときに使える機能です． 手順： 1. 起点となるセルに初期値を入力 2. ホーム＞「編集」のグループにある「フィル」＞連続データの作成 3. メニューに増分や停止値を設定しOK(図の場合，列(縦)方向に1から3000まで1ずつ値を入力します) 1,2.初期値の入力と連続データの作成 　 3.増分等の設定／結果 右クリックのオートフィル：書式のみコピー 手順： 1. 図のようにオートフィルを掛けたい列の起点となるセルにおいて，■の上にマウスカーソルを置く(「＋」が表示されます.) 2. 右クリックを押したまま書式をコピーしたい分だけドラック 3. メニューの「書式のみのコピー(フィル)」を選択(書式がコピーされます．) 　 1.参考にする書式のセルを選択/2,3.ドッラック，書式のみコピー 結果 「Ctr + *」：表を選択する Ctr + *で表を選択できます． 表を選択する 「F11」：棒グラフのグラフシートを作成する 手順： 1. 表を選択 2. F11 　 表の選択・F11／結果 セル移動と入力を効率化する 「tab」：表の入力を効率化する tabを押すと1つ右のセルへ移動します．また，Tabを押した後にEnterを押すと，初めにtabを押したセルの1つ下へ移動します． Tab使用時のセルの移動 「Ctr + 矢印キー」：セル移動を効率化する 表の一番下に移動する時などに重宝するショートカットです． アクティブセルと移動方向の1つとなりのセルの内容で挙動が変わります． Ctr + 矢印：移動方向に値が入力済み Ctr + 矢印：移動方向のセルが空セル アクティブセル 移動方向の1つとなりのセル 結果 値が入力済み 空セル 値が入力済みのセルまで移動 値が入力済み 値が入力済み 値が入力済みの終端のセルへ移動 空セル 空セル 値が入力済みのセルまで移動 空セル 値が入力済み となりのセルに移動 「F2」：編集と入力を切り替える アクティブなセルでF2を押すと「編集モード」と「入力モード」を切り替えることができます． 編集モード： 矢印キーを押すと，アクティブなセルの中で文字カーソルが移動します．図のように打ち間違いを修正したい時などに便利です． 例えば，B3セルに「rakkkus」と入力後「←」を押すと，B3セルの中でカーソルが移動します． 編集モード：「←」を押すとセル内で文字カーソルが移動 入力モード： 矢印キーを押すと，他のセルに移動します． 例えば，B3セルに「rakus」と入力後「←」を押すと，A3セルに移動します． 入力モード：「←」を押すと左のセルに移動する 「F4」：参照先の「$」を付ける/はずす F4を押すことで「=A1」といったセルの参照を「=$A$1」,「=A$1」，「=$A1」,「=A1」と切り替えることができます． =sum($D$3:$G$8)のようにD3にもG8にも「$」を付けたい場合： 図のように，範囲を入力した後にF4を押すことで「$」の付ける/付けないを変更できます． 　 全体に「$」を付ける =sum($D$3:G8)のようにD3のみに「$」を付けたい場合： 前項のF2を利用します． 1. 範囲を入力(「=sum(D3:G8」の状態) 2. F2キーで編集モードに変更 3. D3に文字カーソルを合わせる 4. F4を押す 　 一部に「$」を付ける 「Ctr + :」：現在時刻を入力する 「Ctr + :」で現在時刻を入力できます. 「Ctr + ;」：現在の日付を入力する 「Ctr + ;」で現在の日付を入力できます． 表示を変更したい場合： (図は「2017/10/29」 ではなく 「10月29日」 にする場合) 1. 表示型を変更したい範囲を選択 2. 右クリック＞セルの書式設定 3. 分類＞日付＞「種類」を選択 　 　 表示の型を変更する おわりに この記事ではエクセルの便利機能やショートカットキーについて，私の主観で使いそうなものを15個紹介しました．この記事で紹介したことが，時短や作業の効率化につながれば幸いです． また，エクセルは本当に様々なことができます． ここで紹介したこと以外にも便利な機能やショートカット(さらに言えば，関数やマクロ)が存在するので，興味を持った方は検索してみてください．

初めまして、 ラク スエンジニアのnerobluebrosです。 今回は配車サービスの「 Uber 」について書きます。 ラク スは日本以外に ベトナム にもオフィスを構えており、 ベトナム のエンジニアチームの育成と課題改善に年に数回 ベトナム に出張します。 私も2度行ったのですが、2回目に初めて Uber (ウーバー)を使ったところ、とても便利だったので、そのご紹介です！ Uberってなによ？ 車が超快適 クレジットカードの支払いが超便利 話さなくても良いのが超便利 まとめ おまけ 参考 Uber ってなによ？ Uber はタクシーの配車サービスで、 スマホ のアプリでタクシーを呼び出して利用します。実際にタクシーを利用するまでの手順は以下の通りです。 スマホ で行き先を指定してタクシーを呼び出す よさそうなタクシーがいたら待ち合わせ場所を指定 行き先と金額を確かめて、確定する これだけ。 待っているときはどれくらいで到着するかアプリからわかります↓ キターーーーー↓ 支払いは現金かクレジットカード。クレジットカードは情報をあらかじめアプリに登録しておきます。 残念ながら日本では規制とタクシーの二種免許が必要なため、ごく一部の地域を除いて Uber は使えません。 次からは実際に使ってよかった点3つ、紹介します！ 車が超快適 ベトナム のタクシーも日本のタクシー同様「いかにも！」という業務用の車ですが、 Uber では普通の乗用車がやって来ます。車に関してはハズレ無し。めっちゃ良い。実際、フォードの SUV が来たときもありました！ 実際に乗ったフォードの SUV ↓ ベトナム のタクシーは匂いが嫌だったり、タクシーの床が泥や砂で汚れていたりするので、 きれいな車を利用できる のはすごくいい。 クレジットカードの支払いが超便利 前述の通り、 Uber は乗る前に支払い方法(現金 or クレジットカード)を選択して利用します。現金の場合は目的地に着いたら支払う。これは万国共通、普通のタクシーと一緒。 クレジットカードで支払う場合は、ここが便利なのですが Uber が別処理でやってくれます。なので 運転手にクレジットカードを渡す必要すらなし！ 目的地に着いたら「カム・オン！」( ベトナム語 でありがとうの意味)と言って 車から降りるだけ！！ ところで、 ラク スは クラウド サービスを提供していますが、その中に経費精算のサービス「楽楽精算」があります。実は ラク ス社内でも楽楽精算を使っているのですが、楽楽精算の便利機能のひとつに クレカデータの連携 があります。 なので、会社決済のカードを登録しておいてカードで支払えば精算の手間も省ける！クレジットカードは複数登録できるので、会社の経費で精算ができるときは会社のカード、プライベートは個人のカードで使い分けできます！ 閑話休題 Uber では乗る前にあらかじめ料金が決まるので ボッタクリに遭う心配は皆無 ですし、さらにクレジットカードでの支払いにしていれば キャッシュレスになるので、超便利 です！ しかも・・・運賃も通常のタクシーと比較して20%から30%程度安い！これは利用しない手は無いですぜ、ダンナ。 話さなくても良いのが超便利 一般的に ベトナム人 は ベトナム語 以外は通じません。それはタクシーの運転手といえども同じ。なので、行き先を伝えるのにひと苦労。ホンマに伝わっているか、行きたいこところに連れて行ってくれるか？ホンマに不安になります。 でも、 Uber なら乗る前に行き先を指定しているので、 運転手に行き先を伝える必要はありません！ しかも、今どこを走っているかが、アプリの画面を見ればわかるので不安になることはありませんでした。 行き先に向かっているときのアプリの画面↓ この「話さなくても良い」というのはほんとにストレスを減らしてくれる。っていうかなくしてくれました。 まとめ 良いことばかり言いましたが、悪いところもあります。それはたまに ハズレの運転手に当たる ということ。 私は前回の出張で合計5回 Uber を利用しましたが、最後の5回目でハズレを引いてしまいました。 車の運転が初心者みたいで「慣れていない」というのががんがん伝わってきて「これは事故るな」と。 幸い事故に遭うことはありませんでしたが、このときはさすがに「まじかー」って思いました。 Uber は欧米ではいろいろ防犯上の問題が発生しているみたいですが、 ベトナム ではそんな印象は受けませんでしたし、実際にどこかに連れていかれそうになるとかはありませんでした。前述の通り、アプリでどこを走っているか、目的地に向かっているかわかるので、一定以上の「安心感」があります。 さていかがでしたでしょうか？ Uber の便利なところが伝わりましたでしょうか？？日本では使えない Uber ですが、もし、海外で利用する機会があれば使ってみてください(あ、でも、利用される方は自己責任でお願いしますね)。 おまけ ラク スでは 中途採用 を行っています。 ベトナム のエンジニアと一緒に自社サービスの開発を行ったり、 ベトナム に出張も場合によってはあります。 気になる方は下記をご覧になってください。 ラク ス 中途採用 ページ トップページ | 株式会社ラクス 中途採用 もちろん新卒採用も行っています。 ラク ス新卒採用ページ http://fresh-recruit.rakus.co.jp/ 参考 以下記事に出てきた企業のサイトです。 ・ Uber ・ 楽楽精算 ・ ラクスベトナム

はじめに 皆さん、こんにちは、今年の4月に入社したプログラミング未経験者のr_yxkxrx13です。 プログラミング超初心者！！ という方は、プログラミングの学習を始める前に何を準備して取り組めば分からない…ということが多いと思います。 プログラミング未経験である私が今まで取り組んだプログラミングの学習方法を紹介したいと思います。 はじめに プログラミング学習方法 コンピュータとネットワークの基礎学習サイト プログラミング学習サイト 書籍学習 プログラミング学習の取り組み方 終わりに プログラミング学習方法 私が今まで取り組んできたプログラミング学習方法は、「コンピュータ基礎／ネットワークの基礎学習サイト」、 「プログラミング学習サイト」、「書籍学習」の3つです。 学習サイトとは、ブラウザ上に無料で気軽に利用できるサイトのことで、インターネットにたくさん出ています。 まずはそのようなサイトを利用して学習を始めるのが良いと思います。 また書籍学習で基礎知識の理解を深めながら、プログラミングの練習をすると良いと思います。 私が利用した学習サイトと書籍について説明します。 コンピュータとネットワークの基礎学習サイト プログラミング学習の初めに「コンピュータ基礎／ネットワーク」を学習しました。 プログラミングの基礎なので、基礎知識と概念を理解しておくと良いと思います。 【5分で覚えるIT基礎の基礎】コンピュータの仕組み---目次 | 日経クロステック（xTECH） 「コンピュータの仕組み」をテーマに基礎知識の全体像と概要を分かりやすく解説されています。 初心者のためのネットワーク技術 - ネットワークエンジニアを目指して 「ネットワーク技術」をテーマに基礎知識を分かりやすく解説されています。 プログラミング学習サイト プログラミングの参考本では、決まった書き方やコードの意味がたくさんあり、全部覚えられない…。 とつまづいてしまうことはあると思います。 私の経験の1つですが、正直に言って、全てを一気に覚えることは無理があります。 逆に理解度が低くなってしまうので意味がありません。 まずプログラミングを書く練習をたくさんすると、自然に覚えられるようになってきます。 また1行ずつコードの意味を コメントアウト してみると、理解が深まってきます。 そこで、ブラウザ上で実際にプログラミングを作る環境と似た環境で練習できるサイトを紹介します。 Progate （画像出典： Progate ） Progateは、ブラウザ（インターネット）上でプログラミングが学べるサービスです。 イラストを中心に分かりやすく解説されたスライドで、自分のペースに学習や復習ができます。 また以下のようにブラウザ上でコードを書いて結果を確認することができます。 複雑な環境設定などの準備は不要なので、気軽にプログラミング学習を始めれます！ 初心者レベルから実践レベルまで対応されていて、 さらにレッスンの種類もたくさんあり、分かりやすく楽しみながら学べるサイトです。 ドットインストール （画像出典： ドットインストール ） ドットインストールは、約3分間の短いレッスン動画でプログラミングを学べるサイトです。 動画の音声が聞き取りづらくても動画画面の下に字幕があるので、見返すことができます。 また右側に学習メモの機能があり、新しい知識や疑問をメモすることができます。 動画を見ながら、実際に作ってみることを重点において学習すると良いでしょう。 CodeResume （画像出典： CodeResume ） CodeResumeは、ブラウザ上でプログラミングが学習できるプラットフォームです。 練習問題の画面では、以下の図のように解答欄にコードを書き込んで、 コンパイル と実行で結果を確認できるようになっています。 またタイマー機能も付いているので、時間を意識して考えて解く力が身についてくると思います。 書籍学習 学習サイトだけでは学習範囲が限られていますが、書籍での学習も有効な学習方法だと思います。 私が利用した書籍の中からオススメの書籍を紹介します。 スッキリわかる Java 入門 第2版 (スッキリシリーズ) スッキリわかるJava入門 第2版 (スッキリシリーズ) 作者: 中山 清喬 , 国本 大悟 発売日: 2014/08/07 メディア: 単行本（ソフトカバー） 本書は、 Java の基本を丁寧にイラストと同時に説明されていますので、非常にわかりやすい内容になっています。 Java の複雑な開発準備や必要なツールって分からない…。という方、安心して下さい。 Webブラウザ を持つ携帯電話やパソコンで、準備された クラウド 開発実行環境「dokojava」を使って、手軽にプログラミングの練習ができるようになっています。 また「dokojava」の他に、実際に開発現場で使われている「Ecplise」のインストール方法や使い方まで書かれています。 Java の学習を始める時は、まずこの本を読んでおくことをオススメします！ スッキリわかる Java 入門 実践編 第2版 (スッキリシリーズ) スッキリわかる Java入門 実践編 第2版 (スッキリシリーズ) 作者: 中山 清喬 発売日: 2014/09/22 メディア: 単行本（ソフトカバー） 本書は、 Java 入門の実践編で開発や設計手法、ツールの知識について、分かりやすく解説されています。 Java の応用技術まで紹介されているので、 Java の基本をマスターした方は、さらにステップアップで学びたい時に読むことをオススメします！ Java ルールブック 〜読みやすく効率的なコードの原則 Javaルールブック　～読みやすく効率的なコードの原則 作者: 大谷 晋平 , 米林 正明 , 片山 暁雄 , 横田 健彦 発売日: 2011/02/15 メディア: 単行本（ソフトカバー） コードの書き方について大変参考になる本です。 正しい書き方と間違った書き方の例を挙げて分かりやすく解説されています。 正しいコードの書き方を身につけると、シンプルで見やすいコードが書けるようになります。 リーダブルコード リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice) 作者: Dustin Boswell , Trevor Foucher 発売日: 2012/06/23 メディア: 単行本（ソフトカバー） Java ルールブックと同様にコードの書き方について、さらに具体的に丁寧に解説されています。 プログラミング学習の取り組み方 ここまでは学習サイトや書籍を紹介してきましたが、 以下については私が有効だと感じた具体的な学習方法と心構えについて説明します。 学習内容を読むだけにしない 学習内容を読んで満足するだけでは理解が深まりません。 学習内容を読んで実際に操作して動作を確認してみる、疑問になったことを納得するまで深く掘り出すことが大切です。 コードを1行1行にコメントをつける プログラミングの経験が長い方が書いたコードは、必要な情報だけコメントしています。 プログラミング未経験の方は、まだコードの意味や書き方に慣れていないので、 まずコードの意味を理解することから始めると良いでしょう。 慣れてきたら、少しずつコメントを減らして、コードを読める・書けるようにすると良いと思います。 コードが完成したら デバッグ をする プログラムを実行して結果が正しくても完成とは限らないです。 本当に問題がないかどうか、 デバッグ をして修正箇所がないか確認をするように心掛けましょう。 処理の流れを把握できるようになってきたら、 デバッグ 機能に頼らず、自分の目で確認してみましょう。 エラーの原因と対策方法を見つける プログラムのバグ（故障・エラー）を見つける力と対策方法の知識を身につけることが大切です。 例えば、プログラムが完成してバグに気付かないまま、共同者のプログラムを合わせると、 トラブルを起こしてしまう可能性があります。 このようなトラブルが起きた時、どこにバグがあるか、どのように対策をすれば解決できるか、 実際にプログラミングの練習でテストしてみると良いでしょう。 またプログラムを作成する時は、バグがないプログラムを完成するように心掛けて書くようにしましょう。 サンプルプログラムを鵜呑みにしない コードが書けない…という方は、インターネットや書籍にサンプルプログラムを参考にしていますが、 丸ごとコピーして修正するやり方は良くないことです。 サンプルプログラムを書き写して目的に合わせて修正し、動作の理解を深めることが良いでしょう。 プログラミングの練習をできるだけ毎日やる スポーツと同じように、プログラミングを書く練習を毎日取り組むと、自然にコードの意味や書き方が分かるようになってきます。 最初は慣れなくて大変ですが、書籍や学習サイトを参考にしながら、書く練習をすると良いでしょう。 プログラミングのツールを試してみる プログラミングのツールは、代表的なものだけではなく、あまり知られていないものや最近新しくできたツールを 試しに使ってみて比較することも大切です。 プログラミングの進化が続いているので、新たな知識をたくさん吸収すると良いでしょう。 簡単なものを開発してみる 私の場合は、HTML／ CSS の学習をしながら、自分のホームページを制作しました。 学習で学んだことを活かして、ホームページやアプリを開発してみると、楽しくやりがいがあると実感できます。 プログラマー と情報交換をする プログラミング経験者は、技術情報やプログラミングの学習などたくさんの情報を持っています。 疑問や悩みまで相談できるので、 プログラマー の仲間を作ることも大切です。 終わりに プログラミング未経験者向けの学習方法と取り組み方を紹介しました。 紹介した学習方法の他にもたくさんありますので、 自分に合った方法を見つけて、是非プログラミングの学習を始めてみてください！