著者アーカイブ 村上

村上 著者:村上

Webサイトやアプリのモックアップ作成には「Adobe XD CC」が便利

タイトルにある通り、今回は無料で使用できるようになったAdobeのサービス「Adobe XD CC」のご紹介です。
最近利用し始めましたが、アプリなどのモックアップ作成にとにかく便利!

公式サイトはこちらから。

Adobe XD CCの購入|UI/UXデザイン、プロトタイプ、共同作業ツール
https://www.adobe.com/jp/products/xd.html

インストールもこのページからできます。

 

起動すると、まずこのウィンドウが立ち上がります。

iPhoneやiPad、Webなど、ベースとなるサイズはここから選ぶことができます。
チュートリアルもあるので、初心者さんはここから始めましょう。

チュートリアルはこんな感じ。

基本操作の仕方から、画像の配置方法などが説明されています。

また、左上のタブを「デザイン」から「プロトタイプ」に変更すると、画面遷移の指定ができます。

上記では、左のページの「ブログ」をクリックすると、右のページに遷移する、という動きを指定しています。

さらに、右上の三角をクリックすると、プレビューが表示され、実際の画面に近いデザインで動作を確認できます。

特にこの機能が便利ですね!
実際に動かすことで、ページの不足等が分かりやすいです。

が、こちらの機能ですが…何が悪いのか、ページ遷移のアニメーションが変更できない時が何度かありました。
例えば、iOSらしく、左にスワイプするアニメーションを指定したいのに、何故か変更できなかったり…。
原因は分からないので、現在調査中です。
まあ、画面遷移自体は問題なく行えるので、些事ではありますね。

 

以上、Adobe XD CCについてでした。
操作が直感的で分かりやすいし、チュートリアルもあるので、初心者にも安心してお使いいただけるかと思います。
なにより無料ですし、気になった方は是非使ってみてはいかがでしょうか。

村上 著者:村上

【Android】Intentを使ってカメラを起動する方法

今回は、タイトルにもある通り、Androidアプリでカメラを起動する方法についてです。
なお、カメラの起動には、画面遷移の際に用いられる、Intent を利用します。

参考にさせていただいたサイトはこちらから。

Take photos|Android Developers
https://developer.android.com/training/camera/photobasics

 

さて、カメラを起動する機能の実装方法ですが、必要なコードは実は下記の2行くらいで済みます。

static final int REQUEST_IMAGE_CAPTURE = 1;

// カメラを起動
Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
startActivityForResult(intent, REQUEST_IMAGE_CAPTURE);

あとは、AndroidManifest.xmlタグ内に、下記を指定します。

<uses-feature android:name="android.hardware.camera" android:required="true" />

こちらはカメラを起動する際に必要なので、お忘れなく。

で、写真が無事に撮影できると、onActivityResult() が呼び出されるので、そこで行わせたい処理を記述します。
今回は、ImageView に撮影した写真を表示するように指定しています。

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    if (requestCode == REQUEST_IMAGE_CAPTURE && resultCode == RESULT_OK) {
        Bitmap bitmap;
        ImageView imageView = findViewById([ImageViewのID]);

        if( data.getExtras() != null){
            bitmap = (Bitmap) data.getExtras().get("data");
            if(bitmap != null){
               imageView.setImageBitmap(bitmap);
            }
        }
    }
}

ここまでを実行すれば、カメラの起動から、撮影した画像の表示までは問題なく動作します。

 

以上、Androidアプリで Intent を使ってカメラを起動する方法でした。
あとは、画像の保存機能の実装ですが、そこまではまだできていません。
原因としては、ストレージの権限あたりかと。
実装出来たら、その方法についても改めてまとめたいと思います。

村上 著者:村上

【Android】ImageViewの画像を180度回転させる方法

久しぶりにネイティブアプリを開発しておりますが、その中で、ImageViewの回転が意外と面倒だったので、備忘録としてまとめ。

経緯としては、下の画面のようなじゃんけんアプリを作っている際、相手の手を回転させたくて方法を調べました。

些細なことなんですけど、じゃんけんは相手の手が自分の手とは逆なのが普通なので、こうしたほうがよりそれらしくなるんですよね。

 

画像の回転や縮小・拡大には Matrix を利用します。
が、基本的に画像処理は重い処理なので、あまり多用しないように気を付けてください。

なお、今回参考にさせていただいた記事はこちら。

[Android] Matrixで画像を回転、フリップ、縮小させる
https://akira-watson.com/android/matrix.html

