月別アーカイブ 11月 2018

村上 著者:村上

【Android】EditTextでの文字の複数行入力とInputTypeの種類

Androidアプリ開発では、文字を入力できる項目として EditText があります。
今回は、この EditText で文字を複数行入力するときの指定方法と、それ以外の入力タイプについて簡単にまとめ。
完全私的見解ですが、特によく使いそうなものをピックアップしました。

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

Androidアプリ入門 No.09 EditTextの入力制限関連属性 – コンピュータクワガタ
https://kuwalab.hatenablog.jp/entry/20101213/p1

 

まず最初に、文字を複数行入力するときの設定について。
入力する値は inputType で指定します。
で、複数行の入力を許可するときには textMultiLine という値を指定します。
サンプルは下記のとおりです。

<EditText
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:inputType="textMultiLine" />

最終行で、inputType に textMultiLine を指定しています。
これがあることで、改行が可能になります。

 

それ以外の設定値については下記のとおりです。

設定値 説明
none 入力禁止
text 通常のテキスト
textMultiLine 複数行に渡るテキスト
textPassword パスワード
textEmailAddress メールアドレス
textPersonName 人名
textPostalAddress 住所
phone 電話番号
datetime 日付・時刻
date 日付
time 時刻
number 数値
numberSigned 符号付き数値
numberDecimal 少数

他にもまだいくつかありますが、個人的に使いそうなものだけをピックアップしました。
ほかの入力パターンを知りたい場合は、上で挙げた参考記事をご確認ください。

 

以上、AndroidのEditTextで複数行を入力する方法と、入力タイプの種類についてでした。
意外とこういう設定値って、毎回忘れてその都度調べたりするので…調べる時間を節約したくて今回まとめてみました。
皆様の参考になれば幸いです。

  • この記事いいね! (0)
asaba 著者:asaba

【cordova】画像が横向きになる問題を解消する

コルドバでアプリを作っていると、FileReaderを使って画像をアップロードする機能が欲しくなるときがあります。

このライブラリを使う時に少しめんどくさいのが、アップロードの際に画像が90度回転してしまいその修正をしなければいけないという点です。

こんな感じです。↓

対策としてexif-jsを使って向きを調べた後にcanvasで修正する方法があるのですが、コールバックが含まれていて可読性が下がってしまう

点とandroidのバージョンが古いとちゃんと動作しないという問題を抱えています。

reactで開発していることもあって、スタックオーバーフローを見ても事例が少なく途方に暮れていたところ有用なサイトを発見。

どうやらnpmでblueimp-load-imageという画像を独自メソッドを使って直してくれる便利そうなパッケージを発見。

さっそくnpm install blueimp-load-imageでインストール。下でコードの説明をしていきます。

<pre> loadImage.parseMetaData(file, (data) =&gt; {
            const options = {
                maxHeight: 1024,
                maxWidth: 1024,
                canvas: true
            };
            if (data.exif) {
                options.orientation = data.exif.get('Orientation');
            }
            loadImage(file, (canvas) =&gt; {
                const dataUri = canvas.toDataURL('image/jpeg');
                const imgNode = this.refs.image;
                imgNode.src = dataUri;
            },
            options);
        });</pre>

 

parseMetaDataメソッドを使って画像を修正するのですが、まず最初に対象のfileを引数にした後にオプションでキャンバスをtrueで使用

可能にし、その次にdata.exifで画像の向きを調べています。loadImageではtoDataURLでbase64に変換して、最終的にimgNodeとタグ

this.refs.imageを紐付けて画像を表示しています。このコードで全てセットなので、難しかった画像の向きも簡単に修正することができますね。

これで横向きになっていたがぞうが元に戻りました。めでたしめでたし。

 

その他参考にさせていただいたサイトです。->http://dackdive.hateblo.jp/entry/2016/07/19/095000

 

  • この記事いいね! (0)
著者:杉浦

