読者です 読者をやめる 読者になる 読者になる

takedajs ログ

備考録

Android Studioを利用してKotlinでHello Worldを表示する

Androidアプリを作れるKotlinで、Android StudioエミュレータHello Worldを表示してみました。

数年前にAndroidアプリを開発してリリースしたことがあるのですが、それ以来アプリ開発はしていませんでした。 最近KotlinがAndroidの正式な開発言語になったのもあり、良い機会なのでこれからKotlinを色々と触ってみたいと思います。

今回の記事では、Android Studioの導入から、KotlinでHello Worldを表示するまでを書いています。

記事の流れ

以下の流れで本記事は構成されています。

開発環境

IntelliJ IDEAでも開発ができるみたいですが、Googleの公式IDEであるAndroid Studioで開発していこうと思います。

以下、公式サイトからAndroid Studioをダンロード
https://developer.android.com/studio/index.html?hl=ja

プロジェクト作成

Android Studioを起動して、「Start a new Android Studio project」を押下。

f:id:takedajs:20170521220258p:plain

任意のApplication nameを指定して、Nextを押下。

f:id:takedajs:20170521220400p:plain

「Phone and Tablet」をチェックし、Minimum SDK を選択し、Nextを押下。
今回はMinimum SDKとしてAPI 21:Android 5.0 (Lollipop)を選択。

f:id:takedajs:20170521220622p:plain

初期に作成される画面を選択して、Nextを押下。
今回はHello Worldを表示させるだけなので、Empty Activityを選択。

f:id:takedajs:20170521220705p:plain

何も変更せず、Finishを押下。

f:id:takedajs:20170521220720p:plain

これでプロジェクトが作成されます。
ただ、作成されたMainActivity.javaの拡張子を見ても分かる通り、この段階ではKotlinファイル(.kt)ではなくJavaファイル(.java)になってます。

f:id:takedajs:20170521220746p:plain

また、Hello Worldが表示されるlayoutも自動で作成してくれています。

f:id:takedajs:20170521220826p:plain

次からKotlinを導入していきます。

Kotlin導入

Kotlinプラグイン導入

Android Studio -> Preferences を押下。

f:id:takedajs:20170521220852p:plain

Plugins内の「Install JetBrains plugin…」を押下。
青く選択されているAndroid Gamesは関係ないです。

f:id:takedajs:20170521220916p:plain

検索バーにkotlinを入力してKotlinのインストールを押下。
僕は既にインストール済みなので、インストールボタンが表示されていません。

f:id:takedajs:20170521220932p:plain

Kotlinプラグインをインストール後、Android Studioを再起動。

JavaファイルをKotlinファイルに変換

再起動後、改めてプロジェクトを開きます。その後、メニューバーの Code -> Convert Java File to Kotlin File を押下。

f:id:takedajs:20170521221033p:plain

MainActivityがJavaファイル(.java)からKotlinファイル(.kt)に変換されます。

f:id:takedajs:20170521221045p:plain

Kotlinファイルのビルドを可能にする

メニューバーのTools -> Kotlin -> Configure Kotlin in Project を押下。

f:id:takedajs:20170521221106p:plain

バージョンなど選択できるが、何も変更せずに OK を押下。

f:id:takedajs:20170521221117p:plain

以上で、Kotlinを実行する準備が整いました。

Hello World表示

エミュレータで起動するデバイス作成

メニューアイコンにある実行ボタン(緑色の▶)を押下すると、実行するデバイス指定画面が表示される。 Create New Virtual Device を押下。

f:id:takedajs:20170521221227p:plain

利用するデバイスを選択して、Nextを押下。今回はNexus5Xを選択。

f:id:takedajs:20170521221253p:plain

利用できるAndroidのバージョンが表示される。今回はAndroid7.0を利用する。 利用バージョンがDownloadされていない場合は、Release Name に Downloadが表示されるので押下。

f:id:takedajs:20170521221331p:plain

Installerが表示されるので、インストールが完了したら Finish を押下。

