気まぐれDeveloperブログ

2017年11月28日火曜日

AmazonFireTV上で動くアプリを作る

公式ページ

FireTV用のアプリは大きく

Androidアプリ
Webアプリ

の2つある。

FireOS用と通常アプリの違い

FireOS

AndroidからフォークされたOS
(拡張範囲はLollipopおよびバックポートされたMarshmallowコードまで)
Leanback Support Library

Fire TVでは、AndroidのLeanback Support Libraryが一部サポートされている
CATEGORY_LEANBACK_LAUNCHERがFire TVでは認識されない
Google Play Servicesが使用できない

詳しくはこちら

環境構築

通常のAndroidアプリの様にAndroidStudioを使う

ADB接続

Amazon Fire TVでデバッグを有効にする
Android Debug Bridgeを設定する
接続

sh

$ adb kill-server
$ adb start-server
$ adb connect <IPアドレス>

詳しくはこちら

実装

簡単なサンプル

サンプリとしてFire App Builderが公開されている
詳しくはこちら

AndroidTV

ベースはAndroidTVでいけるらしいので、
簡単なサンプルをAndroidTV用プロジェクトで作成してみる。

新規プロジェクトでTarget DeviceをTVにする
「Add No Activity」を選択

「MainActivity」を作成

java

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

activity_main.xmlを作成

xml

<?xml version="1.0" encoding="utf-8"?>
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:app="http://schemas.android.com/apk/res-auto"
          xmlns:tools="http://schemas.android.com/tools" android:id="@+id/main_browse_fragment"
          android:name="com.slowhand.androidtvsample.MainFragment" android:layout_width="match_parent"
          android:layout_height="match_parent" tools:context=".MainActivity" tools:deviceIds="tv"
          tools:ignore="MergeRootFrame" />

MainFragmentを作成

java

public class MainFragment extends BrowseFragment {

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
    }
}

とりあえずここまでで何も表示されない画面ができる

BrowseFragment

HeaderFragment (ヘッダー) が右側、 RowsFragment (コンテンツ部分) が左側の構成を含むFragment

AndroidManifest.xml

Launcherとして表示させるには以下の様に修正

xml
<category android:name="android.intent.category.LEANBACK_LAUNCHER" />

2017年9月15日金曜日

複数アカウントでFirebaseCLIを使う

個人や会社のアカウント等、プロジェクト毎にアカウントが違うような
複数アカウントでFirebaseCLIを使う時に自分がやっている方法です。
(他に良い方法があればご教示ください)

状態

すでにfirebase loginしててログイン済み

$ npm install -g firebase-tools
$ firebase login

configstore

firebase-toolsはconfigstoreを使ってアカウント情報を
~/.config/configstore/firebase-tools.jsonに保存している。
また、configstoreはデフォルトでは~/.configを見に行くが
XDG_CONFIG_HOMEの環境変数が設定されていればそちらを見に行く。

direnv

ディレクトリ毎に環境変数を定義してくれるdirenvを使用して
各プロジェクトのルートディレクトリに移動した時にXDG_CONFIG_HOMEを変えます

各プロジェクトのルートディレクトリに.envrcを配置

export XDG_CONFIG_HOME=~/.config-xxxx

こんな感じにして、事前にログインした~/.config/configstore/firebase-tools.jsonを
~/.config-xxxx/configstore/firebase-tools.jsonにコピーします。

するとプロジェクトに移動した時点で

> cd  XXXXX
direnv: loading .envrc   
direnv: export +XDG_CONFIG_HOME

環境変数XDG_CONFIG_HOMEが設定されます。

アカウント確認方法

$ firebase list

でプロジェクト一覧が見れます。

2017年7月2日日曜日

HeadlessChrome

ヘッドレス Chrome ことはじめ

↑こちらを参考に進めて見る。

環境構築

Chrome 59以上がインストールされている事

CLIコマンドのエイリアス

alias chrome="/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome"
alias chrome-canary="/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary"
alias chromium="/Applications/Chromium.app/Contents/MacOS/Chromium"

ヘッドレスChromeを使う

簡単なサンプル

DOM出力 --dump-dom

sh

$ chrome --headless --disable-gpu --dump-dom https://www.yahoo.co.jp/

PDF出力 --print-to-pdf

sh

$ chrome --headless --disable-gpu --print-to-pdf https://www.yahoo.co.jp/

スクリーンショット --screenshot

sh

$ chrome --headless --disable-gpu --screenshot https://www.yahoo.co.jp/

DevToolsを使う --remote-debugging-port=9222
sh
```
$ chrome --headless --disable-gpu --remote-debugging-port=9222 https://www.yahoo.co.jp/
```
起動後http://localhost:9222を別ブラウザで見るとDevToolsが使える

プログラムから利用する(Node.js)

Lighthouse の ChromeLauncher を使う

インストール

sh

$ yarn add chrome-launcher --dev

シンプルな実装

js

const chromeLauncher = require('chrome-launcher');

chromeLauncher.launch({
  startingUrl: 'https://google.com',
  chromeFlags: ['--headless', '--disable-gpu']
}).then(chrome => {
  console.log(`Chrome debugging port running on ${chrome.port}`);
});

起動

sh

$ node main.js

chrome-remote-interfaceを使う

chrome-remote-interface
DevToolsと同じような事ができるようにしてくれるAPI

