React Native + Expo で お手軽 Hello World！

はじめに

こんにちは！ FM_Harmonyです。 Rakus Developers Blogでは3回目の投稿になります。

↓ 前回の記事はコチラ tech-blog.rakus.co.jp

先日、React Nativeを使ったスマホアプリ開発についての勉強会に参加しました。 なので、今回はその時学んだこと + 後から自分で調べたことについてまとめました。

この記事が、「Reactやってみたいなー」という方の参考になれば嬉しいです。

前置き〜スマホアプリの分類

いわゆるスマホアプリは大きく分けて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:この辺りはまだ勉強中です・・・

WindowsにMeCabを入れてPHPで動かしてみる

はじめに

新卒1年目エンジニアのkasuke18と申します。
先月に開催された社内の技術交流会ビアバッシュの発表の中でMeCabについて触れた発表がありました。
※ビアバッシュ...？という方はこちらをご参照ください。

そのMeCabに興味をもちましたので、今回の記事ではMeCabをWindowsに導入して使ってみます。以下は私の環境でインストールしたときのものなので、ディレクトリなどを随時読み替えてください。

まずはサンプル

形態素解析とはどのようなものかを確認するサンプルを作成、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¹などです。（公式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

---

1. よろしければこちらもご一読ください。 「openSUSE」で始める初めてのLinuxデスクトップ↩

自由度抜群！コスト削減！「ハイブリッドアプリ」の仕組みと「Monaca」で作るスマホアプリ

はじめに

こんにちは、rs_tukkiです。毎回毎回タイトル絵クソだせぇのどうにかしたい
最近、会社の内外問わず、スマホアプリの話題が増えてきたように思います。皆さん仕事が仕事なのでそういった話に敏感なのかもしれませんが、手軽に持ち運べるスマホで手軽に使える形というのが、これから(というより既に)アプリ開発の主流になっていくことでしょう。
ですが、スマホアプリの開発はそう手軽にはいきません。言語は新たに習得しなければならなかったり、それを機種ごとに開発しなければならなかったりと、今までWEBでアプリを開発してきた人にとっては地味にハードルが高いのではと思います。

そこで今回は、それらの問題を一気に解決できるハイブリッドアプリと、その開発環境である「Monaca」を使って実際にハイブリッドアプリを作ってみるお話をします！

ハイブリッドアプリとは？

まず一般的に、スマホ上で動作するアプリは「ネイティブアプリ」と「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」は私が作成したものです。

初心者向けSwiftプログラミング勉強会に参加しました

はじめに

こんにちは。ラクスエンジニアの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

「openSUSE」で始める初めてのLinuxデスクトップ

MasaKuです。もうすぐ社会人１年目終了です。
近況ですが、先日大阪で開催されたオープンソースのイベントOSC OSAKA 2018に参加しました。

www.ospn.jp

イベントの中で「openSUSE」のセッションがあったのですが、Linuxデスクトップを使ったことがない私のような初心者でも扱いやすそうなWindowsライクな画面で興味を持ちました。
また、発表者さんの展示ブースの方にも訪れたんですが、openSUSE Leap42.3のインストールディスクを頂いたので、古くなったノートパソコンにインストールして使ってみたいなと思いました。