f:id:takedajs:20170521221342p:plain

インストールが完了すると、Android7.0が選択できるようになります。
Android7.0を選択して、Nextを押下。

f:id:takedajs:20170521221414p:plain

バイス名を変更できるが、今回は何も変更せずに Finish を押下。

f:id:takedajs:20170521221429p:plain

エミュレータを起動

作成したデバイス(Nexus5X)が一覧に表示されるようになります。
Nexus5Xを選択して、OK を押下。

f:id:takedajs:20170521221445p:plain

エミュレータが起動して、Hello World が表示されます。
エミュレータの起動が遅いので表示されるまで気長に待ちましょう。

f:id:takedajs:20170521221459p:plain

まとめ

今回の記事では、Android Studioの導入から、KotlinでHello Worldの表示までを紹介しました。 Kotlinを開発する準備が整ったので、次からはAndroidアプリリリースに向けて、Kotlinで色々と実装していきたいと思います。

Kotlinの開発環境を構築せずに少し触ってみたい方は、以下のオンライン上でKotlinを実行できるサイトで触ってみるのが良いかもですね。
https://try.kotlinlang.org/#/Examples/Hello,%20world!/Simplest%20version/Simplest%20version.kt

参考

[Android] Hello world アプリを Android Studioで作成

Android開発ではじめるKotlin - Qiita

PHPMDでコード解析を行う

PHPで書かれたコードの解析を行ってくれる「PHPMD」を導入して試してみました。PHPMDは、複雑過ぎる表現や未使用の変数などを指摘してくれます。 この記事では、PHPで書いたサンプルコードの解析を行った結果までを書いています。

開発環境

PHPMD導入

PHPMDの安定版を確認
https://phpmd.org/download/releases/index.html

2017/5/5現在で2系まで出ているので、Composerで2系の安定版を導入

$ php composer.phar require "phpmd/phpmd=~2.0"

導入されたパッケージ確認

$ view composer.json

{
    "require": {
        "phpmd/phpmd": "~2.0"
    }
}

PHPMD導入確認

$ ./vendor/bin/phpmd -h

使い方や使えるオプションについては、上記のコマンドを叩きヘルプを見たり、PHPMDのGithub(参考に記述)をご確認ください。

コード解析

PHPMDにはコード解析に利用する既存のルールが複数あります。(参考に記述) 今回は、名前に関するルール(Naming Rules)と未使用コードに関するルール(Unused Code Rules)を利用して、以下のサンプルコードを解析します。

サンプルコードを指定ルールで解析
名前の長さや、未使用変数について指摘してくれているのが分かります。

$ ./vendor/bin/phpmd test.php text unusedcode,naming

/vagrant/test.php:5 Avoid variables with short names like $t. Configured minimum length is 3.
/vagrant/test.php:7 Classes should not have a constructor method with the same name as the class
/vagrant/test.php:10    Avoid unused local variables such as '$test'.

指摘された箇所を以下のように修正

修正後のサンプルコードを再度解析
コマンドを叩いても何も表示されず、正しく指摘箇所を修正できたことが分かります。

$ ./vendor/bin/phpmd test.php text unusedcode,naming

まとめ

コマンドを叩くだけでコードの解析解析を行ってくれるのは便利ですね。 今回はコードの解析ルールとして、名前と未使用コードに関数ルールを利用しましたが、他にもまだ複数個あります。 また、独自にカスタマイズしたルールも利用可能ですので、各々の環境に合ったルールを作っていくことも可能です。

参考

https://github.com/phpmd/phpmd

https://phpmd.org/rules/index.html -既存ルール記述

PHPの静的コード解析ツール『PHPMD』を使ってみた。 - Qiita

PHP_CodeSnifferでコードの規約チェックと自動整形を行う

PHPで書かれたコードの規約チェックと自動整形を行ってくれる「PHP_CodeSniffer」を導入して試してみました。 2系から自動整形に対応したみたいです。

この記事では、PHPで書いたサンプルコードの規約チェックと自動整形を行った結果までを書いています。

