RAKUS Developers Blog | ラクス エンジニアブログ

株式会社ラクスのITエンジニアによる技術ブログです。

「tig」をつかってcommitをきれいに分割する

Git

f:id:FM_Harmony:20180404022333p:plain

はじめに

2年目のエンジニアになりました、FM_Harmonyです。 Rakus Developers Blogでは4回目の投稿です。

↓前回の記事はこちら tech-blog.rakus.co.jp

さて、弊社ではビアバッシュというイベントを行っています。（ビアバッシュ・・・?という方はコチラ）
今回はその際に私が発表したことについて、補足も踏まえつつまとめたいと思います。 テーマはtigでcommitをきれいに！です。

続きを読む

JaSST'18 Tokyo 参加レポート

テスト

3月初旬に開催されたJaSST'18の参加レポートです。 [読了時間 8分]

JaSST Tokyo とは

国内最大級のソフトウェアテストシンポジウムです。

JaSST'18 Tokyo

JaSST Tokyo の昨年と今年のベストスピーカ―賞の傾向（2017年、2018年）から、プロセス改善に注目が集まっている感もありますが、今回の JaSST'18 Tokyoの目玉はやはりなんといっても、Google ジョン・ミッコ氏の Flaky Test だと思います。

以下では、ミッコ氏による２つのセッション

を取り上げて、今回参加できなかった方でも、Google社の先進的な取り組みについて概要を把握できるよう、ポイントを絞ってお伝えしたいと思います。（ブログに掲載することについては、ミッコ氏の許可を得ております。ありがとうございます！）

基調講演 セッション A1「Advances in Continuous Integration Testing at Google」、基調講演者チュートリアル G5「How to identify test flakiness in your test result data テスト結果からテストの不安定性(test flakiness) を読み解く」

講演資料 が公開されていますが、 語彙の事前知識や質疑できる場などがないとなかなか理解しにくい箇所もあると思います。 まず、趣旨（引用）とキーワードを簡単に整理した後に、セッションの要点をお伝えします。

趣旨

  • より効果的なテストのスケジューリングとは
  • コストの削減方法
  • 不安定な自動テストへの対処（Flaky Test）

キーワード

  • SETI (Software Engineer, Tools and Infrastructure)
    • テストインフラを開発する役割
      • 8～10人のチームに1～2名のSETIがアサインされる
  • RTS (Regression Test Selection)
  • Transition
    • テスト結果がPASS→FAIL または FAIL→PASSへと状態遷移すること
  • Edge
    • テスト結果がPASS→FAIL または FAIL→PASSへと状態遷移したチェンジリストの断片
  • Greenish
    • テスト成功（グリーン）のような状態
    • 確信ではなく確率
  • Flaky Test
    • 不安定なテストのこと
      • テスト結果が非決定論的
      • 同じコードリビジョン、同じ入力と設定、においてテストが成功したり失敗したりする

Googleの自動テスト（概観）

  • 420万の独立したテスト
    • その16%は何がしかのFlakyさを持つ
  • 1日あたり1億5000万のテスト実行数
    • 平均して各テストが毎日に35回実行される
  • 1万3000以上のチーム
  • テスト実施の99%は成功する
  • テスト結果がPASS→FAILに遷移したテストのうち、84%はFlaky
    • テスト失敗の16%だけが欠陥を意味していた
  • テストの 1.23% だけがソフトウェアの欠陥を見つけている
    • 変更頻度が多いファイルは欠陥が埋め込まれやすい
    • 開発者が3人以上修正したソースは欠陥が埋め込まれやすい
      • 1人より2人がよい
      • 3人より2人がよい
    • 言語によって欠陥の埋め込まれ度合いが異なる

なんというか規模が桁違いですね！

RTSはなぜ必要か

テスト実行数を削減するため

  • テスト実行の99.8%は、テスト結果の遷移を引き起こさない
  • テスト結果の遷移を引き起こすような0.2%のテスト実行だけで十分なことになる
    • もし完璧なアルゴリズムがあれば、すべてのテストを流し続ける必要はない

Greenishという概念がなぜ必要か

テストの量、実行回数ともに莫大で、全てを実行しきれないため

  • RTSだけでは問題が多い
    • 依存関係グラフを元にした回帰テスト対象の選定（RTS）を行っても、コアモジュールへの些細な修正がほぼ全体に影響するため、一定期間のマイルストーンでのスケジューリングにおいて全テストを実行することになりがち
  • マイルストーン間は、プロジェクトの状態は決定的ではない（inconclusive）
  • 全テストを実行することによる「グリーンの確信」に代わり、「グリーンの確率」を提供している
    f:id:maskondo:20180330152612p:plain
    図1. Greenish
    • 図1で、大きい緑●が「グリーンの確信」
    • 図1で、モスグリーン四角が「グリーンの確率」
  • チームにとってはリスクを持ってリリースすることになる