openSUSE の公式マスコット「Geeko(ギーコ）」です。可愛いですね。

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環境が一発で構築できてしまいます。

構築手順は以下の通りです。

1. メニューの中からソフトウェアを選択しソフトウェア管理を選択
2. 検索バーにLAMPと入力
3. 検索で見つかった「patterns-openSUSE-lamp_server」を選択して了解ボタンを押下

YaSTでのLAMP環境のインストール手順

あっという間にPHPが実行できる環境が出来上がりました。

YaSTを利用したApacheの起動

インストール完了後にApacheの動作確認を行います。
Apacheの起動もYaSTで行うことができます。

1. メニューの中からシステムを選択し、サービスマネージャーを選択
2. Apache2を選択して有効に変更し、開始を押下する
3. OKを押下して、変更を確定する

Apacheの起動方法

これでApacheの起動が完了です。

FireFox で localhostもしくはApacheを起動しているコンピュータのIPアドレスにアクセスするとApacheが起動したことを確認することができます。

Apacheの起動確認。「It works!」と表示されていれば起動成功

Apacheの設定

PHPを利用するためにはapacheを設定する必要がありますが、こちらもYaSTで設定することができます。

1. ネットワークサービスを選択し、HTTPサーバを選択
2. ウィザードに従ってサーバの設定を行う

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という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の「現在のタブを閉じる」をw1つでできるようにしています
  • したかったことの1つ「2キーのショートカットを1キーで行いたい」を実現している設定です

map e :duplicate

• eと押した後にEnterを押すと「現在のタブを複製する」を実行できます
  • したかったことの1つ「存在しないショートカットを使いたい」を実現している設定です

let hintcharacters "asdfgjklwertuioxcvnm"

• fでページ内にリンクを割り振る際に使用できるキーを設定しています

set noautofocus

• 開いた際に入力欄にフォーカスされるページだと、ショートカットを使う前に入力欄からでる(escを押す)必要があります。面倒なので、入力欄にフォーカスしないように設定しています

終わりに

この記事ではcVimについてご紹介しました。ここではCSSなどの設定には触れませんでしたが、他にも色々と設定ができるので気になった方は調べてみてください。

参考

• Google ChromeでcVimの設定をアップデート
• クマーなひとときv2

クラウドサービスのエンジニアが読んでほしい！技術書・ビジネス書 2018

id:radiocat です。最近読んだ書籍は カイゼン・ジャーニー です。

先月、「ITエンジニアに読んでほしい！技術書・ビジネス書大賞 2018」が発表されました。

www.shoeisha.co.jp

今年の大賞は以下の通り決まったようです。

技術書部門

機械学習入門 ボルツマン機械学習から深層学習まで

ビジネス書部門

職場の問題地図 ~「で、どこから変える?」残業だらけ・休めない働き方

---

この企画は翔泳社さんの主催で毎年開催されています。その年の旬な技術書を知ることができるので楽しみにしているエンジニアの人も多いのではないでしょうか？

というわけで、このイベントにあやかって弊社社内でもおすすめの書籍についてアンケートを取ってみました。開発部の新人から部長まで役職や職歴を問わず、特にテーマや制限も設けず、現時点で人におすすめできる書籍を1人最大5冊まで選んでもらいました。ただ、この記事のタイトルの通り弊社はクラウドサービスの会社でWeb系のエンジニアが多いため、本家の投票結果よりはジャンルが少し限定されてしまう点は念頭に置いていただければと思います。題して「クラウドサービスのエンジニアが読んでほしい！（と思っている）技術書・ビジネス書 2018」です。

---

---

RAKUS Developers に最も支持されている1冊

まずは最も多くの票を集めた技術書・ビジネス書をそれぞれ紹介します。

技術書部門：リーダブルコード

本家の技術書・ビジネス書大賞でも2014年に大賞に輝いた書籍が全体で最多の票数を集めました。初版は2012年ですが、いまだに新人からベテランまで多くのエンジニアが拠り所にしている不動の名著です。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)

• 投票者のコメント

プログラマにとっては、教科書的な本だと思いました。

言わずもがなエンジニアは全員読んだほうがよい本。

ビジネス書部門：トヨタ生産方式

カイゼンのバイブルとも言える不動の名著がビジネス書のトップでした。初版は1978年で、業界を選ばず40年間読み続けられており、IT業界でもアジャイル開発を中心としてカンバンなどの形で取り入れられています。立場を選ばずマネジメントにも開発の現場にも支持されている1冊と言えます。

トヨタ生産方式――脱規模の経営をめざして

• 投票者のコメント

何十年も前に考えられた方式「かんばん」が今のソフトウェア開発に生きているという点は感慨深い。

自身のソフトウェア開発プロセスを考えながら読むと、まったく製造業に限定されないことだと分かって驚く。

RAKUS Developers が選ぶオススメの5冊

次に、惜しくもトップの座は逃しましたが、多くの票を集めたベスト5を投票者のコメントと合わせて紹介します。どの本もトップの1冊に劣らない名著で、開発チーム内で話題になって薦め合ったり、読書会の題材になったりしたことで票が集まったようです。

技術書：達人プログラマー

新装版 達人プログラマー 職人から名匠への道

エンジニアが基本とすべき考え方や視点がたくさん含まれており、経験を経てから読んでも新たな気付きがあるため手元において数年おきに読みたい本。

初心者の自分にとっては「銀の弾丸は無い」ということに改めて気付かされる一冊でした。

技術書：デザイン組織のつくりかた

デザイン組織のつくりかた デザイン思考を駆動させるインハウスチームの構築&運用ガイド

UIパーツのデザインやリサーチ、UX設計など広範囲に渡っているデザイナーの仕事を1人でこなすのは現実的ではなく、ユーザーの利用とビジネス上の要求を充たすためのデザイン組織をどのようにして組み立てていくのが良いか、示唆に富んだ内容。

技術書：SCRUM BOOT CAMP THE BOOK

SCRUM BOOT CAMP THE BOOK

スクラムとは何か・どういった流れで進んでいくのかが漫画を交えて分かりやすく説明されています。