コードは下記のとおりです。
onCreate() 内に記述してください。

Image View imageView = findViewById(R.id.[ImageViewのID]);
Bitmap bitmap_origin = BitmapFactory.decodeResource(getResources(), [画像パス]);

// 画像の横、縦サイズを取得
int imageWidth = bitmap_origin.getWidth();
int imageHeight = bitmap_origin.getHeight();

// Matrix インスタンス生成
Matrix matrix = new Matrix();
 
// 画像を中心に180度回転
matrix.setRotate(180, imageWidth/2, imageHeight/2);
 
// 180度回転したBitmap画像を生成
Bitmap bitmap_rotate = Bitmap.createBitmap(bitmap_origin, 0, 0, imageWidth, imageHeight, matrix, true);
 
imageView.setImageBitmap(bitmap_rotate);

コードを見てもらえれば分かりますが、CSS のように単純に回転はできず、画像そのものをビットマップに変換してから、回転させて表示するという処理が必要になります。
少々面倒ですが…こうしてコードをまとめておけば、以降はこれをコピー&ペーストするだけで済みますね。

 

以上、ImageViewの画像を回転する方法でした。

村上 著者:村上

【SourceTree】「warning: LF will be replaced by CRLF in [ファイル名].」警告でフィーチャーブランチを完了できない

久しぶりに遭遇したSourceTreeの警告です。
develop から切ったブランチをマージしようとしたら、「warning: LF will be replaced by CRLF in [ファイル名].」というメッセージが出て、マージ作業を行えなかったので、その対処法について。
ただ、正直なところ根本的な解決にはなっていないので、あまり参考にはならないかも…。
とりあえず、マージができればOK!というかたは、ご参考にしてください。

 

エラー全文は下記のとおり。

warning: LF will be replaced by CRLF in [ファイル名].
The file will have its original line endings in your working directory.

Merge conflicts not resolved yet, use:
git mergetool
git commit

You can then complete the finish by running it again:
git flow feature finish [ブランチ名]

原因は、どうやら改行コードの置き換えが自動で行われており、その処理で警告が発生しているようでした。

で、こちらの警告について調べたところ、下記のコマンドを実行して、改行コードの変換を無効にする、という対処法が見つかりました。

git config --global core.autoCRLF false

なお、参考にした記事はこちらから。

git add .したらwarning: LF will be replaced by CRLF inが出まくったのは改行コードを自動変換していたから|NormalBlog.net
https://normalblog.net/system/lf_replaced_crlf/

が、私の環境では解決できず…引き続き警告が発生しておりました。

で、最終的に、「Git Flow > フィーチャーブランチを完了」という流れではなく、「マージ」で直接 develop にブランチをマージさせました。
処理としては同じことを行っていそうなのに、この流れだと警告は発生しませんでした。
…とりあえず、解決できたから良しとしてしまいましょう!

 

以上、SourceTreeの警告の対処方法でした。
Gitは便利ですが、たまにこういった警告が発生するので、その時はちょっと面倒ですね。
まあ、それさえなければかなり便利というか、無くてはならないものなので、うまく付き合っていきたいと思います!

村上 著者:村上

【アプリ】AndroidでキャッチしたBeaconの情報を確認できるアプリ「Beacon Scanner」

少し前に、CordovaでiBeaconを取り扱う記事を投稿しましたが、そもそもBeaconのUUIDなどがわからなかったので、それを別のアプリで取得しました。
使用したアプリは、「Beacon Scanner」というAndroidアプリです。

Google Playのページはこちらから。

Beacon Scanner – Google Play のアプリ
https://play.google.com/store/apps/details?id=com.bridou_n.beaconscanner

画面のスクリーンショットはこんな感じ。

使い方は、アプリを起動して右下の再生ボタンをタップするだけ。
Beaconの信号をキャッチすると、認識に必要なUUIDやMajor、Minor の情報が表示されます。
なお、Beaconの信号取得には BluetoothON にする必要があるので、そこはお忘れなく。

 

以上、Beaconの信号取得ができるAndroidアプリのご紹介でした。
操作方法も画面もシンプルで使いやすいので、おすすめです!

村上 著者:村上

【Xcode】アプリを実機で起動した時の「iPhone is busy: Processing symbol files」エラーの対処法

Xcodeでたまに見る実機での実行エラーについて。
今回遭遇したのは、「iPhone is busy: Processing symbol files」というエラーでした。

エラー全文は、以下の通りです。

