RSS2.0

Flutter の showModalBottomSheet() のサンプル

先週触り始めた Flutter (バージョン 0.2.8) ですが、ModalBottomSheet と呼ばれるウィジェットを使うのに苦労したので、動いたコードをサンプルとして載せて置こうと思います。

ModalBottomSheet はスマホの画面の底辺から上に向かってにょきっと出てくるダイアログの一種です。Android や iPhone で文字を入力しようとした時に出てくるキーボードみたいなやつです。
以下のスクリーンショットを見てもらうとイメージしやすいと思います。これが今回のサンプルコードの実行結果です。
flutter_showModalBottomSheet1.pngflutter_showModalBottomSheet2.png
もともと表示されていたウィジェットに重ねて表示されること、画面下からスライドして表示されること、スマホのディスプレイの形状にかかわらず、上辺以外が埋め尽くされた形のダイアログになっていることが特徴です。3 点めの、上辺以外が埋め尽くされた形のダイアログであることが特にユニークな特徴で、最近の iPhone のようにディスプレイの下辺の角が丸まっていたりすると、普通のダイアログウィジェットでは高さを最大にしても角が丸まっている領域まで広がらないのです。非矩形なダイアログを作ることができないのでしょうね。

続きを読む FlutterDart  コメント (0)  2018/04/25 16:41:09

Flutter / Dart 言語で Android 用開発環境を構築する

Flutter は Google 製のハイクオリティな UI フレームワークです。Android と iOS の 2 つのプラットフォームで同時に開発ができ、そのため使用言語は Java でも Swift でもなく、Dart という言語になります。クロスプラットフォーム開発という点では以前試した Ionic 2 と同じようなコンセプトにも聞こえますが、Ionic 2 と異なりネイティブアプリの開発を前提としているようです。

ハイクオリティというからにはどのくらいハイクオリティなのか試してやろうということで、今回は開発環境の構築からアプリを起動するところまでをやってみたいと思います。
ちなみに開発環境はいつもどおり Fedora 26 64bit 版です。なので iOS でアプリを動かすのはいったんおいておいて、Android アプリを起動するところまでがゴールとなります。公式サイトに環境毎の開発環境構築手順が載っているので、Linux 用のドキュメントをベースに進めてみます。

Flutter の開発環境を構築する

Flutter での開発環境を構築するには、Flutter の他に Android や iOS の開発環境も準備しておく必要があります。
冒頭に記載したとおり、今回は Android アプリを動かすことを目標としているので、Android Studio を使って Android 版の開発環境だけを作っていきます。

Flutter をインストールする

それでは Flutter からインストールしていきます。
公式サイトからLinux 用 Flutterをダウンロードし、展開します。現時点での最新バージョンは 0.2.8-beta でした。
$ wget https://storage.googleapis.com/flutter_infra/releases/beta/linux/flutter_linux_v0.2.8-beta.tar.xz
$ tar xf flutter_linux_v0.2.8-beta.tar.xz
# mv flutter /usr/local/
ここでは展開した flutter を /usr/local 配下に配置しています。
続きを読む FlutterDart  コメント (0)  2018/04/19 13:24:41

npm リポジトリを verdaccio で構築する

前回 npm パッケージを作ってみましたが、npm でパッケージを作っていくとそれをリポジトリに公開したくなってきます。NodeJs には https://www.npmjs.com/ という公式リポジトリが存在しますが、一般公開したくない npm モジュールを置きたいとか、npm リポジトリ自体も自分で構築したいという要望もあるでしょう。
自前の npm リポジトリサーバーはいくつか存在するのですが、今回は構築の簡単な verdaccio を使ってみようと思います。

dotall-user.png

verdaccio のインストールする

npm リポジトリ用のサーバーにログインし、verdaccio をインストールします。
npm モジュールとして提供されているので、npm コマンドでインストールできます。
# npm install --global verdaccio
verdaccio をインストールしたマシンをそのままサーバーとして使うので、--global を指定してグローバル環境にインストールします。
私の環境では /usr/lib/node_modules/verdaccio/ 配下にインストールされました。