スクラムをやったことが無い人向けにスクラムがどういうものかを説明した解説書の中で最もわかりやすく、それでいて重要な要素がしっかり説明されている。

ビジネス書：「残業しないチーム」と「残業だらけチーム」の習慣

「残業しないチーム」と「残業だらけチーム」の習慣 (Asuka business & language book)

「残業しないチーム」と「残業だらけチーム」を比較しながら様々なケースを例に書いてあり読みやすいです。

すぐに実践出来ることが多いので読んですぐに試せます。

ビジネス書：入社1年目の教科書

入社1年目の教科書

配属されて間もない頃は相談や質問の仕方で戸惑う場面もあるので参考になりました。

社会人の心構えについて大事なポイントを丁寧に解説されています。

RAKUS Developers のひとりひとりが厳選した1冊

ここまで紹介した書籍以外にもその人の立場や仕事内容によって、おすすめの書籍はまだまだたくさんあります。アンケートでは合計で100冊近くの書籍が投票されました。そこで、せっかくなので投票者ひとりひとりの推しが特に強かった1冊を、選んだ人の立場や仕事内容ごとに分類してピックアップしてみました。

若手エンジニアが選んだ6冊

前出の『リーダブルコード』や『入社1年目の教科書』も若手の票が多く集まった書籍でしたが、他にもたくさんの名著が選ばれました。これから社会人になる人にもオススメできそうです。

7つの習慣

7つの習慣-成功には原則があった!

適切な内省で自身の成長させるフローが明確かつ説得力ある形で記載されており、技術にかぎらず自身のキャリアパスなり日々の行動のヒントとなる

99%の人がしていないたった1%の仕事のコツ

99%の人がしていないたった1%の仕事のコツ (たった1%のコツシリーズ)

仕事に取り組むための姿勢やとるべき態度が記載されています

レバレッジ・リーディング

レバレッジ・リーディング

忙しい社会人でも多くの本を読むべきなので、そのノウハウを紹介している本書はとても有用です。

エンジニアを説明上手にする本

エンジニアを説明上手にする本 相手に応じた技術情報や知識の伝え方

顧客/オペレーター/経営者/新人...前提知識がそれぞれ異なる人にうまく説明するにはどうすればいいかがわかりやすく掲載されています

プリンシプル オブ プログラミング

プリンシプル オブ プログラミング 3年目までに身につけたい 一生役立つ101の原理原則

「達人プログラマー」「プログラマが知るべき97のこと」等の名著のエッセンス（＝プリンシプル）が凝縮されています。

現場で使えるデバッグ & トラブルシュート Java編

現場で使えるデバッグ & トラブルシュート Java編

実践的なトラブルシュート対応方法（Javaのみ）が書いてある本。初心者向けにJavaリソースの仕組みなども学べる。

熟練エンジニアが選んだ4冊

経験を積んだエンジニアからは、さらに熟達を目指すテーマの書籍が選ばれています。経験と領域は選びますが側に置いて長く活用できそうな書籍ばかりです。

Java言語で学ぶデザインパターン入門

増補改訂版Java言語で学ぶデザインパターン入門

言わずとしれた名著でJavaで仕事をするなら読んでおきたい本。

カンバン仕事術

カンバン仕事術

カンバンのやり方をよく理解することができた。

情熱プログラマー

情熱プログラマー ソフトウェア開発者の幸せな生き方

プログラマーにとって大切なことが詰まっていて、読むと前向きになれる。定期的に読み返したい。"

40歳を過ぎたら、働き方を変えなさい

40歳を過ぎたら、働き方を変えなさい

色々と省略しましょうとか、若手に任せましょうとかは共感できました。

スペシャリストが選んだ4冊

社内でも特に技術志向の強いのエンジニアが選んだ書籍を集めてみました。選んだ本のタイトルからもその志向が垣間見える気がします。そして何よりも投票者のコメントがみんなアツすぎて記事を編集するほうも圧倒されてしまいました。

入門 コンピュータ科学 ITを支える技術と理論の基礎知識

入門 コンピュータ科学 ITを支える技術と理論の基礎知識

コンピュータサイエンスの教科書。学生時代に情報学部ではなかった人はあまり体系的に学ぶ機会がないので読んでおいた方がいいというか読まないとどこかでITエンジニアとして頭打ちになる。

アーキテクチャを考えるとき、トラブルシューティングするとき、より良い設計やソースコードを判断するときなど、あらゆる場面の基礎となる知識が含まれる。

UNIXという考え方

UNIXという考え方―その設計思想と哲学