IDEのローカル・ヒストリー機能

 IDE(統合開発環境)にはローカル・ヒストリー機能がついています。これはローカルでコードのバージョン管理を自動で行ってくれるような仕組みです。git等の複数人で共有することが目的のバージョン管理と異なり、ローカル・ヒストリーは多くの場合でプロジェクト内のコードに加えられた全ての変更を絶えず自動的に保存します。もちろん、各ヒストリーにラベル、メッセージを付けることもできます。最近自分がよく使っているPhpStormでは次のような画面で使えます。
 Alt+Shift+cでフォルダ構造の変化を見出しにした最近の変更を次の様な画面で見られます。

 また、ファイル単位、クラス単位、メソッド単位、任意の選択範囲でも差分を次の様に見られます。

 ローカル・ヒストリー機能のおかげでコードを汚さないまま巻き戻すこと、過去何をしていたか知ることができます。

  • この記事いいね! (0)
著者:ym

flickrの無料プランが1000枚へ変更

flickr を使用していますが、今まで1TBまでであればファイル数は無制限だったのですが、この変更で1000枚へ制限されることになります。

しかも、期限がきた時は古い写真から削除されるらしい。どのクラウドサービスも無料で集めて、逃げられなくなった頃の最後に有料化。

Flickr

https://www.flickr.com/

  • この記事いいね! (0)
takahashi 著者:takahashi

位置情報ゲームIngressがリニューアル!Ingress Primeがついに公開!!

先日、IngressのTwitterアカウントで公式以前から予告されていたIngressのリニューアル版、Ingress Prime がリリースされたというツイートが投稿されました。

早速インストールしてみました!

起動するとIngressの開発元であるNianticのロゴが表示され…

ログイン画面が表示されるので、旧バージョンで使用していたGoogleアカウントでログインします。

Facebookアカウントも使えるようになったようですね…!

ログイン中…

めちゃくちゃクールなサイバーな音とともに、Ingressのスプラッシュが表示されました…!

現在地測位中の画面がすでに超クールになってます…!

XMスキャナー起動中画面…ヤバイ、クールすぎる…

起動準備完了(?)したようで、”タップして起動”の文字が。