開発環境

PHP_CodeSniffer導入

PHP_CodeSnifferの安定バージョン確認
http://pear.php.net/package/PHP_CodeSniffer

2017/5/3現在で2.8.1がstableなので、Composerで2系を導入

$ php composer.phar require "squizlabs/php_codesniffer=2.*"

導入されたパッケージ確認

$ view composer.json

{
    "require": {
        "squizlabs/php_codesniffer": "2.*"
    }
}

PHP_CodeSniffer導入確認
コードの規約チェック(phpcs)と自動整形(phpcbf)のコマンドが利用できるか確認

$ ./vendor/bin/phpcs -h
$ ./vendor/bin/phpcbf -h

コードの規約チェックと自動整形

以下のサンプルコードを利用してコードの規約チェックと整形を行って行きます。

コード規約チェック

利用できるコーディング規約を確認

$ ./vendor/bin/phpcs -i

The installed coding standards are MySource, PEAR, PHPCS, PSR1, PSR2, Squiz and Zend

今回はPSR2を利用してチェックを行う
コマンドを叩くと、エラーが発生

$ ./vendor/bin/phpcs --standard=PSR2 test.php

PHP Fatal error:  Call to undefined function simplexml_load_string() in
/vagrant/vendor/squizlabs/php_codesniffer/CodeSniffer.php on line 697

php-xmlが導入されていないのが原因だと分かり、php-xmlを導入

$ sudo yum install --enablerepo=remi-php56 php-xml

改めてPSR2を利用したチェックを行うと正常に動作した。
修正箇所が表示され、どこを修正すれば良いか分かります。

$ ./vendor/bin/phpcs --standard=PSR2 test.php

FILE: /vagrant/test.php
----------------------------------------------------------------------
FOUND 2 ERRORS AND 1 WARNING AFFECTING 3 LINES
----------------------------------------------------------------------
 5 | ERROR   | [x] Expected 1 space after closing parenthesis; found
   |         |     "       "
 7 | WARNING | [x] Usage of ELSE IF is discouraged; use ELSEIF
   |         |     instead
 9 | ERROR   | [x] Expected 1 newline at end of file; 0 found
----------------------------------------------------------------------
PHPCBF CAN FIX THE 3 MARKED SNIFF VIOLATIONS AUTOMATICALLY
----------------------------------------------------------------------

Time: 458ms; Memory: 3.25Mb

上記の結果表示だと修正箇所が英語で書かれいて分かりずらいです。
そんな時は、–report=diffオプションを付けると、指摘箇所と修正後のdiffを表示してくれて便利です。

$ ./vendor/bin/phpcs --standard=PSR2 --report=diff test.php

--- test.php
+++ PHP_CodeSniffer
@@ -2,8 +2,8 @@

 $test = 1;

-if ($test == 1)       {
+if ($test == 1) {
     echo $test;
-} else if ($test == 2) {
+} elseif ($test == 2) {
     echo $test;
-}
\ ファイル末尾に改行がありません
+}

コード自動整形

PSR2を利用して自動整形を行う
コマンドを叩くと、エラーが発生(こっちでもエラー発生…orz)

$  ./vendor/bin/phpcbf --standard=PSR2 test.php

Processing test.php [PHP => 24 tokens in 7 lines]... DONE in 14ms (1 fixable violations)
        => Fixing file: 0/1 violations remaining [made 2 passes]... DONE in 3ms
sh: patch: コマンドが見つかりません
Array
(
)
Returned: 127
Time: 258ms; Memory: 3Mb

patchコマンドを実行できないのが原因なので、patchを導入

$ sudo yum install patch

改めてPSR2を利用した自動整形を行うと正常に動作した

$ ./vendor/bin/phpcbf --standard=PSR2 test.php

Changing into directory /vagrant
Processing index.php [PHP => 51 tokens in 9 lines]... DONE in 15ms (3 fixable violations)
        => Fixing file: 0/3 violations remaining [made 3 passes]... DONE in 6ms
