Androidでgif動画を流す（Kotlin）
Glideを使えば簡単にgif動画を動かすことが出来ます。
Glideの最新はこちら。
↓謎の設計図共有サイト「ギットハブ」
導入方法はリンク先に乗ってます。
環境
- ubuntu 16.04.1
- kotlin 1.2.41
- android studio 3.1.2
Glide導入
一応やっておきます。
最新が4.7.1です。常にギットハブを確認して導入するようにしてください。
dependencies {
・
・
・
implementation 'com.github.bumptech.glide:glide:4.7.1'
・
・
・
}
たったこれだけ。アプリケーション配下のgradleへ記述したらおｋ。
gifのリソースを準備する
app/res/raw配下に入れます。test.gifファイルがあると仮定して進めます。
ImageViewを準備する
gif動画を流すレイアウトファイルにImageViewを準備します。
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".CongratsActivity">
<ImageView
android:id="@+id/gifView"
android:layout_width="304dp"
android:layout_height="251dp"
android:layout_marginBottom="56dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.125"
app:layout_constraintStart_toStartOf="parent" />
</android.support.constraint.ConstraintLayout>
ImageViewのIDはgifViewにしてます。他の設定は適当です。
Activity側でgifをセット
package ~~~~~~~~
import android.content.Intent
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.os.Handler
import com.bumptech.glide.Glide
import kotlinx.android.synthetic.main.activity_main.*
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val gifMovie: Int = R.raw.test
// gif画像のセット
Glide.with(this).load(gifMovie).into(gifView)
}
}
たったこれだけで動きます。素晴らしいですよね。
おわりに
細かい設定は謎の設計図共有サイトを見てやってみてください。
kotlinでgif動画を流すのがなかなかなかったので記事にしてみましたー。
では。
【備忘録】UbuntuへMuseScore2をインストール
公式を見るのが一番はやいかもしれないです。
ただアイコンの作成とかにほんのちょっとだけつまずいたのでメモとして。
環境
- ubuntu 16.04.1
- elementary OS 0.4.1 Loki（64bit）
MuseScoreのAppImageを取得
上記URLからAppImageをダウンロードします。
僕のUbuntuは64bitなのでNew computers (64-bit)を選択。
画面遷移し、少しするとダウンロードされます。
ディレクトリの作成から設定
現時点で特に何も設定してなければDownloadディレクトリに保存されていると思います。
Downloadsディレクトリ整理をしたときに誤ってMuseScoreのAｐｐImageファイルを削除してしまったら大変です。
なので、MuseScore用のディレクトリをhomeディレクトリに作成し、AppImageを移動させます。
$ cd ~ && mkdir MuseScore $ mv ~/Downloads/MuseScore-2.2.1-x86_64.AppImage ~/MuseScore $ ls ~/MuseScore MuseScore-2.2.1-x86_64.AppImage
これでおｋ
アイコンの作成
毎回ターミナルでAppImageを叩くのは面倒くさいので、デスクトップアイコンを作成します。
まずアイコンをgoogleさんから拝借します。
それをMuseScoreディレクトリに配置。
名前は適当に musescore-icon.pngとかにしときます。
次にデスクトップアイコンの設定です。
Ubuntuのデスクトップアイコンは/usr/share/applications配下に設定ファイルがあります。
ここにmusescore.desktopを作成。
$ sudo touch musescore.desktop
vimで設定を記述。
$ sudo vim musescore.desktop [Desktop Entry] Encoding=UTF-8 Version=2.2.1 Type=Application Name=MuseScore Icon=/home/users/MuseScore/musescore-icon.png Path=/home/users/MuseScore Exec=/home/users/MuseScore/MuseScore-2.2.1-x86_64.AppImage StartupNotify=true # usersは自分のユーザー名 # Nameはデスクトップでの表示名
これでアプリケーションにMuseScoreが表示され、ドックに追加できるようになりました。
終わりに
他のアプリでデスクトップにアイコンを作りたい場合はこれで応用できるかと。
とりあえずLinuxでもMuseScoreが使えるのはいろいろとはかどりますね。
【備忘録】ubuntuでbundle installするとmysqlでこける
なんかrails環境を作ると毎回mysqlに苦しめられる気がします。
環境
- ubuntu 16.04.1
- elementary OS 0.4.1 Loki
問題
自分のgithubにある既存のリポジトリをcloneしてからbundle installすると
An error occurred while installing mysql2 (0.4.10), and Bundler cannot continue. Make sure that `gem install mysql2 -v '0.4.10'` succeeds before bundling.
が出てきたので、ああ、mysqlが入ってなかったんだなとおもったけど、この現象は以前（前の会社の時？）にもあったので
$ gem install mysql2 -v '0.4.10'
Building native extensions. This could take a while...
ERROR: Error installing mysql2:
ERROR: Failed to build gem native extension.
current directory: /home/user/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/mysql2-0.4.10/ext/mysql2
/home/user/.rbenv/versions/2.5.0/bin/ruby -r ./siteconf20180528-25364-imjoq2.rb extconf.rb
checking for rb_absint_size()... yes
checking for rb_absint_singlebit_p()... yes
checking for ruby/thread.h... yes
checking for rb_thread_call_without_gvl() in ruby/thread.h... yes
checking for rb_thread_blocking_region()... no
checking for rb_wait_for_single_fd()... yes
checking for rb_hash_dup()... yes
checking for rb_intern3()... yes
checking for rb_big_cmp()... yes
checking for mysql_query() in -lmysqlclient... no
-----
mysql client is missing. You may need to 'apt-get install libmysqlclient-dev' or 'yum install mysql-devel', and try again.
-----
*** extconf.rb failed ***
Could not create Makefile due to some reason, probably lack of necessary
libraries and/or headers. Check the mkmf.log file for more details. You may
need configuration options.
Provided configuration options:
--with-opt-dir
--without-opt-dir
--with-opt-include
--without-opt-include=${opt-dir}/include
--with-opt-lib
--without-opt-lib=${opt-dir}/lib
--with-make-prog
--without-make-prog
--srcdir=.
--curdir
--ruby=/home/user/.rbenv/versions/2.5.0/bin/$(RUBY_BASE_NAME)
--with-mysql-dir
--without-mysql-dir
--with-mysql-include
--without-mysql-include=${mysql-dir}/include
--with-mysql-lib
--without-mysql-lib=${mysql-dir}/lib
--with-mysql-config
--without-mysql-config
--with-mysql-dir
--without-mysql-dir
--with-mysql-include
--without-mysql-include=${mysql-dir}/include
--with-mysql-lib
--without-mysql-lib=${mysql-dir}/lib
--with-mysqlclientlib
--without-mysqlclientlib
To see why this extension failed to compile, please check the mkmf.log which can be found here:
/home/user/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/extensions/x86_64-linux/2.5.0-static/mysql2-0.4.10/mkmf.log
extconf failed, exit code 1
Gem files will remain installed in /home/user/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/mysql2-0.4.10 for inspection.
Results logged to /home/user/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/extensions/x86_64-linux/2.5.0-static/mysql2-0.4.10/gem_make.out
やっぱ一筋縄では行かない。
えらーめっせ見たら
必要なパッケージが入ってないっぽい。
$ sudo apt install libmysqlclient-dev パッケージリストを読み込んでいます... 完了 依存関係ツリーを作成しています 状態情報を読み取っています... 完了 以下のパッケージが新たにインストールされます: libmysqlclient-dev アップグレード: 0 個、新規インストール: 1 個、削除: 0 個、保留: 0 個。 1,159 kB のアーカイブを取得する必要があります。 この操作後に追加で 7,021 kB のディスク容量が消費されます。 取得:1 http://jp.archive.ubuntu.com/ubuntu xenial-updates/main amd64 libmysqlclient-dev amd64 5.7.22-0ubuntu0.16.04.1 [1,159 kB] 1,159 kB を 2秒 で取得しました (445 kB/s) 以前に未選択のパッケージ libmysqlclient-dev を選択しています。 (データベースを読み込んでいます ... 現在 286554 個のファイルとディレクトリがインストールされています。) .../libmysqlclient-dev_5.7.22-0ubuntu0.16.04.1_amd64.deb を展開する準備をしています ... libmysqlclient-dev (5.7.22-0ubuntu0.16.04.1) を展開しています... man-db (2.7.5-1) のトリガを処理しています ... libmysqlclient-dev (5.7.22-0ubuntu0.16.04.1) を設定しています ... $ gem install mysql2 -v '0.4.10' Building native extensions. This could take a while... Successfully installed mysql2-0.4.10 Parsing documentation for mysql2-0.4.10 Installing ri documentation for mysql2-0.4.10 Done installing documentation for mysql2 after 0 seconds 1 gem installed
行けた〜。
終わり
Welcome to WebsocketRails v0.7.0!
ということでうまく行きましたとさ。
【備忘録】Something went wrongでAndroidのReact Nativeが動かない
ubuntuにwatchmanが入らない
React Nativeを入れるための環境構築をやっていましたが、まあ安定して詰まりました。
以下を参考にやった。
環境構築
- npm 5.6.0
- node v10.2.1
原因
$ create-react-native-app Sample Unable to start server See https://git.io/v5vcn for more information, either install watchman or run the following snippet: sudo sysctl -w kern.maxfiles=5242880 sudo sysctl -w kern.maxfilesperproc=524288
よく調べてみるとwatchmanを入れてないからみたい。
なので、以下のwatchman公式を参考にcloneするところからやってみる。
$ cd ~ $ git clone https://github.com/facebook/watchman.git $ cd watchman $ git checkout v4.9.0 $ ./autogen.sh your system lacks libtoolize $ ./configure bash: ./configure: そのようなファイルやディレクトリはありません
なんかconfigureで躓く。
./autogen.shのときにうまく言ってるように見えたけど、メッセージ見てみるとエラーっぽい。
とりあえず、ubuntuの公式を見てみた。
Ubuntu – パッケージ内容検索結果 -- libtoolize
多分libtoolが入ってないからっぽいなぁ。
$ sudo apt install libtool パッケージリストを読み込んでいます... 完了 依存関係ツリーを作成しています 状態情報を読み取っています... 完了 以下の追加パッケージがインストールされます: libltdl-dev 提案パッケージ: libtool-doc gfortran | fortran95-compiler gcj-jdk 以下のパッケージが新たにインストールされます: libltdl-dev libtool アップグレード: 0 個、新規インストール: 2 個、削除: 0 個、保留: 0 個。 355 kB のアーカイブを取得する必要があります。 この操作後に追加で 1,857 kB のディスク容量が消費されます。 続行しますか? [Y/n] y 取得:1 http://jp.archive.ubuntu.com/ubuntu xenial/main amd64 libltdl-dev amd64 2.4.6-0.1 [162 kB] 取得:2 http://jp.archive.ubuntu.com/ubuntu xenial/main amd64 libtool all 2.4.6-0.1 [193 kB] 355 kB を 0秒 で取得しました (390 kB/s) 以前に未選択のパッケージ libltdl-dev:amd64 を選択しています。 (データベースを読み込んでいます ... 現在 286451 個のファイルとディレクトリがインストールされています。) .../libltdl-dev_2.4.6-0.1_amd64.deb を展開する準備をしています ... libltdl-dev:amd64 (2.4.6-0.1) を展開しています... 以前に未選択のパッケージ libtool を選択しています。 .../libtool_2.4.6-0.1_all.deb を展開する準備をしています ... libtool (2.4.6-0.1) を展開しています... man-db (2.7.5-1) のトリガを処理しています ... libltdl-dev:amd64 (2.4.6-0.1) を設定しています ... libtool (2.4.6-0.1) を設定しています ..
お、いけた。
この状態で、
$ ./autogen.sh $ ./configure $ make $ sudo make install
までいくと、上手くwatchmanが入った。
おわり
homebrewだともっと簡単だったんだけどなぁ〜。
でも、とりあえずReactNativeができるようになったのでよかった。
androidアプリを再度リリースしなおしたら「バージョン変えろカスが」と言われた
題名の通り・・・ではないですが、意味はあながち間違ってないです。
アプリを開くと落ちてしまうという、致命的なバグを残したままリリースをしてしまったため、バグ部分を改修しリリースしなおしたところ、「バージョンが同じなのでアップロードエラーですよ」とGoogle Play Consoleに言われてしまいました。
何をやらないといけなかったか
最初の手順通り、apkファイルを作成しなおしました。
Build -> Generate Signed APK...で以前作成していたkeystoreファイルを元に、パスワードを入力してapkファイルを作成しなおし。
その後、リリース画面でもう一度ファイルをアップロードしました。
・
・
・
・
・
・
・
「バージョン コード 1 の apk が既に存在するため、別のバージョン コードを使用する必要があります。」
バージョンを変える
先にapplication配下のbundleファイルのversionCodeを変えないといけないみたいでした。
以下を参考にした
アプリのバージョニング | Android Developers
やっぱり公式サイトが一番信用できますね。
（Module: app）の方の・・・
ここを変えたら良いだけ！
versionCodeを1から2へ変えて、versionNameをそれに対応した名前に変える。
書き方は公式サイトを参考にしてみてくださいー。
おわり
これで無事にアプリのアップデートが完了しました＼(^o^)／
広告版をリリースしただけなので、きちんとしたものが完成したら、android for kotlinの書き方や、アプリの紹介等もしたいと思います。
では。
kotlinで動画を再生する（VideoView）
kotlinでandroidアプリを絶賛開発中です。
androidをなるべくiOSっぽくするために日々奮闘しながら開発しているのですが、なかなかうまく行かない。
iOSでは動画を再生するときに自動でviewを作ってくれるのですが、androidではそういったことはしてくれないのでiOSっぽく動画を再生してみます。
ボタンクリック -> 動画再生 -> 終わったら元の画面へ
この流れで作成します。
環境
- ubuntu 16.04.1 (elementary OS 0.4.1 Loki)
- android studio 3.1.2
- kotlin 1.2.41
準備
activity２つ（empty activityでおｋ）・適当な動画が必要になります。
以下が手順。
まずはプロジェクト作成
名前は何でもおｋ。今回はMovieAppにしときます。
それ以外は変更せずnext連打で。
動画用viewを用意するためもうひとつactivityを作成します。
名前はMovieActivityで。
Activityの準備はこれでおｋ。
動画を入れるディレクトリを準備
動画のリソースはrawというディレクトリに格納します。音声ファイルもここ。
app/res上で右クリック、New -> Android Resource Directryを選択します。
Directory nameとResource typeをrawに変更してOKを押下。
作成されたのが確認できました。
動画のリソースを入れる
今回はニコ二・コモンズから取ってきたこれを使います。
かっけぇ。
このファイルをctrl + cでコピーする。
なぜかubuntuのandroid studioでは最初に選択したものが認識されないので、別のファイルを最初にして一緒に選択した状態でctrl + cでコピーする(意味わかるかな)。
そして、android studioのrawディレクトリ上でctrl + vで貼り付け。
上みたいなウィンドウが出てくるので、ファイル名glass.mp4へ変えて「OK」。
ちゃんと入ってますね。
ファイル名に注意
リソースのファイル名は自由につけることが出来ますが、全角文字やハイフン、ドットをつけるとエラーになります。
元のファイル名が例えばglass-effect.mp4となっていた場合、貼付け時のウィンドウでglass_effect.mp4と変更するようにしましょう。
MainActivityとactivity_main.xml
MainActivityのレイアウトファイルにボタンを配置、MainActivityファイルでボタンを押した時のイベントを作成します。
activity_main.xmlファイルを編集
app/res/layoutにあります。
アプリ名が@string/app_nameとバグってますが気にしない。たぶんビルドしたら直るはずです。
まず最初に邪魔なhello worldの文字を消します。
選択してdeleteで。
準備おk。
パレットにあるButtonをドラッグアンドドロップで貼り付けます。
位置はとりあえず真ん中に持ってきましょ（そしたらレイアウト気にしなくていいので）。
Component treeのとこで注意マークが出てますが、今は気にしなくておｋです。
次に右にあるAttributesのIDをstartButton、textをstartに変更します。
こんな感じ。
これでlayoutファイルの編集は完了。
MainActivityの編集
処理は簡単。
- ボタン押下でMovieActivityに遷移する処理
これだけ。
ActivityでxmlのオブジェクトのIDを取得するときにわざわざfindViewByIdするのがだるい。
なので、import kotlinx.android.synthetic.main.activity_main.*をclassの前に記述します。
もろもろ書いたのが以下の画像。
xmlで設定したボタンのIDstartButtonを押した時の処理、setOnClickListenerの中に、移動する定石の処理を書いただけです。
これでMainActivityは完了。
MovieActiviryとactivity_movie.xml
xmlの背景を黒にし、VideoViewのオブジェクトを配置、Activityの方で動画の処理を書きます。
activity_movie.xmlの編集
まずは背景を真っ暗にします。
xmlのファイルを選択した状態で、左下らへんにあるTextを押すと、xmlの形式を直接変更できます。
７行目を追加すれば背景が黒になる。
でも、これは色の指定をxmlに直書きしているので、適切な場所で色を定義します。
app/res/colors.xmlで色を作成。
これをxmlから@color/blackで参照します。
Designの方を見てみると以下のように。
真っ暗になってますね。
次に、VideoViewを配置します。
Palette -> Widgets -> VideoViewをボタンのときと同じように配置。
配置すると画面全体に広がるので、画面中央に来るように縮小します。
ボタンの時と同じように、IDを変更。 videoVIew2からvideoViewへ（わかりやすければとりあえずおｋ）。
これで、xmlは完了です。
MovieActivityの編集
コードが以下。
import kotlinx.android.synthetic.main.activity_movie.*で該当のxmlのオブジェクトをIDで参照できるようにしています。
Handler(mainLooper).postDelayed({~~~}, 200)を設定しているのは、動画の読み込みに若干時間がかかるので設定（これがないと、動画の最初がキモいことなる）。
簡単な説明はコメントに書いてるので見てください。
もっとVideoViewについて知りたければこちら。
https://developer.android.com/reference/android/widget/VideoView
完成！！
ビルドをすると、Component treeに出ていた注意マークが消えます。
おわりに
gif動画の方では見せてなかったですが、動画をタップすると再生メニューが表示されるようになってます。
是非参考にしてみて下さーい。
なにかあればコメントに。