続いて verdaccio を起動します。
$ verdaccio &
verdaccio は root 権限がいらないそうなので、一般ユーザーで起動します。

これで verdaccio の npm リポジトリにアクセスできるようになっています。
verdaccio を動かしているマシンの DNS を verdaccio.example.com とした場合、アクセス URL は http://verdaccio.example.com:4873 です。
続きを読む WEB 技術JavaScript  コメント (0)  2018/04/12 20:06:02

npm でパッケージ管理された JavaScript 開発をしてみる

ある程度の規模の開発をしていくと、避けては通れないのが共通ロジックのパッケージ化と、どのパッケージを利用するかという依存性の管理です。Java には maven や gradle, Python には pip や setuptools があるように、JavaScript ではしばらく前から npm が利用されています。npm は Node.js が提供するパッケージ管理ツールで、Node.js 自体を利用しない JavaScript 開発でも十分に利用価値があります。自分で書いたコードをパッケージ化することでロジックの共有や使い回しが簡単になりますし、自分のロジックが利用している他パッケージのバージョン管理をすることで動作の保証やパッケージのバージョンアップを厳密に行えるようになります。
dotall.png
今回はこの npm コマンドを使って、既に提供されているライブラリを依存関係を管理しつつ利用していこうと思います。

ちなみに npm ではパッケージとモジュールという用語が定義されています。
内容をかいつまむと、npm パッケージは package.json と呼ばれるファイルとプログラムを配置したディレクトリのこと、npm モジュールは require 構文によって他のソースコードから読み込まれるライブラリのことです。自分が開発するものが npm パッケージ、他のエンジニアが開発したものが npm モジュールという感じでしょうか。主体が変わることで呼び方が変わるわけですね。

npm をインストールする

いつもどおり yum コマンドで npm をインストールしましょう。
# yum install npm
これで終わりです。
続きを読む JavaScript  コメント (0)  2018/04/10 19:20:00

Java で Akka Stream を遊んでみる

Akka Stream は並列/分散処理を実現するためのライブラリのひとつです。他のライブラリ同様に、処理全体をいくつかの処理単位に分割し、複数箇所に独立して存在するマシンで並列に処理することができますが、Akka Stream は大きな特徴として、その処理単位を扱うバッファスペースを固定長(bounded buffer space)として実現しているという点があります。

普通、分散処理では独立したマシン同士が処理データや処理結果を共有するためにメッセージ送信をしあうのですが、そこで課題となるのが受取ったメッセージの保管方法です。処理するデータを受け取ったとしても、自分の担当する処理内容が他よりも時間のかかる内容だった場合、受け取ったデータを捌ききれずに滞留してしまうことになります。このため、受け取ったデータの保管する領域を可変長にしてすべて保管できるようにしたり(この場合、保管領域が無尽蔵に必要となってしまう)、固定長の領域に補完しきれない分は捨ててしまったり(データの消失がありうる)といった手段が取られることがあります。

しかし Akka Stream は、いくつかの工夫によって、処理単位を扱う領域であるバッファスペースを固定長としたまま、持ちきれなかったデータを捨てることなくメッセージングを実現しています。

今回は最初ということで、Akka Stream の立ち入った話には触れずに公式ドキュメントの Java 向け Quickstart Guide の内容をさらってみたいと思います。
2 年前の年末くらいに一度触っていたのですが、それからバージョンが上がって使い勝手が良くなっているようなので、その辺の調査も兼ねた感じですね。
続きを読む Akka Stream  コメント (0)  2018/02/16 17:18:54

Scala IDE で遊んでみる

前回はコマンドラインで scala に軽く触ってみたところですが、今回は IDE で Scala を使ってみようと思います。
Scala 用の IDE としては、おなじみ IntelliJ IDEA と Scala IDE があるようです。Scala IDE は Eclipse ベースの Scala 開発用ワークセットで、今回は Scala IDE のほうを使ってみます。
scalaIDE01.png
開発環境は例によって Linux (Fedora release 26) です。