Patched 1 file
Time: 507ms; Memory: 3.25Mb

以下、自動整形される前と後のコードです。phpcsコマンドを叩いて指摘された箇所が修正されているのが分かります。

自動整形前のコード

自動整形後のコード
(Gist上では最後の行に改行が表示されていないが、自動整形されたコードは改行されていました。)

まとめ

コマンドを叩くだけでコードの規約チェックと自動整形を行ってくれるのは便利ですね。 今回はコード規約としてPSR2を利用しましたが、独自にカスタマイズ規約を作成して読み込ませる ことも可能みたいです。自動整形などはこういったツールを使うのが良いですね。

参考

https://github.com/squizlabs/PHP_CodeSniffer

https://github.com/squizlabs/PHP_CodeSniffer/wiki
(使い方やオプションが記述されています。)

PHP 5.5 などで PHP-XML などのインストール方法 - ワイ、そして IT ときどき何か。

タブの色を変えるFirefoxアドオンを開発した

自分が欲しいと思った機能があるFirefoxアドオンがなかったので、開発しました。 前回はアドオンの開発環境構築まで書きました。今回は開発したアドオンについて書きます。

開発したアドオン

内容

表示されているページのURLに指定したキーワードが入っている場合、そのページのタブを赤くします。 以下、指定キーワードに「yahoo」を入れた場合です。キーワードは複数選択可能です。

URLに「yahoo」がある為、タブが赤くなっている。

URLに「yahoo」がない為、タブの色は変わらない。

開発した理由

開発環境サイトと本番環境サイトを見分けるためです。 開発環境と本番環境の違いをURLを毎回見て確認していました。 本番環境のURLを指定キーワードに追加することで、タブが赤くなったら本番環境と認識できます。 その結果、本番環境での操作ミスを減らすことができるのではないかと考えました。

導入方法

このアドオンは、公開するために必要なMozilaに申請を行っていません。 そのため、ローカルでのみアドオン導入が可能です。 ローカルでのアドオンの導入方法についても前回の記事に記述しています。

以下、大まかな導入までの流れです。
Githubからソースをclone
・任意の指定キーワードを設定するためにコードを修正
・xpiファイルを作成
Firefoxに導入

アドオンの中身

メインのファイルであるindex.jsを添付します。 ウィンドウ内のレイアウトを変更することは簡単なのですが、タブの色を変更する処理の実装方法が分からず少し躓きました。 userChrome.cssを変更する必要があることが分かり、XPCOMという技術を利用して実装しました。 (var sss, var ios の箇所)

gist2f90c2568bf39275267fd59c28dcd72d

まとめ

ローカルのみでしか導入できませんが、欲しかった機能を持ったアドオンを開発できました。 今後改良していく予定は未定ですが、やるとしたら以下を行っていきたいです。
Chromeと互換性があるWebExtensionで作り直して公開する。
・メニューバーから指定キーワードの設定、色の設定を可能にする。

参考

tabs - Mozilla | MDN

GitHub - func0der/colorfulTabs: A firefox extension originally written by binaryturf with some modifications

スタイル | Firefoxアドオン開発

XULで動的にスタイルシートを読み込む方法が分かった - mollifier delta blog

nsIStyleSheetService - Mozilla | MDN

macでFirefoxのアドオン開発環境を構築する

メインブラウザはFirefoxを利用しています。自分が欲しいと思った機能があるFirefoxのアドオンがなかったので、作成していきます。 今回は、アドオンの開発環境構築までを書きました。

Firefoxのアドオンについて

アドオンの種類

アドオンには以下3つがありますが、今回は拡張機能を作っていきます。

開発方法

最新の開発方法として、複数ブラウザで動作するWebExtensionを用いた方法がありますが、 参考になる記事が少なかったため、一つ前のjpmを利用した開発方法で行います。

開発環境構築

npm導入

npmでjpmをインストールするため、Node.jsを導入します。 Node.jsのバージョン管理ツールであるnodeBrewを利用します。 Node.jsが既に導入されている方は、こちらは飛ばしてください。

