takedajs ログ

備考録

サイトのタイトルとURLをコピーするFirefoxアドオンを公開した

文字を選択していない状態でcommand+c (mac) or ctrl+c (win) を押下した時、サイトのタイトルとURLをクリップボードに保存するFirefoxアドオン「TitleUrlCopy」を開発、公開しました。

Firefoxアドオン「TitleUrlCopy」

ここからインストールできます。最新版Firefox(ver57)にも対応してます。

TitleUrlCopy – Firefox 向けアドオン

f:id:takedajs:20171123230100p:plain:w450

コードもこちらで公開してます。

開発した理由

同じ機能をもったFirefoxアドオンのヘビーユーザだったのですが、最近実施されたFirefoxのバージョンアップにより利用できなくなりました。 シンプルな機能ですが、業務でも利用しており不便だったので、開発しました。

まとめ

Firefoxのバージョンアップにより、多くのアドオンが利用不可になってます。 利用不可になったアドオンの変わりを探している方も多く、エンジニアとしては色々と開発して公開する絶好の機会かなと思います。

参考

Copy Fixer – Firefox 向けアドオン

CapistranoのデプロイをSlackに通知する

CapistranoとSlackを連携して、CapistranoのデプロイをSlackに通知させてみました。
RubyGemsであるcapistrano-slackifyを利用して、通知を行います。

Capistranoが導入されていることを前提に今回の記事を書いています。
まだ導入していない方は、以下の記事を参考に導入までを行ってみてください。

開発環境

capistrano 3.10.0
・デプロイ元: ローカルのMac
・デプロイ先: Vagrant(CentOS7)

capistrano-slackify導入

Gemfileにcapistrano-slackifyを記述。

group :development do
  gem "capistrano", "~> 3.10"
  gem "capistrano-slackify"
end

capistrano-slackifyをインストール。

$ bundle install

capistrano-slackifyの導入確認。

$ bundle list

Gems included by the bundle:
  * capistrano (3.10.0)
  * capistrano-slackify (2.9.0)

Capfileに以下を追加。

require "capistrano/slackify"

Slack設定

Slackでワークスペースを作成。
https://slack.com/

デプロイ通知を送るチャンネルを作成。今回は#リリースを作成しました。

f:id:takedajs:20171115200437p:plain

以下サイトにアクセスして通知に必要なWebhook URLを取得します。
https://slack.com/services/new/incoming-webhook

チャンネルを指定して、「Add Incoming WebHooks integration」を押下するとWebhook URLが表示されます。 後で利用するため、コピーしておいてください。

f:id:takedajs:20171115200523p:plain

config/deploy.rbに以下を記述。
Webhook URL作成時にチャンネルを指定したのですが、#generalに通知されてしまい、明示的に#リリースを指定することで解決。

set :slack_url, "[Webhook URL]"
set :slack_channel, "#リリース"

デプロイをSlackに通知

Capistranoでデプロイ。

$ bundle exec cap develop deploy

デプロイ開始と結果が#リリースに通知されます。
この画像では、開始と成功の通知が表示されてします。

f:id:takedajs:20171115202735p:plain

失敗した場合はこのように通知されます。

f:id:takedajs:20171115202752p:plain

通知をカスタマイズ

デフォルトの通知内容だと少し味気ないので、 絵文字とテキストをカスタマイズしてみます。

config/deploy.rbに以下を追記。

# デプロイ開始時
set :slack_emoji, ":pray:"
set :slack_username, "Capistrano < お願いします!!いっけー!!"

# デプロイ成功時
before 'slack:notify_finished', :deploy_success do
  set :slack_emoji,    ':dancers:'
  set :slack_username, "Capistrano < すごいー!!やったねー!!"
end

# デプロイ失敗時
before 'slack:notify_failed', :deploy_failure do
  set :slack_emoji,    ':imp:'
  set :slack_username, 'Capistrano < あかんやつやっ!!'
end

カスタマイズ結果。
先程と違い、デプロイが少し楽しくなりますね。デプロイ開始の成功してくれー!と祈ってるアイコンがお気に入りですw