Scala IDE のインストール

公式サイトから Scala IDE をダウンロードします。
現時点での最新バージョンは 4.7.0 Release でした。

ダウンロードしたら展開して、でてきた eclipse ディレクトリを適当な場所に置いておきましょう。
$ tar xvfz scala-SDK-4.7.0-vfinal-2.12-linux.gtk.x86_64.tar.gz

展開してできた eclipse ディレクトリ内の実行バイナリ eclipse を実行すると Scala IDE が起動します。
Eclipse をベースにしているだけあって、基本的な使い方は Eclipse と同じですね。
同じ環境で Java を Eclipse で開発している場合には、実行バイナリの eclipse 自体を別名にリネームしたり、メニューに登録する際に Scala IDE というような名前をつけておいたり、ワークスペースを Java 用 eclipse のワークスペースとは別の場所にしておいたりするとうまく住み分けができると思います。
続きを読む Scala  コメント (0)  2018/02/08 20:19:52

Scala で遊んでみる

最近私のまわりでも Scala について耳にすることが増えてきましたが、私自身はこれまであまり触ったことがなかったので、少し試してみることにしました。
Scala については、関数型であることや並列処理に特化していることによく触れられています。JVM 上で動作することもあって Java の影響を強く受けていて、型安全性やオブジェクト指向言語であること、Java との親和性なども特徴としています。

最初の 1 歩ということで、Scala 言語そのものについて調べてみるというよりは、実際に動かすところまでを目標に置いてみました。

Scala を実行する

まずは言語標準の scala コマンドから Scala コードを動かしてみます。手順は以下の通りです。

Scala のインストール

前提として Java 8 以上が必要になるので、別途インストールしておきます。
その後は yum コマンドから Scala をインストールしましょう。
# yum install scala

インストール後に scala コマンドが実行できれば OK です。
$ scala -version
Scala code runner version 2.10.6 -- Copyright 2002-2013, LAMP/EPFL

scala コマンドで実行する

以下の内容のソースコード factrization.scala を作成します。
import scala.collection.mutable.ArrayBuffer

object Factorization {

  def main(args: Array[String]): Unit = {
    val random = scala.util.Random
    val numbers =
      if (args.isEmpty) {
        // 引数で素因数分解する数値が指定されていなければ、10 個の乱数を生成する
        (1 to 10).map(i => random.nextInt(Int.MaxValue))
      } else {
        // 引数の数値を素因数分解する
        // Array 型を Vector 型に変換する
        args.map(i => i.toInt).to[collection.immutable.Seq]
      }

    println("numbers: " + numbers.mkString(", "))
    // 並列化せずに素因数分解し、その処理時間を計測する
    logProcessingTime("Serial  ", numbers.map(i => factorize(i)))
    // 並列化して素因数分解し、その処理時間を計測する
    logProcessingTime("Parallel", numbers.par.map(i => factorize(i)))
  }

  // 引数の数値を素因数分解し、素数のリストを返す
  private def factorize(number : Int) : List[Int] = {
    val list = new ArrayBuffer[Int]
    var n = number
    var f = 2

    while (n != 1) {
      if (n % f == 0) {
        list += f
        n /= f
      } else {
        f += 1
      }
    }

    println("Thread:%3d factorize %10d to %s".format(Thread.currentThread.getId, number, list.mkString(", ")))
    list.toList
  }

  // 第二引数の式を処理し、その処理時間を出力する
  private def logProcessingTime(label: String, process: => Unit) = {
     val start = System.currentTimeMillis

     process
     println(label + ": " + (System.currentTimeMillis - start) + "ms")
  }

}

続きを読む Scala  コメント (0)  2018/01/23 20:15:05

Linux 版 Sublime Text 3 で日本語入力変換キーを変更する