nodebrew導入

$ wget git.io/nodebrew
$ perl nodebrew setup
$ $export PATH=$HOME/.nodebrew/current/bin:$PATH
$ source ~/.bashrc

nodebrew導入確認

$ nodebrew help

Node.jsの安定版(stable)バージョンをインストール

$ nodebrew install-binary stable

インストール確認

$ nodebrew ls
v7.7.4
current: none

利用バージョン選択

$ nodebrew use v7.7.4
use v7.7.4

Node.js導入確認

$ node -v
v7.7.4

npm導入確認

$ npm -v
4.1.2

jpm導入

$ npm install jpm -g

開発準備

任意の場所に作業ディレクトリを作成

$ mkdir test_addon
$ cd test_addon

ディレクトリの初期化
色々と質問されますが、今回はサンプルなので適当に記述します。

$ jpm init
title: (My Jetpack Addon) test_addon
name: (testaddon) test_addon
version: (0.0.1)
description: (A basic add-on) test_addon
entry point: (index.js)
author: takedajs
engines (comma separated): (firefox,fennec)
license: (MIT)
JPM [info] About to write to /Users/shoheitakeda/workspace/src/test_addon/package.json:

{
  "title": "test_addon",
  "name": "testaddon",
  "version": "0.0.1",
  "description": "test_addon",
  "main": "index.js",
  "author": "takedajs",
  "engines": {
    "firefox": ">=38.0a1",
    "fennec": ">=38.0a1"
  },
  "license": "MIT",
  "keywords": [
    "jetpack"
  ]
}

Is this ok? (yes) yes

ディレクトリ配下に以下のようなファイルが作成されます。

$ tree
.
├── README.md
├── index.js
├── package.json
└── test
    └── test-index.js

Firefoxにアドオンを導入

アドオンのパッケージ化

$ jpm xpi

パッケージ化すると、xpi拡張子のファイルが作成されます。

$ tree
.
├── README.md
├── index.js
├── package.json
├── test
│   └── test-index.js
└── testaddon.xpi

アドオン導入確認
作成した拡張機能だけが導入されたFirefoxが立ち上がります。

$ jpm run

立ち上がったFirefoxのアドオンマネージャーを見てみると、アドオンが一覧に表示されています。 ですが、アドオンが検証できず利用できませんとアラートが出ています。 Mozillaに申請して許可が下りないと開発段階であってもFirefoxに導入できないみたいです。(マジで?笑)

f:id:takedajs:20170326091343p:plain

ですが、諦めるのはまだ早く、なんとか導入する方法があります。 以下、導入の流れを書いていきます。

歯車をクリックしてアドオンをデバッグを選択

f:id:takedajs:20170326091423p:plain

開発ツールデバッガー画面が表示されます。

f:id:takedajs:20170326091503p:plain

「一時的なアドオンを読み込みむ」をクリックして、先程 $ jpm xpi コマンドで作成したアドオンのパッケージ(xpi拡張子)を読み込みます。

f:id:takedajs:20170326091531p:plain

読み込むと作成したアドオンが一覧に追加されています。

f:id:takedajs:20170326091606p:plain

拡張機能一覧画面に戻ると先程出ていたアラートが消えて、導入されていることが分かります。

f:id:takedajs:20170326091631p:plain

申請をしなくても開発段階のアドオンを導入することができました。(良かったー。) これで開発中のデバックをすることができますが、修正を加える度に毎回パッケージ化して ファイルを読み込まないといけないので、かなり面倒ですね。

まとめ

アドオン開発が初めてで何も分からない状態から始めましたが、開発環境ができたのでなんとか開発していけそうです。 次は、公式ページに載っているチュートリアルの参考にして、簡単なサンプルを作ってアドオン開発の理解を深めて行きたいと思います。 自分が欲しいと思った物を作っていくのはやはり楽しいですね。

参考

初めてでも理解できるようになる「Firefox機能拡張の開発」 | OXY NOTES

MacにNode.js環境を作る(nodebrew) - Qiita