iPhone is busy: Processing symbol files(iPhoneがビジー状態:シンボルファイルの処理)
Xcode will continue when iPhone is finished.(iPhoneが終了するとXcodeが続行されます)

 

原因としては、シンボルファイルの処理に時間がかかっていることだったので、待っていればいつか終わるらしいです。
なお、参考にさせていただいた記事はこちらから。

iPhoneアプリを実機で動作させようとしたらエラー|房総ITサービス
http://boso-it.com/xcode/iphoneアプリを実機で動作させようとしたらエラー/

が、Macのスペックにもよりますが、だいたい処理の終了まで10分程度かかるとのこと。
私含め、そんなに待てない!という方は、別の方法として、iPhoneの再起動をお試しください。

再起動は、一度アプリの実行を停止し、念のため、Macと繋がるケーブルを抜いてから行ってください。
私の環境ではこれで上手くいきました。
こちらの方法については、下記の記事を参考にしました。

実機デバッグで、busyエラーが出た時の対処 – ramkaの朝ごはんはピーナッツパン
http://ramka.hateblo.jp/entry/2018/02/14/013549

 

以上、Xcodeでアプリを実機で動かそうとしたときのエラーについてでした。
もし、同じエラーに遭遇した場合は、参考にしていただければと思います。

村上 著者:村上

【Cordova】FCMによるプッシュ通知のアイコンが白い四角になるときの対処法

調べていたのは別の症状についてだったのですが、これも有益そうだったので、備忘録としてまとめ。
Cordovaで開発中のアプリに、FCM(Firebase Cloud Messaging)を利用したプッシュ通知機能を追加したのですが、Android端末に送られてきた通知のアイコンに指定した画像が反映されず、単なる四角形になってしまったときの対処法について。

参考にさせていただいたサイトはこちらから。

IonicでFCMによるpush通知を行う – Qiita
https://qiita.com/saihoooooooo/items/34712738d5cc6f03cdf4

また、使用しているプラグインはこちらです。

GitHub – fechanique/cordova-plugin-fcm: Google FCM Push Notifications Cordova Plugin
https://github.com/fechanique/cordova-plugin-fcm

 

で、対処法ですが、そもそも原因はアイコン画像が指定されていないか、指定方法が間違っているのが原因です。
そのため、下記の場所にそれぞれアイコンを保存します。

  • platforms/android/res/mipmap-ldpi
  • platforms/android/res/mipmap-mhdpi
  • platforms/android/res/mipmap-hdpi
  • platforms/android/res/mipmap-xxhdpi
  • platforms/android/res/mipmap-xxhdpi
  • platforms/android/res/mipmap-xxxhdpi

そして、config.xml で、下記のようにアイコンの指定を行います。

<platform name="android">
    <resource-file src="resources/android/fcm_push_icon/drawable-ldpi-icon.png" target="res/mipmap-ldpi/fcm_push_icon.png" />
    <resource-file src="resources/android/fcm_push_icon/drawable-mdpi-icon.png" target="res/mipmap-mdpi/fcm_push_icon.png" />
    <resource-file src="resources/android/fcm_push_icon/drawable-hdpi-icon.png" target="res/mipmap-hdpi/fcm_push_icon.png" />
    <resource-file src="resources/android/fcm_push_icon/drawable-xhdpi-icon.png" target="res/mipmap-xhdpi/fcm_push_icon.png" />
    <resource-file src="resources/android/fcm_push_icon/drawable-xxhdpi-icon.png" target="res/mipmap-xxhdpi/fcm_push_icon.png" />
    <resource-file src="resources/android/fcm_push_icon/drawable-xxxhdpi-icon.png" target="res/mipmap-xxxhdpi/fcm_push_icon.png" />
</platform>

なお、厳密にこのとおりでなくても良いようなので、ファイル名などは適宜変更してください。

あとは、送信時のJSONデータに、アイコンと色を指定すればOKです。

{
  "to": [デバイストークン],
  "priority": "high",
  "notification": {
    "icon"  : [アイコン画像],
    "color" : [色コード],
    "title" : [アプリ名],
    "body"  : [メッセージ],
    "sound" : "default",
  }
}

…が、私の環境ではまだ直っていないので、きっとどこかにミスがあります…。
恐らくですが、アイコン画像の場所とかが怪しいかな。

 

以上、Androidでプッシュ通知にアイコン画像が反映されていない時の対処法でした。
意外とこういう小さな箇所って、だからこそ目についたりするので、気を付けたいですね。

村上 著者:村上

【Windows10】拡張子が「.rar」のファイルを解凍するソフト「RAR Opener」