遷移を見つけるまでの時間を節約することを重視 しているようです。１日経てば「過去」であり内容を忘れている、と。

Flakyという概念がなぜ重要か

テスト結果が成功から失敗に状態遷移したときでも、その84%が誤報であるため

  • システムの問題なのに、開発者にテストが不合格だったと通知がくることで調査する時間が無駄になる
  • マシンリソースの 2～16%をFlaky Testのために消費している
  • 全てグリーンでないとリリースしないため、リリースの妨げになる
  • 無視すべきでないときもある
    f:id:maskondo:20180330155635p:plain
    図2. Flaky
    • 図2で、Flakesはテスト結果が非決定論的に成功したり失敗したりするFlaky Test

Flakyなテストがあると、テスト失敗が常に欠陥を意味するとは限らなくなってしまう のです。狼少年のような存在ですね。

Flaky Testへの対処

Flaky Testを検出することで、開発者にはテスト結果に添えて「Flakyである」という旨も一緒に伝えることで、調査コストを抑える

  • Flakyさは不可避（Inevitable）との見解
    • Flakyさを除去するのと同程度には新たなFlakyさが埋め込まれる

Flaky なテストを単に無視したり削除するという考え方について、休憩時間にミッコ氏に直接尋ねることができました。不安定なテストはまだバグを捕まえるために価値があるので無視したり削除したりしてはならない（意訳）とのことでした。

Flaky Testの検出方法

テスト結果（PASS/FAILのバイナリ値のみ！）を残すだけで、Flaky Testへの洞察が得られるそうです。 特殊な操作は必要なく、単純なクエリで推定できるところがポイントです。

  • Google では テスト結果を2年間記録を残し続けている

    • PASS/FAILのバイナリ値のみ
    • Googleでは *unit.xml ファイルは残していない（が残しても構わない）

  • テスト結果の遷移であるTransitionやEdgeに着目して、経験則を育てている

    f:id:maskondo:20180330152621p:plain
    図3. Edge

    • 履歴を共有（同じタイミングで成功・失敗すること）する他のテストの数が多い場合はFlakyではない
      • ライブラリ起因などの明確な理由がある可能性が高い
    • テスト結果の遷移が多いテストは、Flakyと判断できる
      • 例えば、1日に30回もテスト結果が遷移するテストがあった場合に、開発者がそれほど頻繁に直したり壊したりをしたとは到底考えられない

チュートリアルで Flaky Test の検出を実際に Google BigQuery を使って行いましたが、とても簡単でした。

感想

自動テストへの長年の取り組みの成果として、もし自動テストを全て流せるなら「確信（100% Confident）」があるという土壌があった上で、テスト実行の運用をいかに効果的に行うか？ という次元のお話でした。 確信（100% Confident）に代わる何かが必要な状況で、ビッグデータ解析を活用するところがグーグルらしいですね。 クロージングパネルでも話されていた「アメリカでは大企業、中堅企業において自動テストは既に当たり前であり、より効果的な運用についてその興味が移っている」といった言説が印象的でした。

React Native + Expo で お手軽 Hello World！

React

f:id:FM_Harmony:20180314175546p:plain

はじめに

こんにちは！ 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コードが表示されています（読み込みできないように一部塗りつぶしています） f:id:FM_Harmony:20180314163451p:plain

ExpoではこのQRコードをスマホ上で読み込むことで、簡単に動作確認を行うことができます。 ただし、QRコードの読み込みには専用のアプリケーションが必要です。
iOSならExpo Cliant、AndroidならExpoをそれぞれマーケット上で検索すればすぐ見つかるはずです。

では、今回はiOSでQRコードを読み込んでみましょう。 アプリの読込後に、画像のような画面が表示されていれば成功です。

↓ アプリの画面（諸事情によりエミュレータ上で動かしています）
f:id:FM_Harmony:20180314164324p:plain

Hello World!

上の画像にも書いてありましたが、アプリケーションはApp.jsを編集することで変更が可能です。
そこで、アプリを読み込んだままApp.jsを開いてみましょう。

すると、<View> ... </View>で囲まれたブロック内に、<Text>...</Text>のようにタグで囲まれたコードがあるはずです。 この部分を次のように変更して保存します。

↓ ... の部分は変更しないでください