f:id:takedajs:20171115202814p:plain

まとめ

Slackで作成したWebhookURLをCapistrano側に渡すだけなので、比較的簡単に連携ができました。 デプロイ結果をslackに通知することで、チーム内の生産性も上がりそうですね。

参考

GitHub - onthebeach/capistrano-slackify: Publish deployment notifications to Slack via the incoming webhooks integration

Capistrano の Slack 通知で、デプロイ開始・成功・失敗時の emoji を変える | blog: takahiro okumura

CapistranoでVagrantにデプロイする

Ruby製のデプロイツール「Capistrano」を使い、Vagrant上にデプロイまでを行いました。

開発環境

capistrano 3.10.0
・デプロイ元: ローカルのMac
・デプロイ先: Vagrant(CentOS7)

Capistrano導入

作業ディレクトリでGemfile作成。

$ bundle init

Gemfileにcapistrano記述。

group :development do
  gem "capistrano", "~> 3.10"
end

Capistranoインストール。

$ bundle install

Capistrano導入確認。

$ bundle list

Gems included by the bundle:
  * capistrano (3.10.0)

Capistrano設定

Capistranoの雛形作成。
STAGESのオプションはなくても問題ないです。

$ bundle exec cap install STAGES=develop,staging,production

Capistranoの雛形確認。

$ tree
.
├── Capfile
├── config
│   ├── deploy
│   │   ├── develop.rb
│   │   ├── production.rb
│   │   └── staging.rb
│   └── deploy.rb
│  
├── lib
│   └── capistrano
│       └── tasks
└── log
    └── capistrano.log

config/deploy.rbを以下のように修正。

# デプロイするリポジトリ
set :repo_url, "git@github.com:takedajs/TabColor.git"
# デプロイする場所(vagrant上)
set :deploy_to, "/var/www/html/takedajs"

config/deploy/develop.rbを以下のように修正。
開発環境へのデプロイなので、develop.rbだけ修正します。

server "[example.com]", user: "vagrant", roles: %w{app web}, my_property: :my_value

# デフォルトのままだとpasswordはvagrantです。
set :ssh_options, {
  password: "[sshする時のパスワード]"
}

Vagrantにデプロイ

デプロイ実行。

$ bundle exec cap develop deploy

正しくデプロイされたかどうかVagrant上で確認。
currentにアクセスすると、指定リポジトリのファイルを確認できました。

[vagrant@localhost takedajs]$ ls
current  releases  repo  revisions.log  shared

[vagrant@localhost current]$ ls
README.md  REVISION  background.js  icons  manifest.json  popup  tab_red.jpg

まとめ

Capistranoは細かい設定を行うことができますが、今回はデプロイするための最低限だけ設定しました。 次はCapistranoとSlackを連携して、デプロイ結果をSlackに通知してみたいと思います。

参考

GitHub - capistrano/capistrano: Remote multi-server automation tool

CapistranoのdeployタスクをVagrantマシンに適用するまで - Qiita

Firefoxアドオン「TabColor」を公開した

ページのURLに指定したキーワードが入っている時、ブラウザのタブ全体を赤くする僕得なFirefoxアドオン「TabColor」を開発、公開しました。

TabColor

ここからインストールできます。

コードもこちらで公開してます。

開発した理由

業務で開発している開発環境サイトと本番環境サイトを見分けるためです。 本番環境サイトのURLを指定キーワードに追加することで、タブが赤くなったら本番環境サイトと意識でき、慎重に作業するようになると考えました。

僕が抱えていた悩みをピンポイントで解決するものを開発しました。

Firefoxアドオンを開発して思ったこと

・開発中分からないことがあったらとりあえず公式サイトを見る。 サンプルコードも公開されているので参考になります。

・WebExtensionsを利用した最新の開発方法でないと公開ができません。一つ前の方法で開発してしまい(以下の記事記述)、公開するために今回WebExtensionsで作り直しました。

今後

WebExtensionsで開発したものは、少しの修正でChromeでも動かせるようになるみたいです。次は、Chrome版を作ってみたいと思います。

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