はじめに こんにちは！ FM_Harmonyです。 Rakus Developers Blog では3回目の投稿になります。 ↓ 前回の記事はコチラ tech-blog.rakus.co.jp 先日、React Nativeを使った スマホ アプリ開発 についての勉強会に参加しました。 なので、 今回はその時学んだこと + 後から自分で調べたこと についてまとめました。 この記事が、「Reactやってみたいなー」という方の参考になれば嬉しいです。 はじめに 前置き〜スマホアプリの分類 React Native とは？ Expoとは？ Hello World をやってみる 環境構築 プロジェクト作成 サンプルを確認してみる Hello World! 困ったところ アプリが起動できない！ 実機で動かせない！ 感想 前置き〜 スマホ アプリの分類 いわゆる スマホ アプリは大きく分けて2種類あります。 *1 Webアプリ ブラウザ上で動作するアプリケーションです。 HTMLや CSS などを使って開発します。 ネイティブアプリ スマホ 上で直接動作するアプリです。 例えば、 Android 向けアプリだったら Android Studio を使って開発します。 今回お話しするのは、 ネイティブアプリ の開発についてです。 React Native とは？ React Nativeとは、ネイティブアプリを JavaScript とReactでビルドするための フレームワーク です。 素の JavaScript のみで アプリ開発 を行うことができます。 特徴としては、アプリケーションの更新を即座に反映させることができることがあります。 ビルドしなおさなくても、読込みし直すだけで変更を確認することができるので開発速度の向上につながります。 Expoとは？ 端的にいえば、React Nativeでの開発をサポートするツールです。 博覧会じゃありません もともとは Exponent という名前だったそうです。 Expoの特徴はいくつかありますが、一つは基本的に iOS / Android アプリの区別をすることなく開発を進められる事が挙げられます。 Expoはネイティブ層を隠しているので、 両者の違いを意識しなくて済む ・・・らしいです。 さらに、 実機での検証が簡単に行える ことも特徴の一つです。 これについては、またあとで触れたいと思います。 Hello World をやってみる それでは、Expoで Hello World をやってみましょう。 今回のゴールは、 スマホ の画面に Hello World! と表示させることです。 なお、作業は macOS で行っています。 Windows でもできますが、説明は省略します。 環境構築 まず、開発環境を構築しましょう。 Expoで開発を行うためには、以下のものが必要になります。 npm（もしくはyarn） Node.js watchman create-react-native-app この内、watchmanとcreate-react-native-appについて説明します。 watchman これがないとアプリケーションを動かすことができません。 Homebrewでインストール可能なので、やっておきましょう。 $ brew install watchman create-react-native-app プロジェクトを作成する際に必要です。 こちらはnpmでインストール可能です。 インストールの際には、グローバルオプションを付けておきましょう。 $ npm install -g create-react-native-app プロジェクト作成 では、次にプロジェクトを作成します。 次のコマンドを実行すると、カレント ディレクト リ直下にプロジェクトのひな形が作成されます。 $ create-react-native-app HelloWorldApp サンプルを確認してみる プロジェクトが完成したら、すぐに動かすことができます。 先ほど作成されたプロジェクトの ディレクト リへ移動して、以下のコマンドを実行してみます。 ↓npm の場合 $ npm start ↓yarn の場合 $ yarn start 起動に成功すると、大きな QRコード が表示されると思います。 ↓ QRコード が表示されています（読み込みできないように一部塗りつぶしています） Expoではこの QRコード を スマホ 上で読み込むことで、簡単に動作確認を行うことができます。 ただし、 QRコード の読み込みには専用のアプリケーションが必要です。 iOS なら Expo Cliant 、 Android なら Expo をそれぞれマーケット上で検索すればすぐ見つかるはずです。 では、今回は iOS で QRコード を読み込んでみましょう。 アプリの読込後に、画像のような画面が表示されていれば成功です。 ↓ アプリの画面（諸事情により エミュレータ 上で動かしています） Hello World ! 上の画像にも書いてありましたが、アプリケーションは App.js を編集することで変更が可能です。 そこで、アプリを読み込んだまま App.js を開いてみましょう。 すると、 <View> ... </View> で囲まれたブロック内に、 <Text>...</Text> のようにタグで囲まれたコードがあるはずです。 この部分を次のように 変更して保存 します。 ↓ ... の部分は変更しないでください <View style = { ... } > <Text>Hello World!</Text> </View> 実機を確認すると、画面が自動的に変更されたことが確認できます。 ↓ Hello World ! になっている！ ということで、Expoで Hello World ができましたね！ 今回は簡単な例でしたが、Expoを使うと簡単、 かつお 手軽に スマホ アプリ開発 ができることが分かりました。 困ったところ 今回、この`Expoを触ってみて幾つか困った点があったので紹介します。 アプリが起動できない！ プロジェクトの作成も完了し、さてどんな風に動くのかなとアプリを起動させたところ・・・ ↓こんなエラーが出ました。 そこで調べた結果、watchmanが必要なことを知ったのでした。 実機で動かせない！ 簡単に実機で動作確認できることがExpoの売りですが、自分の場合実機での確認ができませんでした。 実機で動作確認するためには、作業用PCと実機が同じネットワークにある必要があるのですが、どうもそこのところで上手くいかなかったようです。 ↓ QRコード を読み込んでも、こういう画面が出てきてしまう。 なので、そういう場合は エミュレータ で動作確認しましょう。 macOS の場合、 XCode に付属している エミュレータ を利用することができます。 アプリケーションを立ち上げた後に、 i ボタンを押せば iOS の エミュレータ 上で動作確認が行えます。 ただし、その場合は xcode-select -s /Application/Xcode.app みたいな感じで、コマンドを実行しておく必要があります。 これは、 XCode の コマンドライン ツールを指定しているらしい *2 です。 感想 なんといっても動作確認の手軽さがすごく便利です。 ビルドのわずらわしさから解放されるだけで、かなりサクサク開発が進むなあと感じました。 あと、今回は残念ながらできませんでしたが、実機での動作確認が QRコード を読み込むだけだというのもお手軽で魅力的です。 私が今回のテーマについて勉強しようと思った理由は、「Reactってよく聞くし始めてみようかな」くらいの軽いものでした。 なので、こういう手軽なところから アプリ開発 に親しみつつ、Reactについて勉強することで効率よく学習できそうだと思いました。 *1 : この他にもハイブリッドアプリと呼ばれる、両者を掛け合わせたものもあります *2 : この辺りはまだ勉強中です・・・

はじめに 新卒1年目エンジニアのkasuke18と申します。 先月に開催された社内の技術交流会 ビアバッシュ の発表の中で MeCab について触れた発表がありました。 ※ ビアバッシュ...？ という方はこちらをご参照ください。 その MeCab に興味をもちましたので、今回の記事では MeCab を Windows に導入して使ってみます。以下は私の環境でインストールしたときのものなので、 ディレクト リなどを随時読み替えてください。 はじめに まずはサンプル MeCabとは MeCabの導入…の前に Windows Subsystem for Linuxとは Windows Subsystem for Linuxの導入 MeCabの導入 新語対応の辞書(mecab-ipadic-NEologd)を使う mecab-ipadic-NEologdの導入 MeCabをPHPから使用する おわりに 参考文献 まずはサンプル 形態素解析 とはどのようなものかを確認するサンプルを作成、HEROKUにデプロイして 公開しています 。まずは触って動かしてみましょう! MeCab とは MeCab は オープンソース の日本語の 形態素解析 エンジンです。（ 公式ページ ） OSは Unix 系でも Windows でも使用可能ですが、私用のPCが Windows のため、今回は Windows に MeCab を導入しました。 MeCab の導入…の前に Windows に MeCab を導入するといっても、単純に Windows に入れるというわけではありません。もちろん公式には Windows 用 インストーラ が用意されているので、単に利用するだけならそれを使用することが一番早いです。 しかし インストーラ でインストールされる標準の辞書が古く、新しい単語に弱いので、より適切に 形態素解析 を行うなら新語に対応した辞書が必須です。その辞書の導入が インストーラ からインストールした場合は難しいので、今回は別の手段を用いました。 それが Windows Subsystem for Linux というものです。 Windows Subsystem for Linux とは 簡単に言うと、 Windows上でLinuxが動かせるよ！ といったものです。 対応する Linuxディストリビューション は Ubuntu や OpenSUSE 1 などです。 （公式DOC参照） 今回は使用する ディストリビューション として Ubuntu を選択しました。 Windows Subsystem for Linux の導入 こちらのQiitaの記事 が詳しいので、そちらをご確認ください。 MeCab の導入 さて、前置きが長くなってしまいましたが、いよいよ MeCab の導入です。 といっても特段難しい手順ではありません。以下のコマンドを実行すれば導入できると思います。 sudo apt update sudo apt upgrade sudo apt install make automake autoconf autotools-dev m4 mecab libmecab-dev mecab-ipadic-utf8 導入したので動作確認を行います。以下のコマンドで MeCab が実行できます。 mecab 正しく実行されると入力モードになりますので、何かを入力し、改行してみましょう。改行で 形態素解析 が行われ、結果が表示されます。 図1. MeCab コマンドを実行 新語対応の辞書( mecab -ipadic-NEologd)を使う 前述のとおり、標準の辞書は古いので新語に対応していません。新語に対応した辞書が必要で、その辞書の一つに mecab-ipadic-NEologd というものがあります。 mecab -ipadic-NEologdは はてなキーワード のダンプデータなどをもとに毎週月曜日と木曜日に更新されます。 はてなキーワード の単語の豊富さを考えると、業界用語などの特化した単語を除き、基本的には mecab -ipadic-NEologdで事足りるでしょう。 mecab -ipadic-NEologdの導入 GitHub のREADMEに丁寧に手順が記載されています。さらに英語だけでなく、 日本語で書かれたREADME も用意されているので、至れり尽くせりです。 以下にコマンドのみ記載しておきます。 sudo apt install git make curl xz-utils file sudo sed -i -e 's%/lib/mecab/dic%/share/mecab/dic%' /usr/bin/mecab-config git clone --depth 1 https://github.com/neologd/mecab-ipadic-neologd.git ./bin/install-mecab-ipadic-neologd -n -a 導入したので動作確認を行います。以下のように MeCab コマンドの -d オプションを使用することで mecab -ipadic-NEologdを辞書とした 形態素解析 を実行できます。 mecab -d /usr/share/mecab/dic/mecab-ipadic-neologd 正しく実行されると入力モードになりますので、何かを入力し、改行してみましょう。改行で 形態素解析 が行われ、結果が表示されます。 図2. mecab -ipadic-NEologdを使った MeCab コマンドの実行 MeCab を PHP から使用する 上記の手順で MeCab を用いた 形態素解析 が可能になりましたが、 PHP などの各種 スクリプト言語 からの使用するには面倒です。そこで各種 スクリプト言語 向けに バインディング されたものがありますので、それを利用します。今回は PHP を使用しますが、公式には用意されていないので、この php-mecab を利用します。 php - mecab 導入のため、以下のコマンドを実行しましょう。 cd /usr/local/src/ git clone https://github.com/rsky/php-mecab.git cd php-mecab/mecab phpize ./configure --with-php-config=/usr/bin/php-config --with-mecab=/usr/bin/mecab-config make make test make install 導入後、 PHP で使用するためにextentionファイルを作成します。 echo 'extention=mecab.so' > /etc/php/7.0/cli/php.d/mecab.ini これで PHP から MeCab を使用するための準備が整いました。サンプルコードを以下に示しますので実際に動かしてみましょう。 <?php dl ( 'mecab.so' ) ; $ option = array ( '-d' , '/usr/share/mecab/dic/mecab-ipadic-neologd' ) ; $ t = new \MeCab\Tagger ( $ option ) ; $ str = 'すもももももももものうちにももはいくつあるでしょう' ; echo $ t -> parse ( $ str ) ; エラーなく実行できると以下のような結果が得られます。 図3. mecab - php を用いたサンプルコードの実行 おわりに この記事では Windows に MeCab を入れて PHP で動かすまでの手順を紹介しました。私が試してみたときは php - mecab を入れるときに詰まりましたが、 MeCab 本体を入れるところまでは全く詰まらずに進められました。 PHP などで使うことを考えず気軽に 形態素解析 を行うという点では、 MeCab はちょうどいいのかなと感じました。 参考文献 MeCab : Yet Another Part-of-Speech and Morphological Analyzer http://taku910.github.io/mecab/ Docs: Windows Subsystem for Linux Documentation https://docs.microsoft.com/en-us/windows/wsl/about Windows Subsystem for Linux をインストールしてみよう！ https://qiita.com/Aruneko/items/c79810b0b015bebf30bb mecab -ipadic-NEologd : Neologism dictionary for MeCab https://github.com/neologd/mecab-ipadic-neologd php - mecab : MeCab binding for PHP https://github.com/rsky/php-mecab よろしければこちらもご一読ください。 「openSUSE」で始める初めてのLinuxデスクトップ ↩

はじめに こんにちは、rs_tukkiです。 毎回毎回タイトル絵クソだせぇのどうにかしたい 最近、会社の内外問わず、 スマホ アプリの話題が増えてきたように思います。皆さん仕事が仕事なのでそういった話に敏感なのかもしれませんが、手軽に持ち運べる スマホ で手軽に使える形というのが、これから(というより既に) アプリ開発 の主流になっていくことでしょう。 ですが、 スマホ アプリの開発はそう手軽にはいきません。言語は新たに習得しなければならなかったり、それを機種ごとに開発しなければならなかったりと、今までWEBでアプリを開発してきた人にとっては地味にハードルが高いのではと思います。 そこで今回は、それらの問題を一気に解決できる ハイブリッドアプリ と、その開発環境である 「 Monaca 」 を使って実際にハイブリッドアプリを作ってみるお話をします！ はじめに ハイブリッドアプリとは？ メリット クロスプラットフォーム UIの自由度が高い Webアプリの開発経験があれば開発が可能 デメリット マイナーなネイティブ機能の利用が難しい ネイティブアプリと比較すると動作が重い Web技術でネイティブな機能を使ってみた アカウント取得 プロジェクトの作成 プラグインの有効化 APIキーの取得 コード作成 index.html script.js 実行！ おわりに 参考 ハイブリッドアプリとは？ まず一般的に、 スマホ 上で動作するアプリは「ネイティブアプリ」と「Webアプリ」に大別されます。 細かい違いはありますが、大まかにいうと 端末上で動作するアプリ がネイティブアプリ、 Web上で動作するアプリ がWebアプリとなります。 そして、ハイブリッドアプリ、というのは聞きなれない言葉かと思いますが、ネイティブで動作する「WebView」というソフトを使いつつ、コンテンツ自体はWeb上のものを読み込む形で実現するアプリのことを指します *1 。 Webアプリの豊富な情報量と、ネイティブアプリの豊富な機能とを組み合わせた良いとこどりのアプリ、それがハイブリッドアプリなのです。 メリット クロスプラットフォーム 現在流通している スマートフォン は iPhone か Android のふたつですが、ネイティブアプリでは 前者がswift、後者は Java での開発が一般的です。つまり、両方に対応する スマホ アプリを開発しようとした場合は、全く異なる2種の言語を学ぶ必要があり、これが開発のハードルを高くする一因となっていました。 ですが、というよりハイブリッドアプリは iPhone にも Android にも標準で組み込まれているWebViewというソフトを使い、 Webページを読み込んで表示するような形で処理を実現する ため、 「 HTML5 」、「 CSS 」、「 JavaScript 」の3つの言語で、どちらにも対応できるネイティブ(風の)アプリが開発可能なのです。 UIの自由度が高い ハイブリッドアプリは、 HTML5 や CSS を用いて開発しますので、それこそ Webアプリを作成するような感覚でUIを設計する ことが出来ます。 ネイティブアプリと比較してもカンタンに、そして凝った表示をサクッと作りこめるのは素晴らしいと思います。 Webアプリの開発経験があれば開発が可能 先ほど言った通り、ハイブリッドアプリの開発に必要なのは基本的に「 HTML5 」「 CSS 」「 JavaScript 」の三種のみです。 そのためこれらを扱うWebアプリの開発経験があるエンジニアなら、それほど 苦労せず開発に着手できる と思います。この手軽さこそが、開発者にとっては最大の魅力になるでしょう。 デメリット マイナーなネイティブ機能の利用が難しい ハイブリッドアプリでカメラや GPS などのネイティブ機能を利用するには、Cordova等の フレームワーク が提供している プラグイン を利用するのが一般的です。 しかし、これらの プラグイン はそのほとんどが個人開発なので、あまりにもマイナーなネイティブ機能だと プラグイン が実装されておらず、自分で開発するしかない...なんてことも。 ネイティブアプリと比較すると動作が重い ネイティブアプリは端末上で動作するアプリ、ということは先ほど説明しました。 一方、ハイブリッドアプリはWeb通信が必須になってくる関係上、ネイティブアプリと比較して動作がもっさりする場合があります。 最近はゲームのような処理の多いものでなければネイティブアプリとも遜色がないらしいですが、古いバージョンの スマホ だとかなりもっさりする可能性もあるので注意が必要です。 Web技術でネイティブな機能を使ってみた では、ここまでの話を踏まえて、さっそく スマートフォン のネイティブな機能を利用したハイブリッドアプリ作成を体験してみようと思います。 今回開発環境には、 アシアル株式会社様 が提供している 「 Monaca 」 という Webサービス を使用しました。ローカルで開発環境を用意する必要がなく、 クラウド 上で全てが完結するのでかなり便利です。 アカウント取得 まず初めに、 Monacaの製品ページ からアカウントを取得します。 Monaca は個人向けに無料プランを含む2プラン、企業向けに2プラン用意されていて、無料版でもリリースビルドまでは問題なく開発することが出来ます。 ですが、無料版だとそのビルドの回数が1日3回までに制限されていたり、 Monaca が用意した プラグイン しか使用できなかったりするので、いつか有料版に移行するのもありでしょう。 今回はひとまず無料版で作成します。 プロジェクトの作成 アカウントを作成したら、 ダッシュ ボードを確認してみます。 最初に ダッシュ ボードを開くと「はじめての Monaca アプリ」というプロジェクトが既に作成されています *2 が、まずは自分で新たにプロジェクトを作ってみましょう。 「新規プロジェクトの作成」をクリック。 Monaca ではいくつかのサンプルアプリや、UI、 JavaScript の フレームワーク を利用したテンプレートがいくつかありますので、こういったサンプルを参考にしつつ開発を進めることになると思います。 今回はひとまず「No Framework」で作成します。作成したプロジェクトを開くと、早速編集画面が出てきました。 編集画面については、ほぼほぼ一般的な IDE と同じ見方です。私は普段 Eclipse を使っていたので、画面に関しては簡単に理解できました。 画面右にはプレビューが表示されていますが、 スマートフォン のネイティブな機能以外の動作は保存したものが即反映されるので、コーディングもしやすいと思います。 プラグイン の有効化 さて、ここから スマートフォン のネイティブ機能を利用できるようにしていきます。 今回は、 現在位置をGoogleMapに表示する アプリの作成に取り組んでみましょう。 まず、メニューバーから「設定->Cordova プラグイン の管理」を開き、現在位置を取得するための プラグイン 「Geolocation」を有効化します。 プラグイン に関しては無料版でもかなりの数があり、他にもカメラ、 バーコードリーダ ー、バイブレーション機能などを この画面で有効にするだけで利用することができますので、調べてみてください。 Monaca 側での設定はこれで完了です。 API キーの取得 さて、続いてGoogleMapを表示させるために必要な、 Google Maps API の承認キーを取得します。 Google アカウントでログインしてから、 APIのページ の右上にある「キーの取得」をクリックして32文字の API キーを確認してください。 このキーをコードに埋め込むことでMapが表示できるようになります。 ひとまずは無料で利用できますが、読み込みの回数によっては課金が必要になりますので、リリースなどを行う際は注意してください。 コード作成 さて、では早速コードを書いていきましょう。 まずは表示部分から。 index.html <!DOCTYPE HTML> < html > < head > < style > #map { height : 400px ; width : 100 %; } </ style > 　　～中略～ < script src = "./script.js" ></ script > < script src = "https://maps.googleapis.com/maps/api/js?key=ここにAPIキーを入力&callback=getMapLocation" ></ script > </ head > < body > < div id = "map" > </ div > </ body > </ html > スクリプト として読み込むのは後述のjsファイルとGoogleMapsAPIです。 callback=getMapLocation は API を読み込んだ際に最初に実行するメソッドのこと。 特に引っかかるところはないと思いますが、一つだけ注意点が。 Mapの表示部分 < div id = "map" > </ div > には必ず CSS などで 表示領域を確保 しておかないと、仮にScriptが正しくてもMapが表示されません。 私はこんなくだらないことで数時間も悩んでしまいました... script.js そしてここから JavaScript のコーディングを開始します。 今回は、 Monaca の 公式ドキュメント に乗っているものを参考にしました。 var Latitude = undefined ; //緯度 var Longitude = undefined ; //経度 // 初期処理 function getMapLocation() { navigator.geolocation.getCurrentPosition(onMapSuccess, onMapError, { enableHighAccuracy: true } ); } // getMapLocation()での位置情報の取得に成功したら呼ばれる var onMapSuccess = function (position) { Latitude = position.coords.latitude; Longitude = position.coords.longitude; getMap(Latitude, Longitude); } // 取得した位置情報をもとにMapを生成する function getMap(latitude, longitude) { var latLong = new google.maps.LatLng(latitude, longitude); //位置情報の設定 var mapOptions = { center: latLong, zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP //Mapの表示形式。この場合通常の道路地図になる } ; var map = new google.maps.Map( document .getElementById( "map" ), mapOptions); var marker = new google.maps.Marker( { position: latLong } ); marker.setMap(map); } // 位置情報の取得に失敗した時に呼ばれる function onMapError(error) { console.log( 'code: ' + error.code + '\n' + 'message: ' + error.message + '\n' ); } 最初に呼び出す getMapLocation() で、「Geolocation」 プラグイン を利用して現在位置を取得しています。成功すると onMapSuccess 、 getMap(latitude, longitude) と処理が進んでいき、最後に現在位置を示したMapが表示されるようになります。 関数の意味が分かれば、こちらも内容自体はさほど難しくないでしょう。 実行！ さて、では早速このアプリを試してみたいのですが... 当然ビルドやリリースはまだ行っていないので、 スマートフォン で機能を試すには デバッグ 用のアプリが必要です。 Monaca のデバッガーは、 Android , iOS 共に無料でインストールができます。 そして、インストール後に自分のアカウントにログインし、先ほどのtestプロジェクトを起動してみると... 見事、自分の現在位置がMapに表示されました！ おわりに ハイブリッドアプリがどれだけ簡単に作成できるかお分かりいただけたでしょうか。 当然、 プラグイン は今回紹介したもの以外にもさまざまありますし、HTMLや JavaScript も難しい言語ではないと思いますので、これから何かアプリを作ってみたい！という初心者の方には最適かと思います。 (これ前回の記事でも言ったな…) 皆さんも、ここから手軽に スマホ アプリの開発に着手してみてはいかがでしょうか？ 参考 ネイティブアプリの意味や定義 Weblio辞書 開発コスト削減＆サクサク動く！今話題の”ハイブリッドアプリ”って？ | 起業・創業・資金調達の創業手帳 ハイブリッドアプリとは? - Qiita ハイブリッドアプリ制作で動作が重くならないために気をつけること|意識の高い時に雑記 Get an API Key  |  Maps JavaScript API  |  Google Developers 位置情報の取得 プラグイン | Monaca Docs *1 : webアプリでありながら、カメラや GPS など スマホ 本体の機能を利用するアプリのこと、という見方もあるそうです。 *2 : 「test」は私が作成したものです。

はじめに こんにちは。 ラク スエンジニアのstrongWhiteです。 今回は 初心者向けSwiftプログラミング勉強会 に参加したので、勉強会の内容や参加した感想を記事にしようと思います。 Swiftとは 本題に入る前にSwiftについて簡単に触れておきます。 Swift とは、 iOS 向けのアプリケーションを開発するための プログラミング言語 で、 Apple 社が開発しました。 iPhone や iPad をお持ちの方で、ふだん何気なしに使っているアプリはこのSwiftによって作られています。 Swiftは Xcode ( 統合開発環境 )を使って記述していきます。 参加した勉強会 ふだん私は自宅でプログラミング学習をしているのですが、たまたまSwiftに関する勉強会を調べていたところ、Swiftのスの字も知らない初心者でも気軽に受講できそうな勉強会を見つけたので、思い切って参加してみることにしました。 「 カフェサロンで学ぶ!超初心者向けのswiftプログラミングレッスン♪ 」 開催地：大阪 心斎橋 レンタルオフィス salon HAJIMARI 日時：2018年1月21日(日) 14:00〜18:00 持ち物：ノートパソコン( Mac OS )、電源コード/電源アダプタ(又はバッテリ) 参加費：2,000円 いわゆる もくもく会 とは違い、講義形式で簡単なアプリを作成していきます。 Xcode の設定やプロジェクトの作成から丁寧に教えてもらえるので、「アプリについて興味はあるけどどうやって作ればいいかわからない」という人にはオススメの勉強会でした。 会場の雰囲気 会場は レンタルオフィス のカフェスペースだったので、大学の講義室のような 堅苦しい 感じはなく、ゆったりと心を落ち着かせながら勉強できました。 会場の管理人さんからお菓子とコーヒーを出していただいたので、プログラミングで詰まった時はうまく気分転換させることができました。 カフェスペースでコーヒーを飲みながら Mac を立ち上げている様は何だかすごくエンジニアっぽいなと感じました(笑) 作成したアプリ 勉強会の開催日がバレンタインデーに近かったこともあり、「プレゼントボックスをタップするとバレンタインメッセージを送れる」アプリを作成しました。 会場ではシミュレータで動作確認を行っています( iPhone などの端末があれば実際にアプリをインストールすることも可能です)。 画面や構成要素(プレゼントボックスなどのパーツ)が少なく、複雑な挙動もしないのでプログラム自体は数十行程度の簡単なものです。 Swiftに触れて日も浅い人にはちょうどいい難易度ではないでしょうか。 参加した感想 今回の勉強会で作成したプログラムはさほど難しくなかったので、少し物足りなかった印象です。 講義自体も最初の2時間ぐらいで終わってしまったので、後半は参加者との交流にあてる形になりました。 主催者側はむしろ後半の参加者との交流に重きを置いていたらしく、積極的に参加者との意見交換を促していました。 社外のかたと積極的に関われる貴重な機会でしたので、技術談話が盛んに行いました。 最後に 自宅でのプログラミング学習は何かで詰まったり、思うように理解が進まなかったとしても自分ひとりで解決しないといけないので結構つらいです。 分厚い参考書を読んだり、Webサイトで調べたりいろいろ右往左往しないといけないと思いますが、勉強会に行くとわからないことは気軽に質問できるのでいいです。 すぐにでも知識を身に付けたい人は参考書を買うよりも勉強会に行った方がいいかもしれません。 参考 Swift Xcode

MasaKuです。もうすぐ社会人１年目終了です。 近況ですが、先日大阪で開催された オープンソース のイベント OSC OSAKA 2018 に参加しました。 www.ospn.jp イベントの中で「 openSUSE 」のセッションがあったのですが、 Linux デスクトップを使ったことがない私のような初心者でも扱いやすそうな Windows ライクな画面で興味を持ちました。 また、発表者さんの展示ブースの方にも訪れたんですが、 openSUSE Leap42.3 のインストールディスクを頂いたので、古くなったノートパソコンにインストールして使ってみたいなと思いました。 openSUSE の公式マスコット「Geeko(ギーコ）」です。可愛いですね。 openSUSEとは プライベート用としてのLinuxデスクトップの利用 パッケージ管理ソフト「YaST」 YaSTを利用したLAMP環境の構築 YaSTを利用したApacheの起動 Apacheの設定 おわりに 参考サイト openSUSE とは " Slackware ”系 Linuxディストリビューション で、主に欧州で人気のようです。 2017年7月より" Microsoft ストア ”でもリリースされています。 デスクトップ画面 デスクトップは上図のような感じで、普段から Windows マシンを利用する方はすぐに操作に慣れることができるのではないでしょうか。 また、仮想デスクトップや、「Alt + Tab」の画面切り替えなど、様々なデスクトップ効果が使えるため、 Windows や Mac でそのような機能を多様される方でも使いやすいのではないかと思います。 OSC OSAKA 2018 の会場で聞いた話ですが openSUSE はかなり初期から仮想デスクトップ機能を導入していたようです。 プライベート用としての Linux デスクトップの利用 私は業務でもプライベートでも、 Windows マシンを使っています。 openSUSE をプライベートで利用する場合、普段行っていることがどこまでできるのか、ということをリストアップしました。 文章作成： google ドキュメントが利用できる プログラミング： Atom が Linux 環境でも利用できる 動画視聴： YouTube 等の動画サイトが利用できる FireFox が標準搭載されているため、 Windows で利用してた クラウド サービスがそのまま利用できます。 環境を選ばないことの素晴らしさを改めて実感しました。 今のところ、プライベート利用する上では目立った問題は見つかっていません。 強いて問題点を上げるなら、 トラブルシューティング がほぼ英語記事のため、問題が起きた場合は英語と向き合わなければならないという点があります。 日本語の トラブルシューティング を記事にして発信していく事で、わずかでも オープンソース の発展に貢献できるんじゃないかと思います。 パッケージ管理ソフト「 YaST 」 Linuxディストリビューション はどのOSも類似機能があるため特徴が見つけにくいようですが、 openSUSE の最大の特徴は「 YaST 」というパッケージ管理ソフトです。 YaST とは、 Yet another Setup Tool (もう 1 つのセットアップツール) の略で、システム全体の設定を行なうことができるように目指して作られています。 Windows のコン トロール パネルのように見えますが、 GUI で Linux の操作ができるツールです。 ミドルウェア のインストールも YaST で行うことができます。 YaST のトップ画面 YaST を利用した LAMP 環境の構築 驚きだったのが、 YaST のソフトウェア管理メニューを利用することで、 LAMP 環境が一発で構築できてしまいます。 構築手順は以下の通りです。 メニューの中からソフトウェアを選択しソフトウェア管理を選択 検索バーに LAMP と入力 検索で見つかった「patterns-openSUSE- lamp _server」を選択して了解ボタンを押下 YaST での LAMP 環境のインストール手順 あっという間に PHP が実行できる環境が出来上がりました。 YaST を利用した Apache の起動 インストール完了後に Apache の動作確認を行います。 Apache の起動も YaST で行うことができます。 メニューの中からシステムを選択し、サービスマネージャーを選択 Apache2を選択して有効に変更し、開始を押下する OKを押下して、変更を確定する Apache の起動方法 これで Apache の起動が完了です。 FireFox で localhost もしくは Apache を起動しているコンピュータの IPアドレス にアクセスすると Apache が起動したことを確認することができます。 Apache の起動確認。「It works!」と表示されていれば起動成功 Apache の設定 PHP を利用するためには apache を設定する必要がありますが、こちらも YaST で設定することができます。 ネットワークサービスを選択し、HTTPサーバを選択 ウィザードに従ってサーバの設定を行う PHP を利用できるようにするための設定 重要なのはSTEP2で PHP を設定することです。 それ以外は設定する必要はありません。 設定が完了したら以下のプログラムを作成して /srv/www/htdocs/ に配置して確認してみましょう。 <?php phpinfo () ; Apache で PHP が使える状態になっていればphpinfo()が起動して画面が表示される おわりに いかがでしたでしょうか。 Linux はサーバとしてしか利用したことがなかったため、 Linux デスクトップがここまで利用しやすいものだとは思いませんでした。 OS無しのノートパソコンを一台購入して、 openSUSE を入れてしっかりと使ってみたいという気持ちにもなりました。 Linux デスクトップに興味がある方や、古くなったパソコンを再利用してみたい、という方は利用してみてはいかがでしょうか。 参考サイト 「openSUSE Leap」がWindows 10の“ストア”に登場 ～「SUSE Linux Enterprise Server」も - 窓の杜 KDE4のデスクトップ効果の解説 さくらのVPSにopenSUSE Leap42.2が提供されたのでLAMPな環境を構築してみる

はじめに やりたいこと cVimのダウンロード cVimでできること(ショートカットキー) cVimでできること(コマンド) ショートカットのカスタマイズ 設定例 unmap x map w map e :duplicate let hintcharacters "asdfgjklwertuioxcvnm" set noautofocus 終わりに 参考 はじめに 以前調べることが多い時期があり、効率的に ブラウジング するため、cVimという google Chrome で利用できる 拡張機能 を導入しました。cVimを使うと Vim ライクにブラウザを使うことができる他、ショートカットを自分で設定することができます。この記事ではcVimを使うとできることを紹介します。 やりたいこと 私がツールを導入しやりたかったことを記載します。 できるだけマウスを使わずに ブラウジング をしたい command + f のような2キーのショートカットを1キーで行いたかった タブの複製や特定のページを開くといった、存在しないショートカットを使いたい cVimのダウンロード ダウンロードページ から追加ボタン押してダウンロードします(私は追加済みのため「 CHROME に追加済み」という表示になっていますが)。 cVimでできること(ショートカットキー) cVimに元から備わっているショートカットキーについて幾つか紹介します。 f でページ内のリンクにショートカットを割り振る 恐らくcVim(や似た 拡張機能 Vimium)を使った際に一番便利な機能です。下記の場合は続けて u を押せばラクスのホームページが開かれます j で下、 k で上にページスクロール(矢印キーの上下と同じ挙動)、 d で下、 u で上に半ページ分スクロール gg でページの最上部へ移動、 G でページの最下部へ移動 / でページ内検索、 Enter で検索文字列を確定後 n で次の検索対象、 N で前の検索対象へ移動 gi でページの一番上の検索欄にフォーカス cVimでできること(コマンド) : でコマンドが打てます。例えば :tabnew [URL] で「[URL]を新規タブで開く」、 :tabnew [検索文字列] で「新規タブで[検索文字列]を検索した結果を開く」ことができます。また、 : でコマンドモード起動した後、文字を入力するとその文字から始まるコマンドを表示してくれます(下記は t を入力した場合)。候補は tab と shft + tab で移動できます。 ショートカットのカスタマイズ : でコマンドを打てると先ほど記述しました。とは言えコマンドを打つくらいならマウスで操作する方が早いという話です。ここではショートカットキーやコマンドを設定する方法をご紹介します。 ショートカットなどのカスタマイズはcvimのマーク > Settingsから設定できます。 cVimrcと書かれた枠に設定を記述していきます。因みにHelpのリンクを押すと、cVimのショートカットキーや CSS の設定方法や例が載っていますので詳しく知りたい方はご参照下さい。 ここでは例として、「ラクスのホームページを新規タブで開く」を設定してみます。 1.cVimrcに設定を記述 map [任意のキー]　[挙動] で任意のキーに特定の挙動を設定できるので、下記のように設定します。これで a キーに :tabnew https://www.rakus.co.jp/ が割り当てられます。 map a :tabnew https://www.rakus.co.jp/ 2.画面下部のsaveボタンから設定を保存 これで設定は完了です。あとは新規のタブを開いて(設定前に開いていたタブだと設定が反映されていないためリロードが必要)、 a と押せば下記のような画面が表示されるはずです。さらに Enter を押せばラクスのトップページが開かれるはずです。 上記 の例はコマンドを実行するものであったため、ショートカットキーを押したあとに Enter を押す必要がありましたが、cVimで用意されているショートカット( f 、 j 、 k など)ならキーを押しただけで特定の挙動を実行できます。 設定例 最後に現在の私の設定を紹介します(使い始めて間もないのでそこまで設定してませんが...) unmap x unmap [キー] と設定することで特定のキーをショートカットで使えなくします Command と間違って x を押すとcVimに登録されている「現在のタブを閉じる」(closeTab)が実行されてしまうので無効にしました(タイポしなければいい話なんですけどね) map w Command + w の「現在のタブを閉じる」を w 1つでできるようにしています したかったことの1つ「2キーのショートカットを1キーで行いたい」を実現している設定です map e :duplicate e と押した後に Enter を押すと「現在のタブを複製する」を実行できます したかったことの1つ「存在しないショートカットを使いたい」を実現している設定です let hintcharacters "asdfgjklwertuioxcvnm" f でページ内にリンクを割り振る際に使用できるキーを設定しています set noautofocus 開いた際に入力欄にフォーカスされるページだと、ショートカットを使う前に入力欄からでる(escを押す)必要があります。面倒なので、入力欄にフォーカスしないように設定しています 終わりに この記事ではcVimについてご紹介しました。ここでは CSS などの設定には触れませんでしたが、他にも色々と設定ができるので気になった方は調べてみてください。 参考 Google ChromeでcVimの設定をアップデート クマーなひとときv2

id:radiocat です。最近読んだ書籍は カイゼン・ジャーニー です。 先月、「ITエンジニアに読んでほしい！技術書・ビジネス書大賞 2018」が発表されました。 www.shoeisha.co.jp 今年の大賞は以下の通り決まったようです。 技術書部門 機械学習入門 ボルツマン機械学習から深層学習まで 作者: 大関真之 発売日: 2016/12/01 メディア: 単行本（ソフトカバー） ビジネス書部門 職場の問題地図 ~「で、どこから変える?」残業だらけ・休めない働き方 作者: 沢渡 あまね 発売日: 2016/09/16 メディア: 単行本（ソフトカバー） この企画は 翔泳社 さんの主催で毎年開催されています。その年の旬な技術書を知ることができるので楽しみにしているエンジニアの人も多いのではないでしょうか？ というわけで、このイベントにあやかって弊社社内でもおすすめの書籍についてアンケートを取ってみました。開発部の新人から部長まで役職や職歴を問わず、特にテーマや制限も設けず、現時点で人におすすめできる書籍を1人最大5冊まで選んでもらいました。ただ、この記事のタイトルの通り弊社は クラウド サービスの会社でWeb系のエンジニアが多いため、本家の投票結果よりはジャンルが少し限定されてしまう点は念頭に置いていただければと思います。題して「 クラウド サービスのエンジニアが読んでほしい！（と思っている）技術書・ビジネス書 2018」です。 RAKUS Developers に最も支持されている1冊 技術書部門：リーダブルコード ビジネス書部門：トヨタ生産方式 RAKUS Developers が選ぶオススメの5冊 技術書：達人プログラマー 技術書：デザイン組織のつくりかた 技術書：SCRUM BOOT CAMP THE BOOK ビジネス書：「残業しないチーム」と「残業だらけチーム」の習慣 ビジネス書：入社1年目の教科書 RAKUS Developers のひとりひとりが厳選した1冊 若手エンジニアが選んだ6冊 7つの習慣 99%の人がしていないたった1%の仕事のコツ レバレッジ・リーディング エンジニアを説明上手にする本 プリンシプル オブ プログラミング 現場で使えるデバッグ & トラブルシュート Java編 熟練エンジニアが選んだ4冊 Java言語で学ぶデザインパターン入門 カンバン仕事術 情熱プログラマー 40歳を過ぎたら、働き方を変えなさい スペシャリストが選んだ4冊 入門 コンピュータ科学 ITを支える技術と理論の基礎知識 UNIXという考え方 テスト駆動開発 すごいHaskellたのしく学ぼう! デザイナーが選んだ4冊 ユースケース駆動開発実践ガイド エンジニアのための図解思考 SOSの猿 問題解決ラボ マネージャーが選んだ5冊 ケン・ブランチャード リーダーシップ論 1分間マネジャー―何を示し、どう褒め、どう叱るか! なぜ、あなたの仕事は終わらないのか Inspired: 顧客の心を捉える製品の創り方 Joy, Inc. おわりに RAKUS Developers に最も支持されている1冊 まずは最も多くの票を集めた技術書・ビジネス書をそれぞれ紹介します。 技術書部門：リーダブルコード 本家の技術書・ビジネス書大賞でも2014年に大賞に輝いた書籍が全体で最多の票数を集めました。初版は2012年ですが、いまだに新人からベテランまで多くのエンジニアが拠り所にしている不動の名著です。 リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice) 作者: Dustin Boswell , Trevor Foucher 発売日: 2012/06/23 メディア: 単行本（ソフトカバー） 投票者のコメント プログラマ にとっては、教科書的な本だと思いました。 言わずもがなエンジニアは全員読んだほうがよい本。 ビジネス書部門： トヨタ生産方式 カイゼン のバイブルとも言える不動の名著がビジネス書のトップでした。初版は1978年で、業界を選ばず40年間読み続けられており、IT業界でも アジャイル 開発を中心としてカンバンなどの形で取り入れられています。立場を選ばずマネジメントにも開発の現場にも支持されている1冊と言えます。 トヨタ生産方式――脱規模の経営をめざして 作者: 大野 耐一 発売日: 1978/05/01 メディア: 単行本 投票者のコメント 何十年も前に考えられた方式「かんばん」が今のソフトウェア開発に生きているという点は感慨深い。 自身のソフトウェア 開発プロセス を考えながら読むと、まったく製造業に限定されないことだと分かって驚く。 RAKUS Developers が選ぶオススメの5冊 次に、惜しくもトップの座は逃しましたが、多くの票を集めたベスト5を投票者のコメントと合わせて紹介します。どの本もトップの1冊に劣らない名著で、開発チーム内で話題になって薦め合ったり、読書会の題材になったりしたことで票が集まったようです。 技術書：達人 プログラマー 新装版 達人プログラマー 職人から名匠への道 作者: Andrew Hunt , David Thomas 発売日: 2016/10/20 メディア: 単行本（ソフトカバー） エンジニアが基本とすべき考え方や視点がたくさん含まれており、経験を経てから読んでも新たな気付きがあるため手元において数年おきに読みたい本。 初心者の自分にとっては「 銀の弾丸 は無い」ということに改めて気付かされる一冊でした。 技術書：デザイン組織のつくりかた デザイン組織のつくりかた デザイン思考を駆動させるインハウスチームの構築&運用ガイド 作者: ピーター・メルホルツ , クリスティン・スキナー 発売日: 2017/12/22 メディア: 単行本（ソフトカバー） UIパーツのデザインやリサーチ、UX設計など広範囲に渡っているデザイナーの仕事を1人でこなすのは現実的ではなく、ユーザーの利用とビジネス上の要求を充たすためのデザイン組織をどのようにして組み立てていくのが良いか、示唆に富んだ内容。 技術書：SCRUM BOOT CAMP THE BOOK SCRUM BOOT CAMP THE BOOK 作者: 西村 直人 , 永瀬 美穂 , 吉羽 龍太郎 発売日: 2013/02/13 メディア: 単行本（ソフトカバー） スクラム とは何か・どういった流れで進んでいくのかが漫画を交えて分かりやすく説明されています。 スクラム をやったことが無い人向けに スクラム がどういうものかを説明した解説書の中で最もわかりやすく、それでいて重要な要素がしっかり説明されている。 ビジネス書：「残業しないチーム」と「残業だらけチーム」の習慣 「残業しないチーム」と「残業だらけチーム」の習慣 (Asuka business & language book) 作者: 石川 和男 発売日: 2017/10/10 メディア: 単行本（ソフトカバー） 「残業しないチーム」と「残業だらけチーム」を比較しながら様々なケースを例に書いてあり読みやすいです。 すぐに実践出来ることが多いので読んですぐに試せます。 ビジネス書：入社1年目の教科書 入社1年目の教科書 作者: 岩瀬 大輔 発売日: 2011/05/20 メディア: 単行本（ソフトカバー） 配属されて間もない頃は相談や質問の仕方で戸惑う場面もあるので参考になりました。 社会人の心構えについて大事なポイントを丁寧に解説されています。 RAKUS Developers のひとりひとりが厳選した1冊 ここまで紹介した書籍以外にもその人の立場や仕事内容によって、おすすめの書籍はまだまだたくさんあります。アンケートでは合計で100冊近くの書籍が投票されました。そこで、せっかくなので投票者ひとりひとりの推しが特に強かった1冊を、選んだ人の立場や仕事内容ごとに分類してピックアップしてみました。 若手エンジニアが選んだ6冊 前出の『リーダブルコード』や『入社1年目の教科書』も若手の票が多く集まった書籍でしたが、他にもたくさんの名著が選ばれました。これから社会人になる人にもオススメできそうです。 7つの習慣 7つの習慣-成功には原則があった! 作者: スティーブン・R. コヴィー 発売日: 1996/12/25 メディア: 単行本 適切な内省で自身の成長させるフローが明確かつ説得力ある形で記載されており、技術にかぎらず自身の キャリアパス なり日々の行動のヒントとなる 99%の人がしていないたった1%の仕事のコツ 99%の人がしていないたった1%の仕事のコツ (たった1%のコツシリーズ) 作者: 河野 英太郎 発売日: 2012/03/12 メディア: 単行本（ソフトカバー） 仕事に取り組むための姿勢やとるべき態度が記載されています レバレッジ ・リーディング レバレッジ・リーディング 作者: 本田 直之 発売日: 2013/05/02 メディア: Kindle 版 忙しい社会人でも多くの本を読むべきなので、そのノウハウを紹介している本書はとても有用です。 エンジニアを説明上手にする本 エンジニアを説明上手にする本 相手に応じた技術情報や知識の伝え方 作者: 開米 瑞浩 発売日: 2016/12/02 メディア: 単行本（ソフトカバー） 顧客/オペレーター/経営者/新人...前提知識がそれぞれ異なる人にうまく説明するにはどうすればいいかがわかりやすく掲載されています プリンシプル オブ プログラミング プリンシプル オブ プログラミング 3年目までに身につけたい 一生役立つ101の原理原則 作者: 上田勲 発売日: 2017/04/27 メディア: Kindle 版 「達人 プログラマー 」「 プログラマ が知るべき97のこと」等の名著のエッセンス（＝プリンシプル）が凝縮されています。 現場で使える デバッグ & トラブルシュート Java 編 現場で使えるデバッグ & トラブルシュート Java編 作者: 小堀 一雄 , 茂呂 範 , 佐藤 聖規 , 石垣 一 , 飯山 教史 発売日: 2010/02/27 メディア: 大型本 実践的なトラブルシュート対応方法（ Java のみ）が書いてある本。初心者向けに Java リソースの仕組みなども学べる。 熟練エンジニアが選んだ4冊 経験を積んだエンジニアからは、さらに熟達を目指すテーマの書籍が選ばれています。経験と領域は選びますが側に置いて長く活用できそうな書籍ばかりです。 Java 言語で学ぶ デザインパターン 入門 増補改訂版Java言語で学ぶデザインパターン入門 作者: 結城 浩 発売日: 2004/06/19 メディア: 大型本 言わずとしれた名著で Java で仕事をするなら読んでおきたい本。 カンバン仕事術 カンバン仕事術 作者: Marcus Hammarberg , Joakim Sundén 発売日: 2016/03/26 メディア: 単行本（ソフトカバー） カンバンのやり方をよく理解することができた。 情熱 プログラマー 情熱プログラマー ソフトウェア開発者の幸せな生き方 作者: Chad Fowler 発売日: 2010/02/26 メディア: 単行本（ソフトカバー） プログラマー にとって大切なことが詰まっていて、読むと前向きになれる。定期的に読み返したい。" 40歳を過ぎたら、働き方を変えなさい 40歳を過ぎたら、働き方を変えなさい 作者: 佐々木 常夫 発売日: 2017/05/24 メディア: 単行本（ソフトカバー） 色々と省略しましょうとか、若手に任せましょうとかは共感できました。 スペシャ リストが選んだ4冊 社内でも特に技術志向の強いのエンジニアが選んだ書籍を集めてみました。選んだ本のタイトルからもその志向が垣間見える気がします。そして何よりも投票者のコメントがみんなアツすぎて記事を編集するほうも圧倒されてしまいました。 入門 コンピュータ科学 ITを支える技術と理論の基礎知識 入門 コンピュータ科学 ITを支える技術と理論の基礎知識 作者: J.Glenn Brookshear 発売日: 2017/03/15 メディア: 単行本 コンピュータサイエンス の教科書。学生時代に情報学部ではなかった人はあまり体系的に学ぶ機会がないので読んでおいた方がいいというか読まないとどこかでITエンジニアとして頭打ちになる。 アーキテクチャ を考えるとき、 トラブルシューティング するとき、より良い設計や ソースコード を判断するときなど、あらゆる場面の基礎となる知識が含まれる。 UNIX という考え方 UNIXという考え方―その設計思想と哲学 作者: Mike Gancarz 発売日: 2001/02/01 メディア: 単行本 良い設計を考えるきっかけになった本。様々なプログラミング原則やプ ラク ティスはここに帰着する。 どのプログラミングハウツー本を読むべきか迷ったらまずはこの１冊を読むことをおすすめする。 テスト駆動開発 テスト駆動開発 作者: Kent Beck 発売日: 2017/10/14 メディア: 単行本（ソフトカバー） 原理主義 的な テストファースト をするかどうかは別として、自動テストを書くことで得られる 心理的 な安心感や、高速な フィードバックループ 、動くものを作ってから リファクタリング 、というTDDの良さを感じてほしい。 本書前半の多国通貨を実際に写経することで、タスクを細かく（執拗なまでに細かく）分割し、自動テストに支えながら1つずつやっつけていく気持ちよさをぜひ味わってほしい。 すごい Haskell たのしく学ぼう! すごいHaskellたのしく学ぼう! 作者: Miran Lipovača 発売日: 2012/05/23 メディア: 単行本（ソフトカバー） Haskell 言語の入門的読み物として代表的な本です。 実際にアプリを作れるところまではいきませんが、ファンクターや モナド といった Haskell で中心的な概念を読みやすく説明してくれています。 読んでいると何となく自分も Haskell で何か作れそうな気がしてきます。 デザイナーが選んだ4冊 デザイナーからのオススメもその仕事に沿った特徴的な書籍が選ばれました。Web系エンジニアとしても抑えておきたい本が並んでいます。 ユースケース 駆動開発実践ガイド ユースケース駆動開発実践ガイド 作者: ダグ・ローゼンバーグ , マット・ステファン 発売日: 2016/01/28 メディア: Kindle 版 要求から ドメイン モデルと ユースケース を作い、ソフトのあり方を段階的に明らかにしていく ICONIX プロセスについての本。 実践を想定した具体的な内容で、「こうしましょう」でなく「こうすると失敗しやすい」が書かれているので心強い。 エンジニアのための図解思考 エンジニアのための図解思考 再入門講座 作者: 開米瑞浩 発売日: 2013/08/09 メディア: Kindle 版 自分の頭の中の整理の方法や考えかたなど図示するテクニックが載っているので、業務で実践しやすい。 SOSの猿 SOSの猿 (中公文庫) 作者: 伊坂 幸太郎 発売日: 2012/11/22 メディア: 文庫 「自社開発した株の発注システムが誤動作して300億円の損失を出した原因を調べる」...いや、怖いです。 これを実は顧客より、UIのせいにされるんですが、UIデザイナの友人などは身に染みると申しておりました。 問題解決ラボ 問題解決ラボ――「あったらいいな」をかたちにする「ひらめき」の技術 作者: 佐藤 オオキ 発売日: 2015/02/27 メディア: 単行本（ソフトカバー） 固い頭を柔らかくする本 マネージャーが選んだ5冊 最後にマネージャーからもオススメの書籍を選んでもらいました。組織の方向性を示してエンジニアを束ねる視点で選ばれているのがわかります。これからマネジメントを学ぼうとしているエンジニアも読みたい書籍の数々です。 ケン・ブランチャード リーダーシップ論 ケン・ブランチャード リーダーシップ論[完全版] 作者: ケン・ブランチャード , ケン・ブランチャード・カンパニー 発売日: 2012/12/07 メディア: 単行本 リーダー、管理職等マネジメントを担うメンバは読んでおくべき基本書。 サーバント型リーダシップ、重要ですね。 1分間マネジャー―何を示し、どう褒め、どう叱るか! 1分間マネジャー―何を示し、どう褒め、どう叱るか! 作者: K.ブランチャード , S.ジョンソン メディア: 単行本 管理職としてメンバーと接する時に１分という短い時間で大きな成果を得るためにを考えさせられた。 本自体は古いが１分間振り返りなどためになるものがあった。 なぜ、あなたの仕事は終わらないのか なぜ、あなたの仕事は終わらないのか 作者: 中島聡 発売日: 2016/06/01 メディア: 単行本（ソフトカバー） タスクの進め方でお悩みの方、段取りが悪くてタスクが上手く進めれない方へ 時間術、仕事術についてわかりやすく書いています。エンジニアの著書でもあり日々の自分たちの状況とマッチする話も多いと思います。 Inspired: 顧客の心を捉える製品の創り方 [asin:B00TCM8TB4:detail] 正しい製品とは何かを考えさせられ、また正しく製品を作る方法が解説されている。 製品にはエンジニアリングはもちろんのこと、その他にも プロダクトマネジメント 、UX/UIデザイン、プロジェクトマネジメント、システム運用、プロダクト マーケティング が必要で開発で関われる範囲の広さを知ることができると共に キャリアプラン を考える際に参考にできる。 Joy, Inc. ジョイ・インク 役職も部署もない全員主役のマネジメント 作者: リチャード・シェリダン 発売日: 2016/12/20 メディア: 単行本（ソフトカバー） アジャイル の理想型のイメージが掴めた 世の中にこれほどまでにJOYを突き詰めた会社がある事に驚き。その会社が口コミだけで仕事が舞い込み、ビジネスが機能しているのはまさに win-win な関係性。素晴らしいの一言。 おわりに 手元のアンケート結果をながめてみると紹介したい本はまだまだたくさんありますが、これだけでも30冊になったので今回はここまでにしたいと思います。30冊もありますが、知らないタイトルは無いくらいどれも著名な書籍ばかりだと思います。また、投票した人の仕事内容に合わせて分類してみるとそれぞれ選ばれた書籍に特徴があったのも興味深い結果でした。自分の興味のある分野の本で未読のものがあれば読んでみてはいかがでしょうか。そして機会があればまた来年も実施してみますのでお楽しみに。

はじめに Node.js Express Socket.io チャットを作ってみた 1. メッセージの送受信と表示 クライアント側の処理 サーバ側の処理 2. Nodeサーバにリクエストがあるとログイン画面へ遷移 クライアント側の処理 サーバ側の処理 おわりに 参考 はじめに id:d_shr です。 担当している商材の機能を実装する上で Node.js , Express , Socket.io について学習する機会があったのでまとめてみようと思います。 Socket.ioのサンプルコードを参考に簡単にチャットアプリの基本的な機能を作ってみました。 簡単にWebアプリケーションを作ってみたいという方やNode.jsやSocket.ioを学習し始めた方の参考になればと思います。 Node.js Node.jsについては過去の記事で紹介されているので割愛します。 Node.jsの勉強会でお手軽にWebアプリを作った話 - RAKUS Developers Blog | ラクス エンジニアブログ 知ってる？nodemailerを使ってメールを送る方法 - RAKUS Developers Blog | ラクス エンジニアブログ Express ExpressはNode.js向けの軽量な フレームワーク です。 ちょっとめんどくさい外部からの要求と内部ロジックを マッピング する基本的なルーティング機能が簡単にできたり、express-generatorによってアプリケーションの雛型が簡単に作れる便利なやつ。 詳しい説明や使い方は 公式サイト に書かれています。 Socket.io サーバとクライアント間の通信で非同期かつ双方向の通信を実現するための プロトコル であるWebSocketを手軽に利用できるモジュールです。 Node.jsのnpmで提供されています。 詳しい説明や使い方は 公式サイト に書かれています。 チャットを作ってみた Node.js, Express, Socket.ioを利用して作ってみました。 実装した機能は2点です。 1. メッセージの送受信と表示 2. ログイン機能(Nodeサーバにリク エス トがあるとログイン画面へ) 1. メッセージの送受信と表示 チャットの基本的な機能。 Socket.ioの Get started をとりあえずやってみました。 チャットのサンプルコードでメッセージの送受信をどのように行うか説明されています。 クライアント側の処理 メッセージの表示や入力欄 <!-- メッセージの表示 --> < ul id = "messages" ></ ul > <!-- メッセージ入力欄 --> < form action = "#" id = "chatForm" > < input id = "m" autocomplete= "off" /> < button > Send </ button > </ form > 受信したメッセージを表示する部分と送信するメッセージの入力欄です。 メッセージ送信や受信メッセージの表示ロジック <script src= "/socket.io/socket.io.js" ></script> <script src= "https://code.jquery.com/jquery-1.11.1.js" ></script> <script> var socket = io(); var userName = '' ; $( function () { // メッセージを送信する $( 'form' ).submit( function () { socket.emit( 'chat message' , $( '#m' ).val()); $( '#m' ).val( '' ); return false ; } ); // 受信したメッセージを表示 socket.on( 'chat message' , function (data) { var chat = data.userName + " : " + data.message; $( '#messages' ).append($( '<li>' ).text(chat)); } ); } ); </script> 通信を行うための基本的な操作は以下の2つです。 socket.emit('event', data); イベントの発火、接続している全員(送信者含む)へdataを送信します。 socket.on('event', callback); イベントの検知、送信されたdataを受信します。 ここでは、入力されたメッセージのSubmitをイベント chat messsage としてサーバへメッセージが送られます。 イベント chat messsage を検知すると、サーバで処理され送信されてきたメッセージを受け取り表示します。 サーバ側の処理 サーバにアクセスすると実行される部分。 // モジュールを読み込む var app = require( 'express' )(); var http = require( 'http' ).Server(app); var io = require( 'socket.io' )(http); // Nodeサーバにアクセスがあるとindex.htmlへ遷移 app.get( '/' , function (req, res) { res.sendFile(__dirname + '/index.html' ); } ); 必要なモジュールを require で読み込み、index.html(クライアントの処理)へ遷移します。 メッセージの送信ロジック // メッセージ送信処理 socket.on( 'chat message' , function (msg) { io.emit( 'chat message' , msg); } ); クライアント側から送信されてきたメッセージをサーバで受け取り処理するところです。 接続しているクライアントへメッセージを送信します。 以上がチャットの基本的なメッセージのやりとりの処理になります。 2. Nodeサーバにリク エス トがあるとログイン画面へ遷移 理解を深めるために、データのやり取りをもう少し複雑にしてみようと思いつきで実装してみた機能。 実装したもの以下のとおりです。 ユーザ名を入力してログイン ユーザ名を表示してメッセージを識別 データのやり取りにユーザの情報を追加 クライアント側の処理 ログインフォーム <!-- ログインフォーム --> < form id = "loginForm" > < div > < input id = "username" name = "username" type = "text" class = "form-control" placeholder= "ユーザ名" autofocus /> < button id = "btnLogin" > ログイン </ button > </ div > </ form > ログイン処理 <script src= "/socket.io/socket.io.js" ></script> <script src= "https://code.jquery.com/jquery-1.11.1.js" ></script> <script> var socket = io(); var userName = '' ; $( function () { // ログイン画面表示 $( '#loginForm' ).show(); $( '#chatForm' ).hide(); // ログイン処理 $( '#btnLogin' ).on( 'click' , function (e) { userName = $( '#username' ).val(); if (userName) { // チャット画面表示 $( '#loginForm' ).hide(); $( '#chatForm' ).show(); // ユーザ情報をサーバへ通知する socket.emit( 'login' , { userID: socket.id, userName: userName } ); } e.preventDefault(); } ); } ); </script> 主に追加したものはログイン時の処理です。 ログインフォームとチャットフォームの切り替え処理も入れたりしています。 socket.emit() で送信者のsocketのidと入力されたユーザ名を送信します。 サーバ側の処理 io.on( 'connection' , function (socket) { var loginUsers = [] ; //ログインユーザ // ログイン処理 socket.on( 'login' , function (userInfo) { loginUsers [ userInfo.userID ] = userInfo.userName; } ); // メッセージ送信処理 socket.on( 'chat message' , function (msg) { userName = loginUsers [ socket.id ] ; io.emit( 'chat message' , { userName: userName, message: msg } ); } ); } ); ログイン時の処理とメッセージ送信時のデータを追加してみました。 ユーザの情報としてソケットIDをユーザID、クライアント側でログイン時に入力された値をユーザ名を持っています。 メッセージの送信時には、送信したユーザとそのメッセージを紐づけて、クライアント側へ送信します。 これでログイン機能、ユーザ名による識別を実現し、よりチャットっぽくなりました。 おわりに 学習したNode.js, Express, Socket.ioを使って実際にアウトプットしてみたことをまとめてみました。 環境構築と実装がすごく簡単ですぐにできます。 チャットについては、もう少し機能拡張したりコード自体をキレイにしたいと思います。 参考 https://heavy-metal-explorer.com/approach_socket_io/ 今更だけどSocket.ioについてまとめてみる - blog::wnotes.net エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 forms.gle イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ rakus.connpass.com

はじめに 参加した勉強会 最新技術てんこ盛り！新年なにわTECH 祭り2018（AI・IoT編） Mobile Act OSAKA #3 勉強会を選んだ理由と参加してみて 料金 形式 懇親会 短時間or長時間 情報のキャッチアップ その他 終わりに はじめに 先日、初めて勉強会に参加したのでそのことについて記載します。初めてだったため、どんな勉強会に行けばいいのか(行きたいのか)、そもそも勉強会ってどんなものかも分かっていませんでした。この記事では、行った勉強会の内容に加え、どういった基準で選んだか、実際に行ってみてどのように感じたか、どのように情報をキャッチアップしたかについても紹介します。 参加した勉強会 私が参加した2つの勉強会と、その概要について記載します。 最新技術てんこ盛り！新年なにわTECH 祭り2018（AI・IoT編） 分野：AI、IoT、Deep Learnig 開催：株式会社 パソナ テック 発表時間：25〜50分 登壇者の発表を聞く聴講型 スケジュール： 12:50〜13:00：開会挨拶 13:00〜17:50：発表 17:50〜18:00：閉会挨拶 AIやDeep Learnigの業務利用に関するお話が多めでした。ある程度AIや Deep Learning の知識はある前提で、どのように業務適用をしているかについての発表が多かった印象です Mobile Act OSAKA #3 分野： iOS 、アンドロイド開発 開催： フェンリル 株式会社 発表時間：5分のLT & 5分の質疑応答 登壇者の発表を聞く聴講型 スケジュール： 18:45〜18:50：開会挨拶 18:50〜20:00：発表 20:10〜21:20：懇親会 発表のテーマは様々だった印象です。また、企業の方だけでなく、学生さんも登壇されており、自由な(いい意味で緩い)雰囲気でした こちらもある程度、前提知識はあることが前提で発表されている人が多かった印象です 勉強会を選んだ理由と参加してみて 参加した2つの勉強会を「選んだ基準」、「参加前に考えていたこと」、「実際参加して感じたこと」、その理由を記載します。もちろん、勉強会の内容(私の場合、 iOS やアンドロイドといったモバイル開発、AIやDeepLearningの業務利用)に興味があり聞いてみたかったことが大前提としてあります。 料金 参加前 料金が安い方がいい 結果的にどちらも無料の勉強会に参加しました 勉強会を探しているうちにあまり気にしなくなりました(見ていた勉強会の殆どが無料か少額だったからかもしれませんが) 参加後 無料でなくてもいいかなと最近は考えています テーマや日程で絞るとそこまで数があるわけではないためです 自分の糧になるので、払ってもいいと感じるようになったためです 形式 参加前 聴講形式がいい ハッカソン やハンズオンなど手を動かすタイプは前提知識が必要そうだったため敷居が高かったためです 参加後 次はハンズオンに挑戦したい 聴講形式は前提知識がないと聞いても分からないことが多い印象です。事前に調べるか、一度行って重要そうな単語は調べて次に望むといいかもと思います ハンズオンでは前提知識がない人がある程度実装できるようになることが目的になっている印象です。聴講形式も良かったですが、その日中に「xxxができるようになった」という状態になるのは達成感がありそうです 懇親会 参加前 分からなかったため、ある勉強会とない勉強会に参加 参加後 懇親会はあった方がいいと感じた 発表内容が専門的で分からなくても、世間話から入り自分の興味のある分野を聞けます 分からない内容はその場で質問したりと柔軟に動けます(調べて分かることは後で調べる方がいいでしょうが) 技術的な面のみだけでなく、他社の活動などの情報を得られることが良かったです 短時間or長時間 参加前 分からなかったため、以下の両方に参加してみました 会社終わりに短時間 休日に1日ガッツリ 参加後 休日の方が合っていると感じた 会社終わりに短時間： 会社終わりの疲れた状態では、集中力が高い状態で聞けなかった発表もありました 情報のキャッチアップが主目的なら短い時間で色々な情報が得られるため適していそうです。特にMobile Actの場合は懇親会もあったので、興味ある内容を直接聞く事もできる点も良かったと思います 休日にガッツリ： 疲れていない状態で参加できたため、集中できた点がよかったです LTでは伝えきれないような深い(詳細な)内容まで聞けたように思います 情報のキャッチアップ 参加前に一番悩んだと言っても過言でないのが、情報のキャッチアップでした。私の情報のキャッチアップの方法と登録しているサイトについて記載します。 情報のキャッチアップは基本的に twitter IT勉強会@近畿をフォローして情報をキャッチアップしています １日に大体20ツイート程度勉強会の情報を発信してくれているようです 個人的には、多すぎて追えないということもなく、情報が少ないということもない良い感じの量なので情報のキャッチアップに利用しています 何のサイトに登録すればいいの？ 何かに登録しないといけないという印象はないです 勉強会参加に登録が必要であったため登録している状態です 今のところ connpass と Doorkeeper に登録しています twitter でキャッチアップして、必要であれば登録、でいいと思います その他 名刺を持って行きましょう 受付で身分証明の代わりに渡すところもあります 勉強会の資料はアップされることがあるので、その場合は後で見返すことも可能です 私が今回参加した2つの勉強会は資料がアップされているものもありましたので、興味がある人は見てみてください 終わりに 参加した2つの勉強会と、新人の視点から行く前に抱えていた懸念事項と実際に行ってみて感じたことについて述べました。まだ2件しか参加できていませんが、(例え分からない内容が多くとも)勉強会は行っておいて損はないなと感じています。次はハンズオンにも参加してみたいと思います。

はじめに こんにちは、rs_tukkiです。最近、様々な勉強会に行くことが多くなりました。 大学時代は講義だけ聞いていればいいやーの精神で、自分から技術を学ぶといったことはしてこなかったのですが、 社会人、特にエンジニアともなると、 様々な技術へのアンテナを張る ことが意外と重要になってきたりします。 で、それは何も特定の技術に絞る必要はなくて、 新しい言語のこと でも、今話題の スマートスピーカー のこと でも、 なんだったら バーチャルYouTuber のこと でも大丈夫です。 *1 その技術を知っているということが、いつか会社内でも大きなアドバンテージになるかもしれません。 さて、今回はそんな勉強会の中から先日参加させていただいた ユメノソラホールディングス株式会社 様主催のNode.js勉強会で、お手軽にWebアプリケーションを作ったお話をしたいと思います。 yumenosora.connpass.com 大丈夫です。許可は頂きました。 はじめに Node.jsとは？ 特徴 サーバサイドで動作できるJavaScript シングルスレッド ノンブロッキングI/O メリット フロント/サーバどちらも一貫してJavaScriptで書ける ライブラリが豊富 小さな処理を素早く行うのが得意 デメリット 同期処理が苦手 重い処理をすると全体のパフォーマンスが低下する Webアプリケーションを作ってみる 環境構築 Node.js Atom npm EJS コードを書いてみる practice2.js practice2.ejs 実行！ おわりに おまけ 参考 Node.jsとは？ まず作成したものの紹介をする前に、Node.jsという言語の話をしたいと思います。 Node.jsというのは一言でいえば、 サーバサイドで動作できる JavaScript 環境 のことです。 特徴 サーバサイドで動作できる JavaScript さて、ここまでの三行で既に、「？」が浮かんでいる人もいるのではないでしょうか。 JavaScript という言語は本来、ページに動きを与えることをメインとした言語です。Webページに対して、 時計を表示させてみたり 文字をループさせてみたり 等の動作を、いちいちサーバと通信しなくても可能にします。つまり、クライアント側で処理を行うことがほとんどなのです。 ですが、あくまでここまでの仕事は「メイン」です。Node.jsを利用すれば、サーバ側で行っているごにょごにょを JavaScript で記述して Node.js「クライアントもサーバも、だいたい全部私におまかせっ！」 な状態にできるのです。全ての処理をほぼNode.js一つで。おお、なんと頼もしい。 シングルスレッド シングルスレッドとは、 Node.js「同時に一つのことしかできないんだ。ごめんね」 な仕組みのことです。 Apache などのウェブサーバでは、マルチスレッド(=同時にいろいろすること)によって沢山の処理をしていますが、それゆえに同時に大量のアクセスがあると、同時にすることが増えすぎて リソースがなくなってしまう、ということが起こります。この臨界点がだいたい10,000件以上の同時接続にあることから、「C10K(クライアント1万台)問題」と 呼ばれていましたが、Node.jsはこれを解決することができるのです。 ノン ブロッキング I/O さて、Node.jsがシングルスレッドであることは説明しましたが、「じゃあNode.jsは一度にできる処理が少ないの？」というとそうでもありません。 そこで使われるのがノン ブロッキング I/Oという仕組みです。これは言ってしまえば Node.js「こっちの入力、結果出るのに時間かかりそうだから待っててね。代わりにこっちの処理先にやっちゃうよ」 という仕組みのことです。 普通のシングルスレッドの場合は、どんなに処理が遅かろうが出力が出てこなかろうが、ひとつの処理が終わらなければ次の処理に入れませんでした。 この「待ち時間」が多数の処理ができない原因なのですが、ノン ブロッキング I/Oだと待ち時間の間に次に来た処理をやっておくので、 一度にたくさんのことをやっ(ているように見せかけ)たりしながら、かつ処理のためのメモリは少なくて済むのです。 メリット フロント/サーバどちらも一貫して JavaScript で書ける 先程も説明しましたが、これがNode.jsの最大の魅力だと思います。 簡単なWebアプリケーションをローカルで動かすだけならWebサーバすら不要で、全部Node.jsがやってくれます。 ライブラリが豊富 Node.js、本当にライブラリが多いです。適当におすすめを検索してみるだけでも出てくる出てくる。やってみたいことはだいたいできるんじゃないかってくらいの勢いです。 *2 qiita.com http://cabbalog.blogspot.jp/2017/12/npm-package-25.html cabbalog.blogspot.jp npm ってなんぞや？ってなるかと思いますが、 これはNode.jsのライブラリやパッケージなどを管理してくれるツールのことで、Node.jsのインストールにくっついてきます。詳しくはのちほど。 小さな処理を素早く行うのが得意 Node.jsは総じて、小さな処理を次から次へと素早く行うのに適しています。 チャットアプリなど、発言を読み込んで出力する、といった処理なら大得意と言っていいでしょう。 デメリット 同期処理が苦手 できない...とは言わないのですが、Node.js、というか Javascript 自体が基本的に非同期処理で動いているので、 同期処理を実現しようとすると結構大変だったりします。このあたりは仕方ないのかも。 重い処理をすると全体のパフォーマンスが低下する さきほど説明したように、Node.jsはノン ブロッキング I/Oなどの仕組みによって少ないメモリで小さな処理を 数多くこなすことができるのですが、その処理自体が大きいと、数をこなすどころの話ではなくなってしまいます。 そのため、なるべく重い処理が関わるアプリには使わないほうが無難でしょう。 Webアプリケーションを作ってみる さて、それでは早速、Node.jsを使って簡単なWebアプリケーションを作成してみたいと思います。 今回の勉強会で作成したのは、「今(2018年2月)現在放送しているアニメの一覧を表示する」アプリケーションです。 環境構築 Node.js まずは Node.jsのインストール から。 今回の勉強会では、v8.9.4を利用しました。 一般にNode.jsは、「偶数verが長期サポート型、奇数verが最新機能型」らしいです。推奨は前者なのでこちらをインストール。 インストーラ の起動後は画面の指示に従うだけです。インストールする コンポーネント の選択などがありますが基本はデフォルトでOK。 インストールが成功していれば、 コマンドプロンプト (orターミナル)を開いて、 node -v と打って実行したときに、 v8.9.4 と出てくるはずです。 Atom 続いてエディターですが、特に指定はありません。 今回は使いやすさから Atom をインストールしましたが、 Eclipse などの IDE を使う人もいるとか。 npm さて、Node.jsをインストールした際に、もう一つおまけでインストールされているものがあります。 それが先ほど説明したnpm。Node.jsのライブラリやパッケージなんかを管理してくれるすごいやつです。 ひとまずは初期化処理から。 npmがインストールしたものを管理する、package. json というファイルを作成します。 インストール用のフォルダを作成して、その中で npm init を実行してください。すると、 Press ^C at any time to quit. package name: (test) //パッケージ名 version: (1.0.0) //バージョン名 description: //概要説明 entry point: (index.js) //初期表示させるファイル名 test command: //テストコマンド git repository: //Githubに保存するリポジトリ情報 keywords: //npmの公開時に使用されるキーワード author: //作者情報 license: (ISC) //npmの公開時に適用する権利情報 とまあやたら入力を求められます。とはいえ、パッケージの公開をしないのならこの辺りは全部無視でもOKです。 これが完了すると、初期化を行ったフォルダ内に、フォルダとファイルが1つづつ作成されています。 package. json にはインストールしていったものの情報が蓄積されていきます。そして、その実体はnode_moduleフォルダに格納されていきます。 今後、package. json があるこのフォルダ内で色々インストールしていくことになります。 EJS では早速、npmでひとつインストールしてみましょう。 今回は、Node.jsを使ったサイトのコーディングを、 jsp のような感じにできるEJSというテンプレートエンジンをインストールします。 テンプレートエンジンも他に色々ありますので、よければ探してみてください。 さて、先ほどのpackage. json があるフォルダで npm install ejs と打ち込みます。package. json の設定を無視したので何やら警告は出ます *3 が、大体数秒でインストールは完了します。 これでもう今回のコードを書く準備が完了しました。 さすが環境設定も早い。 コードを書いてみる ではここからやっとこさコードを書く作業に移ります。 勉強会では何回かに分けて順番にコードを書いたのですが...せっかくなので、完成版を見て解説していきましょう。 まずは肝となるjsファイルから。 practice2.js //モジュールを拡張機能として読み込む var http = require( 'http' ); var fs = require( 'fs' ); var ejs = require( 'ejs' ); var url = 'http://api.moemoe.tokyo/anime/v1/master/2018/1?ogp=1' ; //取得するjsonファイル var hostname = '127.0.0.1' ; var port = 3000; var server = http.createServer(); //httpのサーバを作成するぞー、という関数 server.on( 'request' , function (req, res) { //httpリクエストがあった(=アクセスされた)時に呼ばれる http.get(url, function (apiRes) { //指定したURLが取得出来たら呼ばれる var body = '' ; apiRes.setEncoding( 'utf8' ); apiRes.on( 'data' , function (chunk) { //データが受信されたら呼ばれる body += chunk; } ); apiRes.on( 'end' , function () { //データの受信が終わったら呼ばれる var data = {} ; data.animes = JSON.parse(body); var template = fs.readFileSync( './practice2.ejs' , 'utf-8' ); var page = ejs.render(template, data); res.writeHead(200, { 'Content-Type' : 'text/html; charset=UTF-8' } ); res.write(page); res.end(); } ); } ); } ); server.listen(port, hostname, function () { //サーバ起動時に呼ばれる console.log(`Server runnning at http: //${hostname}:${port}/`); } ); 色々と関数がありますが、だいたいは ~したときに呼ばれる という形になっています。これはイベントループという仕組みが使われているためで、平たく言えば Node.js「とりあえず待ってるから、来たものから先にやるからね！」 という処理です。今回の場合は、最初に呼ばれるのは一番下のserver.listenになるでしょう。 ...私の解説は上から行きます。 //モジュールを拡張機能として読み込む var http = require( 'http' ); var fs = require( 'fs' ); var ejs = require( 'ejs' ); var url = 'http://api.moemoe.tokyo/anime/v1/master/2018/1?ogp=1' ; //取得するjsonファイル var hostname = '127.0.0.1' ; var port = 3000; var server = http.createServer(); //httpのサーバを作成するぞー、という関数 まずは必要な変数の指定です。 requier というのは、Node.jsのモジュールを 拡張機能 として読み込む処理です。先ほどインストールしたejsの姿も。 httpは文字通りHTTPの各種機能をまとめたもので、fsはファイル操作関連の機能が入っています。 url には、表示させるアニメ情報が書かれたテキストファイル *4 が入っています。このデータを取得してejsで表示させるのが今回の目標。 hostname と port は文字通りですね。アクセスに必要です。 127.0.0.1 というのはいわば localhost のことです。 そしてserver。この処理だけでhttpサーバは作成できます。簡単すぎる... この引数に、作成時の処理を書くのが一般的らしいですが、今回は分かりにくいのでその処理は後で。 server.on( 'request' , function (req, res) { //httpリクエストがあった(=アクセスされた)時に呼ばれる http.get(url, function (apiRes) { //指定したURLが取得出来たら呼ばれる var body = '' ; apiRes.setEncoding( 'utf8' ); サーバはずっと待機状態で、指定されたポートにアクセスがあった場合に「待ってました！」と言ってserver.on以降の処理を始めます。 http.getは、引数に指定されたurlの中身を取得しようとします。成功すると次へ。 今回取得したファイルの中身はテキストファイルなので、まずは格納用の変数の用意と、 文字コード のセットを行いましょう。 apiRes.on( 'data' , function (chunk) { //データが受信されたら呼ばれる body += chunk; } ); apiRes.on( 'end' , function () { //データの受信が終わったら呼ばれる var data = {} ; data.animes = JSON.parse(body); var template = fs.readFileSync( './practice2.ejs' , 'utf-8' ); var page = ejs.render(template, data); res.writeHead(200, { 'Content-Type' : 'text/html; charset=UTF-8' } ); res.write(page); res.end(); } ); } ); } ); では、ここからファイルの中身を取得していきます。 「受信したら~」と「受信が終わったら~」に分かれているのは、データがあまりにも多すぎると Node.jsは 取得の完了を待たずに次の処理を始めることができる ためです。 いちいち全部取得してからやるより、データを取得するたびにbodyの中に次から次へと追加していったほうが処理が早いのです。 で、無事受信が完了したら、取得したテキストファイルは json 形式に変えられて、dataに格納されます。 さて、次に行う処理ですが、ここでは表示するページの設定を行っています。 ejsファイルを読み込み、ejs.renderで先ほど取得したデータをejsページに送信しています。 res.writeHeadでHTTPヘッダを記述し、res.writeでページを指定してやればページが表示できます。 最後に、res.endで読み込みを完了させてやれば終了です。 server.listen(port, hostname, function () { //サーバ起動時に呼ばれる console.log(`Server runnning at http: //${hostname}:${port}/`); } ); そして、これが本来最初に行われる処理です。サーバ起動時にどのような動作をするか、を記述します。 今回はコンソール出力をしておきましょう。 では、続いて表示側。 practice2.ejs < html > < head > < title > ejs_sample </ title > < style type = "text/css" > .div_block { width : 300px ; display : inline-block ; vertical-align : top ; margin : 5px ; border : 1px solid #555 ; } .div_header { background-color : #CCC ; padding : 10px ; height : 26px ; font-size : 12px ; } img { object-fit: cover ; width : 300px ; height : 160px ; display : block ; } .nodata { width : 300px ; height : 160px ; background-color : #EEE ; } p { padding : 5px ; font-size : 10px ; display : block ; height : 60px ; } </ style > </ head > < body > <%# ヘッダー %> < h1 > 今期のアニメ </ h1 > <%# アニメ数分ループ %> <% for (anime of animes) { %> < div class = "div_block" > < div class = "div_header" > < a href = "<%= anime.public_url %>" ><%= anime.title %></ a > </ div > <% if (!!anime.ogp.og_image) { %> < img src = "<%= anime.ogp.og_image %>" /> <% } else { %> < div class = "nodata" > no data </ div > <% } %> < p > <% if (!!anime.ogp.og_description) { %> <%= anime.ogp.og_description %> <% } else { %> no data <% } %> </ p > </ div > <% } %> </ body > </ html > jsp ライクに記述ができるので、htmlに見えるけどfor文やif文が入ってたりします。 では上から。 < html > < head > < title > ejs_sample </ title > < style type = "text/css" > .div_block { width : 300px ; display : inline-block ; vertical-align : top ; margin : 5px ; border : 1px solid #555 ; } .div_header { background-color : #CCC ; padding : 10px ; height : 26px ; font-size : 12px ; } img { object-fit: cover ; width : 300px ; height : 160px ; display : block ; } .nodata { width : 300px ; height : 160px ; background-color : #EEE ; } p { padding : 5px ; font-size : 10px ; display : block ; height : 60px ; } </ style > </ head > この部分は丸々 css が記述されています。詳しくは見ませんが、アニメ情報を一つづつ並べるためのstyleを設定しています。 <%# ヘッダー %> < h1 > 今期のアニメ </ h1 > <%# アニメ数分ループ %> <% for (anime of animes) { %> < div class = "div_block" > < div class = "div_header" > < a href = "<%= anime.public_url %>" ><%= anime.title %></ a > </ div > for文が出てきました。ひとまず、EJS独自の構文について説明します。 <%# %> はコメント扱いです。出力結果には影響しません。 <% %> は、内部がそのまま javascript 構文になります。for文やif文を使いたい場所に仕込めば、簡単にループや分岐が実現できます。 <%= %> は、 javascript 内の変数の出力です。今回は json の中身を指定して出力しています。 <% if (!!anime.ogp.og_image) { %> < img src = "<%= anime.ogp.og_image %>" /> <% } else { %> < div class = "nodata" > no data </ div > <% } %> < p > <% if (!!anime.ogp.og_description) { %> <%= anime.ogp.og_description %> <% } else { %> no data <% } %> </ p > </ div > <% } %> </ body > </ html > 今度はif文です。取得した json ファイルには、画像や説明の中身がないものもあるので、 そういった箇所にはとりあえずno dataと書いておきましょう。 ...あ、for文やif文の閉じタグも<% %>で囲うのを忘れずに。 実行！ はい、これでひとまず完成です！すごい！かんたん！ というわけで、とりあえず実行してみます。 コマンドプロンプト (or ターミナル) を開いて、 node practice2.js ...これだけ。上手く起動できれば、 Server running at http://127.0.0.1:3000 と出てきますので、早速このアドレスにアクセスしてみましょう。 しっかり画像付きで、アニメの一覧が表示されました！(流石にここに表示するわけにはいかないので隠してますが...) おわりに Node.jsがサーバサイドでしっかり動作してるのを確認いただけたでしょうか。 今回は簡単なアプリの作成のみでしたが、実際はもっとずっと色々なことが出来たりします。 言語を色々覚えなくてもサーバサイドまで処理できるので、初心者向けではないでしょうか。ぜひともみんなでやってみましょう！ あ、それと、 勉強会、楽しいからみんな参加しよう！ おまけ 就活、いよいよ始まりましたね！ 私としては、この時期だからこそ合同説明会に参加すべきだと考えています。 自分の働きたい職種が決まっていればそれらを全部見て回ると比較ができますし、そうでなくても 気になった会社の話を聴いてみると、就活のイメージがつかめると思います！ ぜひとも就活、頑張ってください！そしてご縁がありましたら、 ラク スでお待ちしています！ fresh-recruit.rakus.co.jp 参考 初心者向け！3分で理解するNode.jsとは何か? 初期化処理を行う！npm initの使い方【初心者向け】 | TechAcademyマガジン require()とは何か？何が便利なのか - Qiita Node.jsでHTTP GETしてJSONパースするメモ - Qiita テンプレートエンジンEJSで使える便利な構文まとめ - 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 *1 : この辺り、私が実際に参加した/参加を予定している勉強会の実例です *2 : その数、2017年11月現在で475,000件！ *3 : descriptionがないとか、repositoryがないとかいった感じです。package. json 自体がなくても警告が出ます *4 : のちほど json に変換するため、 json 形式で書かれています。

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大脆弱性 」といった記事があるように、個人レベルでも関心の高い話題です。 ↩