今日メールで受け取ったファイルが「.rar」というあまり見慣れない拡張子だったので、備忘録もかねてこのファイルの開き方についてです。

まず、rar拡張子について簡単にまとめ。
この「rar」は圧縮ファイル形式の一つで、Windowsでよく使われる「zip」よりも高い圧縮率をほこるとのこと。
圧縮・解凍が高難度であるため、海外では使われることもあるそうですが、日本ではまず使われていないようです。

 

さて、肝心のファイルの解凍方法ですが、私はこちらの「RAR Opener」というソフトを使用しました。
こちらは下記の Microsoft の公式サイトからインストールすることができます。

RAR Opener を入手 – Microsoft Store ja-JP
https://www.microsoft.com/ja-jp/p/rar-opener/9wzdncrdhktr

使い方はとても簡単で、まずソフトを起動すると、下記のようなウィンドウが表示されます。

4つボタンがありますが、主に使うのは上の2つ、「Open RAR」と「RAR → ZIP」くらいだと思います。

Open RAR:RARファイルを解凍する
RAR → ZIP:RARファイルをZIPファイルに変換する

私は今回はファイルの解凍を行いました。
「Open RAR」を押すと、エクスプローラが起動するので、解凍したいRARファイルを選択します。
あとは、解凍が終わるのを待つだけです。
が、ちょっと広告が紛らわしかったりするので、うっかりキャンセルを行わないようにご注意ください。

 

以上、RARファイルの開き方・解凍方法でした。
とりあえず、見慣れないファイル拡張子は調べれば確実に判明するので、遭遇したら調べるくせをつけましょう。

村上 著者:村上

【Android Studio】「Compilation failed to complete」エラーの対処法

今回は、Android Studioでアプリ開発時に発生した「Compilation failed to complete」というエラーの対処法です。
対処法といっても、今回のエラー文は「コンパイルが完了しなかった」という、何が原因なのかが全く分からないようなものだったので、具体的なエラー内容を表示させる方法です。

 

今回参考にさせていただいたサイトはこちら。

Android Studioでエラーログを詳細表示する – RE:ENGINES
https://re-engines.com/2017/05/17/android-studioでエラーログを詳細表示する/

詳細なエラー内容の表示方法ですが、まずAndroid Studioの設定を開きます。

で、サイドメニューの Build, Execution, Deployment > Compiler を選択します。
そしてウィンドウの中央辺りにある Command-line Options に「–info」や「–debug」などのオプションを指定します。

記事内で紹介したサイトでは「–debug」と入力していましたが、それ以外で参考にしたサイトでは「–info」と指定していました。
表示内容を見比べていないので分かりませんが、個人的には「–info」を使っています。

 

以上、Android Studioで詳細なエラー内容を表示する方法でした。
今回ご紹介した「Compilation failed to complete」のエラーのように、それ単体ではエラーの内容が分からない時などにご活用ください。

村上 著者:村上

【Webサービス】配色に悩んだ時に「単語から連想される色」を挙げてくれる「Picular」

偶然見つけた記事で紹介されていたWebサービスが便利そうだったのでご紹介します。
サイト名は「Picular」で、単語を入力するとその単語からイメージされる色をあげてくれるというサービスです。
Webサイトの制作時など、配色に悩んだ時に活用できそうですね。

サイトのリンクはこちらから。

Picular
https://picular.co/

 

利用方法はとても簡単で、サイトにアクセスすると表示される入力欄に、単語を入力するだけ。
あとは、単語に応じた色を一覧で表示してくれます。

試しに「girl(女の子)」と入力してみるとこんな感じの結果でした。

思ったよりも、大人っぽいというか、シックな色合いが並びました。
個人的には、もっとピンクとかオレンジなどの華やかな明るい色が並ぶかと思いましたが…ちょっと意外な結果となりましたね。

ちなみに、検索する単語は日本語でもエラーは出ませんでした。
ただ、3文字以上を入力する必要があるので、英単語を前提としているようですね。

 

色々試してみましたが、大抵は想像通りの色が表示されるようでした。
ただ、時折何故?とも思える色がヒットすることもあり、例えば「moon(月)」と入力した際、オレンジ色が入っていたのは少し意外でした。
補色とかが関係しているのかな?

ということで、もし配色に困ったら、こちらのサイトに頼ってみるのもいいと思います。
特に、Webサイト制作の時など、どの色をベースカラーにするか迷っているときに使えそうですね。
候補がたくさん表示されるのも嬉しいです。