この後、チュートリアルとしてXMやポータル、Ingressのルールについての説明が出てきますが、極秘書類のようなのでこちらでは伏せておきます(w

ちなみに、既にエージェントになっているユーザーはチュートリアルは表示されないようです。
チュートリアルではADAやジャービスのフルボイスも聞けたということらしいのでちょっと残念です。

最後にレジスタンス陣営のトップでもあるADAさんが直々に挨拶(?)していきましたw

そしていよいよスキャナが起動…

うおおおおすげええええ
めっちゃ綺麗になってる!!!
UIも一新されています。

中心のボタンを押すとメニューが表示されます。
アイテムストレージの”Inventory”、ポータルへアタックするためのXMウェポンの一覧を表示する”Attack”、同陣営やエージェント全体とテキストメッセージのやり取りができる”Comm”が一番押しやすい位置に置かれています。

これらはよく使う機能なので、押しやすい位置に移動したのはかなり好感が持てますね。

早速Attackを選ぶと

こんな画面に。
アイテムのデザインも一新されていて、とにかくキラキラしてますw

実体がないXMから作られているアイテムなので、こうちょっと幻想的なデザインになっているのはちょっと惹かれますね。


旧バージョンのスキャナと同様、攻撃時に長押しするとサークルが表示され、一番中心にに来た時に離すと一番強い威力でアタックできる仕様は引き継がれていましたが、個人的には新バージョンの方がやりやすい印象でした。

ただ、アタックしたときのポータルのダメージエフェクト、例えばModが破壊されたときのエフェクトがちょっと見づらくて、いつまで武器を打ち続ければいいのかわかりづらいのがちょっと惜しかったです。

インベントリもかなり変更されていて、ポータルキーとアイテムが分けて表示されるようになりました。
アイテムが探しやすくなったのはありがたいです。

そして総じてデザインがカッコイイ…!!!

他にもいろいろと変更されていますが、何より全体的にエフェクトが豪華になっていることでより没入感が増していて、とても興奮しました!

なお、端末が対応できなかったり、旧来のIngressの方がいい、という場合は、旧バージョンのアプリも引き続き利用できるとのことです。

新アプリはそこそこ重いので、旧アプリも使えるのはありがたいですね。

まだ新バージョンを入れたばっかりで触り切れていないので、また機会があれば記事にしてみたいと思います。

Ingress Prime – GooglePlayStore

Scanner [REDACTED](未公開版)- GooglePlayStore

  • この記事いいね! (0)
村上 著者:村上

【アプリ】絶対に起きられる悪魔のアラーム「おこしてME」

GIGAZINE で何とも面白そう?なアラームアプリを見つけたのでご紹介。
通称「悪魔のアラーム」という、どんなに朝が弱い人でも絶対に起きられるアラームとのこと。
私が読んだ GIGAZINE の記事はこちらから。

パズルやカメラで二度寝を強力に阻止する無料の爆音目覚ましアプリ「おこしてME」を使ってみた – GIGAZINE
https://gigazine.net/news/20181107-okoshite-me/

私の各記事よりもはるかに面白いので、こちらを読むことをおすすめしたいです。

アプリ名は「おこしてME」と言います。

「悪魔」らしからぬ、可愛らしい名前ですね。

インストールはこちらから。

Android:https://play.google.com/store/apps/details?id=droom.sleepIfUCan
iOS:https://itunes.apple.com/jp/app/id1163786766

 

で、このアプリの何が「悪魔的」かというと、アラームの解除方法にあります。
なんと、あらかじめ指定しておいた物を写真で撮ったり、決められた回数端末をふるふると振ったり、計算問題を解いたりしないと解除できないしようとなっています。
もしくは、事前に設定しておいたもののバーコードを読み込んだり、という方法もあるとのこと。
もちろん、上記に挙げたような手順を踏まず、通常の方法で解除する方法もあるようです。
また、アラームの音は数種類から選ぶことができ、時間経過とともにだんだんと音が大きくなるとのこと。

これならば確実に起きられはしそうですね。
…ただ、正直かなりイライラしてしまいそうなので、一日がこれで始まるのは避けたいところ。
どうしても起きなければならない!というときの最終手段の一つとして候補に入れておきたいですね。

 

以上、絶対に起きられるアラーム「おこしてME」のご紹介でした。
個人的には、バーコードリーダーを使って止める機能が面白いと思いましたね。
例えば、洗面所やキッチンにあるもののバーコードを登録しておけば、朝起きてから次の動作につなげやすいのではないでしょうか。
ただし、アラームを停止しないと、音がだんだんと大きくなるそうなので、近隣住民の方や一緒に寝ている方のご迷惑にならないようにご注意ください。

  • この記事いいね! (0)
asaba 著者:asaba

【html5】inputタグのtype=”file”のワナ

コルドバでアプリ開発をしていると、プラグインによってandroidとiphoneが必ずしも同じ動きをしない場合があります。

例えば、下のinputタグのtype=””fileもiphoneの場合はカメラ撮影もギャラリーから写真を撮ることもできるのに対し、androidでは

カメラ機能だけがついていない状態で反映されます。


<input type="file" >

 

iphoneだとこんな感じになります。

問題のandroidがこちらです。

 

http://kimizuka.hatenablog.com/entry/2016/12/01/215013

の記事によれば、機種依存のバグだそう。androidには無効な機能がいくつかあるみたいで再現は不可能みたいです。

今自分が開発しているアプリは、カメラ機能で撮った写真をアップロードしてその写真を恒久的に使うのでこのバグはかなり痛かったです。

このような場合は諦めてcordova-plugin-cameraというプラグインとinput fileタグを使い分けるしかないですね。

自分はこれに気づくのが遅く数時間無謀な格闘をしてしまいましたが、どこのサイトを見ても解決策が見当たらない場合はすっぱり諦めて

一度頭の中空っぽにして別の手段を考えるとアレ?これでもいけるんじゃね。と意外とすぐ解決策が見つかるかもしれません。

一つのエラーに執着すると、視野が狭くなってしまい別の糸口が見えなくなってしまうことを痛感させられましたですはい。教訓です。

  • この記事いいね! (0)
著者:杉浦

チートシートとしてのresources/lang/ja/validation.php

 laravelには多彩なバリデーションルールが用意されています。記述も次の様に|区切りで羅列されたルールを持つ配列と同じキーを持つ配列を二つ使うのみで簡単です。

$rules = [
    'title' => 'required|unique:posts|max:255',
    'body' => 'required',
];
//Request $request Requestはlaravel内でarrayをラッピングした高級クラス
$validatedData = $request->validate($rules);
//もしくは単に配列で
$input = [
    'title' => 'hoge'
    'body' => 'hogehoge'
];
Validator::make($input, $rules);

 ここまで簡単な記述だと適したバリデーションルールをなるべく使いたいものです。しかしrequiredやmaxの様に頻繁に使うもののみならず全てのバリデーションルールを覚えようとした場合、それは一苦労です。バリデーションルール一覧の日本語訳は丁寧に正確にしてあるのですが詳細すぎるのか長大すぎるのかあまりやりたいことではありません。
 laravelには言語設定というものがあります。これはresources/lang/以下に配置するもので、設定されたlocalに合った言語設定が適宜読み込まれます。この言語設定にはテンプレートが出回っており日本語もご多分に漏れません。次のリンクはバリデーションに用いる日本語版言語設定ファイルへのリンクです。
validation.php言語ファイル 5.6 Laravel
 このファイルにはバリデーションのエラーメッセージが含まれています。例えば次です。

'digits_between' => ':attributeは:min桁から:max桁の間で指定してください。',

 これと同様にルール名=>日本語のエラーメッセージの配列の形で様々なルールとその対応が羅列されています。エラーメッセージはユーザに伝えるためのメッセージだけあってルールの内容を簡潔に教えてくれます。このためvalidation.php言語ファイル 5.6 Laravelでざっくりバリデーションルールを読んで詳細をバリデーション 5.6 Laravelで確認するというやり方がバリデーションの処理をコーディングする際に有効です。

  • この記事いいね! (0)
takahashi 著者:takahashi

個人版Office365のインストール台数制限がいつの間にか無制限になっていた件

最近久しぶりにOffice365のマイページにログインして気づきました。

なんとOffice365の個人向けのプランでオフィスアプリをインストールできる端末数が無制限、しかも同時利用台数が5台まで増えていました…!

Microsoft Office 365 Soloがインストールの台数制限を撤廃! – 日経 xTECH

自分は個人でPCを3台(macはbootcamp構成なので実質4台)、持っているのですが、いままでそのうちの2台までしか入れられなかったのでちょっと不便でした。

今後はすべてのPC(OS)に心置きなくインストールできるので、とてもありがたいですね。

  • この記事いいね! (0)
著者:杉浦

様々なHTMLショートコードを公開しているdCodesの紹介

dCodes is a comprehensive HTML framework with over 1500+ template shortcodes.
Build next generation, feature rich websites rapidly! Just copy ‘n’ paste hosted codes!

引用元:Template Shortcodes – dCodes Framework v2
 dCodesは様々なテンプレートショートコードを含むHTMLフレームワークです。Template Shortcodes – dCodes Framework v2には1500以上のコード例が載っており、これらの例をコピペしていい感じに配置するだけで、豊富な機能を持ったwebページを簡単に早く作れます。

 上の画像はショートコードが載っているページの一つです。赤丸の部分からコードを持ってきてコピペでページに用いるパーツを増やします。CSS、JS部は主にCDNを用います。このCDNは月間トラフィック1000万まで無料で使えます。個人で使う分にはよっぽどな使い方をしない限り無料枠に収まるでしょう。dCodesは単にデザインや機能の参考としても十分有用です。

  • この記事いいね! (0)