<View style = {...}>
  <Text>Hello World!</Text>
</View>

実機を確認すると、画面が自動的に変更されたことが確認できます。

↓ Hello World! になっている！
f:id:FM_Harmony:20180314165903p:plain

ということで、ExpoでHello Worldができましたね！
今回は簡単な例でしたが、Expoを使うと簡単、かつお手軽にスマホアプリ開発ができることが分かりました。

困ったところ

今回、この`Expoを触ってみて幾つか困った点があったので紹介します。

アプリが起動できない！

プロジェクトの作成も完了し、さてどんな風に動くのかなとアプリを起動させたところ・・・

↓こんなエラーが出ました。
f:id:FM_Harmony:20180314152405p:plain

そこで調べた結果、watchmanが必要なことを知ったのでした。

実機で動かせない！

簡単に実機で動作確認できることがExpoの売りですが、自分の場合実機での確認ができませんでした。
実機で動作確認するためには、作業用PCと実機が同じネットワークにある必要があるのですが、どうもそこのところで上手くいかなかったようです。

↓QRコードを読み込んでも、こういう画面が出てきてしまう。
f:id:FM_Harmony:20180314153342p:plain

なので、そういう場合はエミュレータで動作確認しましょう。

macOSの場合、XCodeに付属しているエミュレータを利用することができます。 アプリケーションを立ち上げた後に、iボタンを押せばiOSのエミュレータ上で動作確認が行えます。

ただし、その場合はxcode-select -s /Application/Xcode.appみたいな感じで、コマンドを実行しておく必要があります。 これは、XCodeのコマンドラインツールを指定しているらしい*2です。

感想

なんといっても動作確認の手軽さがすごく便利です。 ビルドのわずらわしさから解放されるだけで、かなりサクサク開発が進むなあと感じました。

あと、今回は残念ながらできませんでしたが、実機での動作確認がQRコードを読み込むだけだというのもお手軽で魅力的です。

私が今回のテーマについて勉強しようと思った理由は、「Reactってよく聞くし始めてみようかな」くらいの軽いものでした。 なので、こういう手軽なところからアプリ開発に親しみつつ、Reactについて勉強することで効率よく学習できそうだと思いました。

*1:この他にもハイブリッドアプリと呼ばれる、両者を掛け合わせたものもあります

*2:この辺りはまだ勉強中です・・・

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

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やOpenSUSE1などです。（公式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

正しく実行されると入力モードになりますので、何かを入力し、改行してみましょう。改行で形態素解析が行われ、結果が表示されます。

f:id:kasuke18:20180325214534p:plain
図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

正しく実行されると入力モードになりますので、何かを入力し、改行してみましょう。改行で形態素解析が行われ、結果が表示されます。

f:id:kasuke18:20180325215344p:plain
図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);

エラーなく実行できると以下のような結果が得られます。

f:id:kasuke18:20180325215402p:plain
図3. mecab-phpを用いたサンプルコードの実行

おわりに

この記事ではWindowsにMeCabを入れてPHPで動かすまでの手順を紹介しました。私が試してみたときはphp-mecabを入れるときに詰まりましたが、MeCab本体を入れるところまでは全く詰まらずに進められました。PHPなどで使うことを考えず気軽に形態素解析を行うという点では、MeCabはちょうどいいのかなと感じました。

参考文献

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

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

JavaScript

f:id:rs_tukki:20180315173635p:plain

はじめに

こんにちは、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サービスを使用しました。ローカルで開発環境を用意する必要がなく、クラウド上で全てが完結するのでかなり便利です。

f:id:rs_tukki:20180315173826p:plain

アカウント取得

まず初めに、Monacaの製品ページからアカウントを取得します。
Monacaは個人向けに無料プランを含む2プラン、企業向けに2プラン用意されていて、無料版でもリリースビルドまでは問題なく開発することが出来ます。
ですが、無料版だとそのビルドの回数が1日3回までに制限されていたり、Monacaが用意したプラグインしか使用できなかったりするので、いつか有料版に移行するのもありでしょう。

今回はひとまず無料版で作成します。

プロジェクトの作成

アカウントを作成したら、ダッシュボードを確認してみます。
f:id:rs_tukki:20180316095853p:plain
最初にダッシュボードを開くと「はじめてのMonacaアプリ」というプロジェクトが既に作成されています*2が、まずは自分で新たにプロジェクトを作ってみましょう。
「新規プロジェクトの作成」をクリック。
f:id:rs_tukki:20180316100949p:plain
Monacaではいくつかのサンプルアプリや、UI、JavaScriptのフレームワークを利用したテンプレートがいくつかありますので、こういったサンプルを参考にしつつ開発を進めることになると思います。
今回はひとまず「No Framework」で作成します。作成したプロジェクトを開くと、早速編集画面が出てきました。

f:id:rs_tukki:20180316102443p:plain

編集画面については、ほぼほぼ一般的なIDEと同じ見方です。私は普段Eclipseを使っていたので、画面に関しては簡単に理解できました。
画面右にはプレビューが表示されていますが、スマートフォンのネイティブな機能以外の動作は保存したものが即反映されるので、コーディングもしやすいと思います。

プラグインの有効化

さて、ここからスマートフォンのネイティブ機能を利用できるようにしていきます。
今回は、現在位置をGoogleMapに表示するアプリの作成に取り組んでみましょう。

まず、メニューバーから「設定->Cordovaプラグインの管理」を開き、現在位置を取得するためのプラグイン「Geolocation」を有効化します。
f:id:tech-rakus:20180316163620p:plain

プラグインに関しては無料版でもかなりの数があり、他にもカメラ、バーコードリーダー、バイブレーション機能などを この画面で有効にするだけで利用することができますので、調べてみてください。

Monaca側での設定はこれで完了です。

APIキーの取得

さて、続いてGoogleMapを表示させるために必要な、Google Maps APIの承認キーを取得します。
Googleアカウントでログインしてから、APIのページの右上にある「キーの取得」をクリックして32文字のAPIキーを確認してください。
f:id:rs_tukki:20180318234509p:plain
このキーをコードに埋め込むことで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共に無料でインストールができます。

f:id:rs_tukki:20180319001836p:plain

そして、インストール後に自分のアカウントにログインし、先ほどのtestプロジェクトを起動してみると...

f:id:rs_tukki:20180319084052p:plain

見事、自分の現在位置がMapに表示されました！

おわりに

ハイブリッドアプリがどれだけ簡単に作成できるかお分かりいただけたでしょうか。
当然、プラグインは今回紹介したもの以外にもさまざまありますし、HTMLやJavaScriptも難しい言語ではないと思いますので、これから何かアプリを作ってみたい！という初心者の方には最適かと思います。(これ前回の記事でも言ったな…)
皆さんも、ここから手軽にスマホアプリの開発に着手してみてはいかがでしょうか？

参考

ネイティブアプリの意味や定義 Weblio辞書
開発コスト削減＆サクサク動く！今話題の”ハイブリッドアプリ”って？ | 起業・創業・資金調達の創業手帳
ハイブリッドアプリとは? - Qiita
ハイブリッドアプリ制作で動作が重くならないために気をつけること|意識の高い時に雑記
Get an API Key  |  Maps JavaScript API  |  Google Developers
位置情報の取得 プラグイン | Monaca Docs

*1:webアプリでありながら、カメラやGPSなどスマホ本体の機能を利用するアプリのこと、という見方もあるそうです。

*2:「test」は私が作成したものです。

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

Swift

はじめに

こんにちは。ラクスエンジニアのstrongWhiteです。
今回は初心者向けSwiftプログラミング勉強会に参加したので、勉強会の内容や参加した感想を記事にしようと思います。

Swiftとは

本題に入る前にSwiftについて簡単に触れておきます。
Swiftとは、iOS向けのアプリケーションを開発するためのプログラミング言語で、Apple社が開発しました。
iPhoneやiPadをお持ちの方で、ふだん何気なしに使っているアプリはこのSwiftによって作られています。
SwiftはXcode(統合開発環境)を使って記述していきます。

f:id:strongWhite:20180317201755j:plain:w400

参加した勉強会

ふだん私は自宅でプログラミング学習をしているのですが、たまたまSwiftに関する勉強会を調べていたところ、Swiftのスの字も知らない初心者でも気軽に受講できそうな勉強会を見つけたので、思い切って参加してみることにしました。

「カフェサロンで学ぶ!超初心者向けのswiftプログラミングレッスン♪」

  • 開催地：大阪 心斎橋レンタルオフィス salon HAJIMARI
  • 日時：2018年1月21日(日) 14:00〜18:00
  • 持ち物：ノートパソコン(Mac OS)、電源コード/電源アダプタ(又はバッテリ)
  • 参加費：2,000円

いわゆるもくもく会とは違い、講義形式で簡単なアプリを作成していきます。
Xcodeの設定やプロジェクトの作成から丁寧に教えてもらえるので、「アプリについて興味はあるけどどうやって作ればいいかわからない」という人にはオススメの勉強会でした。

会場の雰囲気

会場はレンタルオフィスのカフェスペースだったので、大学の講義室のような堅苦しい感じはなく、ゆったりと心を落ち着かせながら勉強できました。
会場の管理人さんからお菓子とコーヒーを出していただいたので、プログラミングで詰まった時はうまく気分転換させることができました。
カフェスペースでコーヒーを飲みながらMacを立ち上げている様は何だかすごくエンジニアっぽいなと感じました(笑)

f:id:strongWhite:20180317210602j:plain:w400

作成したアプリ

勉強会の開催日がバレンタインデーに近かったこともあり、「プレゼントボックスをタップするとバレンタインメッセージを送れる」アプリを作成しました。
会場ではシミュレータで動作確認を行っています(iPhoneなどの端末があれば実際にアプリをインストールすることも可能です)。

f:id:strongWhite:20180317223747g:plain:w400

画面や構成要素(プレゼントボックスなどのパーツ)が少なく、複雑な挙動もしないのでプログラム自体は数十行程度の簡単なものです。
Swiftに触れて日も浅い人にはちょうどいい難易度ではないでしょうか。

参加した感想

今回の勉強会で作成したプログラムはさほど難しくなかったので、少し物足りなかった印象です。
講義自体も最初の2時間ぐらいで終わってしまったので、後半は参加者との交流にあてる形になりました。
主催者側はむしろ後半の参加者との交流に重きを置いていたらしく、積極的に参加者との意見交換を促していました。
社外のかたと積極的に関われる貴重な機会でしたので、技術談話が盛んに行いました。

最後に

自宅でのプログラミング学習は何かで詰まったり、思うように理解が進まなかったとしても自分ひとりで解決しないといけないので結構つらいです。
分厚い参考書を読んだり、Webサイトで調べたりいろいろ右往左往しないといけないと思いますが、勉強会に行くとわからないことは気軽に質問できるのでいいです。
すぐにでも知識を身に付けたい人は参考書を買うよりも勉強会に行った方がいいかもしれません。

参考

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

Linux

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

www.ospn.jp

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

f:id:MasaKu:20180319211310p:plain
openSUSE の公式マスコット「Geeko(ギーコ）」です。可愛いですね。

openSUSEとは

"Slackware”系Linuxディストリビューションで、主に欧州で人気のようです。
2017年7月より"Microsoft ストア”でもリリースされています。

f:id:MasaKu:20180318191907p:plain
デスクトップ画面

デスクトップは上図のような感じで、普段から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で行うことができます。

f:id:MasaKu:20180318192253p:plain
YaSTのトップ画面

YaSTを利用したLAMP環境の構築

驚きだったのが、YaSTのソフトウェア管理メニューを利用することで、LAMP環境が一発で構築できてしまいます。

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

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

f:id:MasaKu:20180318194956p:plainf:id:MasaKu:20180318192443p:plain
YaSTでのLAMP環境のインストール手順

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

YaSTを利用したApacheの起動

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

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

f:id:MasaKu:20180318193037p:plainf:id:MasaKu:20180318193041p:plain
Apacheの起動方法

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

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

f:id:MasaKu:20180318193053p:plain
Apacheの起動確認。「It works!」と表示されていれば起動成功

Apacheの設定

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

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

f:id:MasaKu:20180318193836p:plain
PHPを利用できるようにするための設定

重要なのはSTEP2でPHPを設定することです。
それ以外は設定する必要はありません。

設定が完了したら以下のプログラムを作成して/srv/www/htdocs/に配置して確認してみましょう。

<?php
  phpinfo();

f:id:MasaKu:20180318193805p:plain
ApacheでPHPが使える状態になっていればphpinfo()が起動して画面が表示される

おわりに

いかがでしたでしょうか。
Linuxはサーバとしてしか利用したことがなかったため、Linuxデスクトップがここまで利用しやすいものだとは思いませんでした。
OS無しのノートパソコンを一台購入して、openSUSEを入れてしっかりと使ってみたいという気持ちにもなりました。
Linuxデスクトップに興味がある方や、古くなったパソコンを再利用してみたい、という方は利用してみてはいかがでしょうか。

参考サイト

「openSUSE Leap」がWindows 10の“ストア”に登場 ～「SUSE Linux Enterprise Server」も - 窓の杜
KDE4のデスクトップ効果の解説
さくらのVPSにopenSUSE Leap42.2が提供されたのでLAMPな環境を構築してみる

ラクスの技術 / デザイン情報サイト
Copyright © RAKUS Co., Ltd. All rights reserved.