Linux (Fedora 26) で Sublime Text 3 を使っていてると、日本語入力の切り替えキーがきになります。
日本語入力への切り替えキーは、デフォルトでは Ctrl + \ というなんとも珍しいキーバインドにマッピングされています。
右の Ctrl キーを使えば片手でも打てないことはないんですが、BackSpace が近いのと、完全にホームポジションから手が離れるのが気になります。
他にいいキーバインドはないものかといろいろ試してみたのですが、結局 Ctrl + Space に落ち着いたので、その設定方法を書いておこうと思います。
Ctrl + Space というと Fedora Core 時代のようで少し懐かしいですね。

Sublime Text 3 のキーマップを変更する

メニューバーの Preferences > Key Bindings を選択します。

キーバインドを設定するための Default (Linux).sublime-keymap - Default と Default (Linux).sublime-keymap - User というタブが開くので、ユーザーの設定を書く Default (Linux).sublime-keymap - User の方に以下の内容を記載し、保存します。
[
  { "keys": ["ctrl+space"], "command": "toggle_mozc" }
]
これで OK です。
続きを読む Linux  コメント (0)  2018/01/21 12:00:03

Essential Ph-1 を 買ってみた

後に Google に買収されることになる Android 社を設立し、Android の父とも呼ばれる Andy Rubin 氏が、2015 年 11 月に設立したのが Essential Products 社です。この Essential 社より発売されたのが Essential Phone (Ph-1) です。

Essential Ph-1 はチタンボディにゴリラガラスの重量感ある仕上がりになっています。カチっとしたフォルムが好きなので、Essential Ph-1 のシルエットはかなりお気に入りです。スペック表によると、ディスプレイは解像度: 2560 x 1312 ピクセルの 5.71 インチディスプレイ、CPU は 2.45GHz Quad + 1.9GHz Quad (64 bit)、メモリ 4GB とのこと。

Google の Nexus シリーズが終了し、日本向けには Pixel 2 が発売されそうもない現状では、使い込めるスマートフォンとしてかなり期待できます。なにせ機種変更したいスマートフォンが見つからずに Xperia Z (SO-02E)をずっと使い続けてましたからね。5, 6 年ぶりの新スマートフォンです。

Amazon 先生が送ってくれました

こちらが到着したパッケージ。もちろん SIM フリー版です。
ph1_01.jpg
実は Essential Ph-1 はまだ日本向けには正式に販売されていないのですが、Amazon.com で買うと普通に日本にも発送してくれます。海外通販なのできちんと到着するかが若干不安ではありましたが、そこはさすが Amazon 先生、無事に受け取ることができました。

私が買った時は、価格は送料込みでだいたい 550 ドルくらいでした。価格上昇が続いて久しい Android にしては、スペックのわりにかなり安く感じられます。少し前に 100 ドルくらい値下げがあったみたいですね。

続きを読む お買い物  コメント (0)  2018/01/20 16:24:00

chocolablog を ver 0.9 にアップデートしました

と言いつつ、今回のバージョンアップはリリース後にごたごたがあり、正確には hotfix 適応済みの ver 0.9.1 になります。そんな細かいことはいいですよね。

もうそんなに機能拡張するようなネタもなく、安定運用フェーズに突入している chocolablog ですが、今回は SSL 対応という WEB でも比較的ホットな話題についてリリースすることにしました。ブログ記事を読んでくださるユーザーさんのみならず、ブログ記事を書くシステム管理画面まわりでは個人的にも必要だと思っていた機能です。

この開発の背景には、さくらインターネットがすばらしいサービスを開始してくださったことがあります。ありがとうございます。マジ感謝です。

ssl.png

続きを読む chocolablog 開発  コメント (0)  2017/11/27 19:51:00
プロフィール HN: ももかん
ゲーム作ったり雑談書いたり・・・していた時期が私にもありました。
カレンダー
<<2018, 12>>
2526272829301
2345678
9101112131415
16171819202122
23242526272829
303112345