良い設計を考えるきっかけになった本。様々なプログラミング原則やプラクティスはここに帰着する。

どのプログラミングハウツー本を読むべきか迷ったらまずはこの１冊を読むことをおすすめする。

テスト駆動開発

テスト駆動開発

原理主義的なテストファーストをするかどうかは別として、自動テストを書くことで得られる心理的な安心感や、高速なフィードバックループ、動くものを作ってからリファクタリング、というTDDの良さを感じてほしい。

本書前半の多国通貨を実際に写経することで、タスクを細かく（執拗なまでに細かく）分割し、自動テストに支えながら1つずつやっつけていく気持ちよさをぜひ味わってほしい。

すごいHaskellたのしく学ぼう!

すごいHaskellたのしく学ぼう!

Haskell言語の入門的読み物として代表的な本です。

実際にアプリを作れるところまではいきませんが、ファンクターやモナドといったHaskellで中心的な概念を読みやすく説明してくれています。

読んでいると何となく自分もHaskellで何か作れそうな気がしてきます。

デザイナーが選んだ4冊

デザイナーからのオススメもその仕事に沿った特徴的な書籍が選ばれました。Web系エンジニアとしても抑えておきたい本が並んでいます。

ユースケース駆動開発実践ガイド

ユースケース駆動開発実践ガイド

要求からドメインモデルとユースケースを作い、ソフトのあり方を段階的に明らかにしていくICONIXプロセスについての本。 実践を想定した具体的な内容で、「こうしましょう」でなく「こうすると失敗しやすい」が書かれているので心強い。

エンジニアのための図解思考

エンジニアのための図解思考 再入門講座

自分の頭の中の整理の方法や考えかたなど図示するテクニックが載っているので、業務で実践しやすい。

SOSの猿

SOSの猿 (中公文庫)

「自社開発した株の発注システムが誤動作して300億円の損失を出した原因を調べる」...いや、怖いです。 これを実は顧客より、UIのせいにされるんですが、UIデザイナの友人などは身に染みると申しておりました。

問題解決ラボ

問題解決ラボ――「あったらいいな」をかたちにする「ひらめき」の技術

固い頭を柔らかくする本

マネージャーが選んだ5冊

最後にマネージャーからもオススメの書籍を選んでもらいました。組織の方向性を示してエンジニアを束ねる視点で選ばれているのがわかります。これからマネジメントを学ぼうとしているエンジニアも読みたい書籍の数々です。

ケン・ブランチャード リーダーシップ論

ケン・ブランチャード リーダーシップ論[完全版]

リーダー、管理職等マネジメントを担うメンバは読んでおくべき基本書。

サーバント型リーダシップ、重要ですね。

1分間マネジャー―何を示し、どう褒め、どう叱るか!

1分間マネジャー―何を示し、どう褒め、どう叱るか!

管理職としてメンバーと接する時に１分という短い時間で大きな成果を得るためにを考えさせられた。

本自体は古いが１分間振り返りなどためになるものがあった。

なぜ、あなたの仕事は終わらないのか

なぜ、あなたの仕事は終わらないのか

タスクの進め方でお悩みの方、段取りが悪くてタスクが上手く進めれない方へ 時間術、仕事術についてわかりやすく書いています。エンジニアの著書でもあり日々の自分たちの状況とマッチする話も多いと思います。

Inspired: 顧客の心を捉える製品の創り方

[asin:B00TCM8TB4:detail]

正しい製品とは何かを考えさせられ、また正しく製品を作る方法が解説されている。

製品にはエンジニアリングはもちろんのこと、その他にもプロダクトマネジメント、UX/UIデザイン、プロジェクトマネジメント、システム運用、プロダクトマーケティングが必要で開発で関われる範囲の広さを知ることができると共にキャリアプランを考える際に参考にできる。

Joy, Inc.

ジョイ・インク 役職も部署もない全員主役のマネジメント

アジャイルの理想型のイメージが掴めた

世の中にこれほどまでにJOYを突き詰めた会社がある事に驚き。その会社が口コミだけで仕事が舞い込み、ビジネスが機能しているのはまさにwin-winな関係性。素晴らしいの一言。

おわりに

手元のアンケート結果をながめてみると紹介したい本はまだまだたくさんありますが、これだけでも30冊になったので今回はここまでにしたいと思います。30冊もありますが、知らないタイトルは無いくらいどれも著名な書籍ばかりだと思います。また、投票した人の仕事内容に合わせて分類してみるとそれぞれ選ばれた書籍に特徴があったのも興味深い結果でした。自分の興味のある分野の本で未読のものがあれば読んでみてはいかがでしょうか。そして機会があればまた来年も実施してみますのでお楽しみに。