インストール

sh

$ yarn add chrome-remote-interface --dev

キャプチャを撮るサンプル

js

const chromeLauncher = require('chrome-launcher');
const CDP = require('chrome-remote-interface');
const fs = require('fs');

chromeLauncher.launch({
  port: 9222,
  startingUrl: 'https://google.com',
  chromeFlags: ['--headless', '--disable-gpu']
}).then(chrome => {
  console.log(`Chrome debugging port running on ${chrome.port}`);

  CDP(async (client) => {
    const { Page } = client;
    try {
      await Page.enable();
      await Page.navigate({ url: 'https://www.chromestatus.com/features/' });
      await Page.loadEventFired();
      const { data } = await Page.captureScreenshot();
      console.log('Image saved');
      fs.writeFileSync('scrot.png', Buffer.from(data, 'base64'));
    } catch (err) {
      console.error(err);
    }
  }).on('error', (err) => {
    console.error(err);
  });
});

※node 7.6.0以上で動作

その他

asyncとかawaitとか使えるのはnode 7.6.0以上!

2017年7月1日土曜日

完全リモートワークで約半年働いてみて

久しぶりのブログ更新です。
実は今年の2月に完全リモートワークの会社に転職してました。
ちょうど半年になるので感想をつらつら書いてみます。

※あくまで個人的な感想です。。

どんな会社?

社員全員が完全リモートワーク
ソフトウェア作っている会社
半年に一回実際に集まるオフ会がある
勤務時間はある(9:20 - 18:00)

働いてみて

リモートワークでも全然問題なく作業できています。
最初に感じてた不安は何だったんだというくらい。。

常時ボイスチャットを繋いでいるので、困ったことがある時は
声かけて話したり、毎朝決まった時間に朝会もあるので
個人的にはみんなで働いてる感がありますw

ボイスチャット以外にも色々なツールを使ってます。
SlackやHangoutなどなど。
ボイスチャットだけだと伝わらない所はHangoutで画面共有しながら
説明したり、ペアプロ用のツールも使ったりしてます。

良いところ

通勤が無い!

まあリモートワークなんで当たり前ですが、PCとネットにつながる環境があれば
すぐ仕事ができるので今まで通勤に掛かっていた時間を有効活用できます。
全員リモートの良さ

あとは社員全員リモートという所がよく、一部リモートとかだった場合
情報格差が生まれたりしてたんだろうなあと感じました。
家の中

現在我が家にはまだ0歳の赤ちゃんがいるんですが、
急に赤ちゃん具合悪くなったとかでもリモートならすぐ対応できるので
そこらへんは嬉しいです。

悪いところ

悪い所が今の所無いんですが、
強いて言えば。。引きこもりになりがちですね。なので最近は毎日散歩に行くようにしてます。
引きこもりは心身共によくない ><

まとめ

ただ書きたい事を書いただけになってしまいましたが、
結果的にはリモートワークで良かったなと思います。
子供の顔見ながらプログラミングができるとは想像もしてませんでしたしw

2017年1月16日月曜日

GASをES6で書く時に気にすること

個人用のSlackに執事的なボットをGASで作って、
色々やってもらおうと思ってES6で作りました。

slack-butler

相変わらず名前のセンスは無く、まんまです・・・

この時に気をつけた事を書いてみようかと思います。

前提

ES6で書いてwebpackを使ってBabelでES5に変換
node-google-apps-scriptでGoogle Drive上にアップしてます。

「関数を選択」に関数が出てこない!!

これ↓

普通に次のような関数を定義すると

function main() {
  ...
}

関数を選択のドロップダウンにmainが出てきますが、
今回の場合BabelでES5に変換する為うまく出てきません😱

global.main = function() {
  ...
}

Google Drive上にアップした後にfunction main() ~とか書くと
当たり前ですが選択項目に出てきます。が、毎回これやるのも...

そんな時はgas-webpack-pluginが便利です

npm install --save-dev gas-webpack-pluginして、
webpack.config.jsに

var GasPlugin = require("gas-webpack-plugin");
module.exports = {
  ...
  plugins: [
    new GasPlugin()
  ],
  ...
}

こんな感じで追加してやると、function main() ~を作ってくれます!!

ウェブアプリケーションとして導入しても反映されない!!

こっから選択してGASをウェブアプリとして公開するやつです。

ES6に関わらずですが、何回やっても反映されない場合は次を試してみて下さい

「ファイル」>「版を管理」を選択

「新しいバージョンを保存」を選択し版数を増やします。

再度ウェブアプリケーションとして導入を開き、
プロジェクトバージョンに先ほどの版数を選択します。

これで最新のコードが反映されてると思います

とまあ、とりあえず気にする事を書いてみましたが
他にも気にする事があるって方はコメント頂けると幸いです。

2017年1月7日土曜日

あけましておめでとうございます

   __ __                   
  / // /__ ____  ___  __ __
 / _  / _ `/ _ \/ _ \/ // /
/_//_/\_,_/ .__/ .__/\_, / 
         /_/  /_/   /___/  
   _  __          
  / |/ /__ _    __
 /    / -_) |/|/ /
/_/|_/\__/|__,__/ 
                  
__  __             ____
\ \/ /__ ___ _____/ / /
 \  / -_) _ `/ __/_/_/ 
 /_/\__/\_,_/_/ (_|_)