初心者ai8249の技術ブログ

医療IT科の専門学生です。学んだことをゆるゆる書いていくブログ。

アプリ開発 第六回目

こんばんは。

ai8249です。前回は電卓としての基本的な機能をつけることができたましたね。

今回も機能面を充実させていきたいと思います。

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

kuguido-fujinka.com

ではいってみましょ〜!

 

小数点を使用して少数計算ができるようにするみたいです。

xmlの「.」ボタンにandroid:onClick="dotButtonOnClick"を追加!!

f:id:ai8249:20161215172058j:plain

 

次はjavaのプログラムにdotButtonOnClicl()メソッドを定義。

少数計算の場合のために10の-n乗を掛けて足すコードを追加、修正。

f:id:ai8249:20161215172207j:plain

 

エミュレーターで1.23と少数表示が出るか確認します。

f:id:ai8249:20161215172546j:plain

ちゃんと表示されました〜。

 

次に0.1+2.3=を押してみると2.3の表示のままです。

f:id:ai8249:20161215172718j:plain

これは演算子と小数点を分けて、小数点ボタンを押されると少数計算中であることを設定するで解決できるみたいです。

 

修正した後エミュレーターで0.1+2.3=を計算すると

f:id:ai8249:20161215173113j:plain

2.4と表示してくれました!!

 

この表示のまま-2.3=と計算すると、、、0.1になりました!!

f:id:ai8249:20161215173235j:plain

 

今度は×2.3=とすると0.23になりました。

f:id:ai8249:20161215173353j:plain

 

更に÷0.1=としてみると…

f:id:ai8249:20161215173500j:plain

計算はちゃんとされていますが、余計な0がいっぱいありますね。

とにかく計算はされているようなので大丈夫みたいです。

 

 

次は数値を3桁ごとにカンマ区切りで表示させます。

整数の場合区切りがあると見やすいですが、小数点の場合見にくいので少数ならば区切りはしないように設定します。

NumberFormatクラスを使用して桁区切りを実装。

エミュレーターで確認すると、、、

f:id:ai8249:20161215173948j:plain

すごい!!ちゃんと区切られていますね!!

 

小数点の場合はどうかというと、、、

f:id:ai8249:20161215174049j:plain

区切りはちゃんと無いです。

 

 

また現状だと複数行になるとボタンのレイアウトが変わってしまうらしいです。

確認してみると、、、

f:id:ai8249:20161215174248j:plain

あらら、完全につぶれてしまいました。

ここでの解決の時、参考サイトでは文字サイズを"30dp"にすると書かれていましたが、エミュレーターで確認してみると小さく見にくかったので、私は"60dp"から"50dp"に変更しました。

 

エミュレータで確認すると1行に収まる桁数が11桁だとわかります。

f:id:ai8249:20161215174734j:plain

 

ボタンのレイアウトを崩さないように表示桁数を11桁に制限します。

すると

f:id:ai8249:20161215174923j:plain

ちゃんと12桁目は表示されなくなりました!!

 

次は少数表示の場合を考えます。

1行で表示出来る少数の最大桁数は12桁です。これを整数部分と少数部分に分けて考え、整数部分の最大表示桁数は12桁、少数部分の最大表示桁数は11桁に設定。

確認してみると…

f:id:ai8249:20161215175454j:plain

少数部分の桁数が12桁以上にならなくなりました!!

参考サイトではここまでで終わっていたので機能面はこれにて終了にしたいと思います。

 

 

次に見た目の部分で少し改良を自分で加えたいと思います。

まず色です!!

一色になってしまうと見にくいなーということで、、、

f:id:ai8249:20161215180309j:plain

数値表示の部分を#00ced1の青緑色へ変更。

ボタンの部分を#f5f5f5の薄灰色へ変更しました!!

赤一色よりうーんと見やすくなりましたね。

 

次はボタンの大きさを数字を20spから25sp、記号を20spから30spへ変更です。

小さな違いですが見やすくなりました!!

f:id:ai8249:20161215180630j:plain

 

 

また、今の表示形式だと境界線がわからないですね。

なので枠線の引き方を調べてみました!!

参考サイトはこちら。

asky.hatenablog.com

まずdrawableディレクトリの下にxmlファイルを作成するらしいです。

File nameにframe_styleと記入。

f:id:ai8249:20161215181126j:plain

 

ファイルの中身はこんな感じに。

f:id:ai8249:20161215181301j:plain

 

数値表示の部分は色が違うので、新しいファイルを作成し中身はこんな感じに。

f:id:ai8249:20161215181557j:plain

 

そして枠線をつけたいボタンにandroid:background="@drawable/frame_style"と記入。

(数値表示の部分は違うファイル名を)

エミュレーターで確認すると、、、

f:id:ai8249:20161215181920j:plain

枠線もちゃんとついた見やすい電卓が完成しました!!

 

ハァ〜やっと完成です。

最初のテーマを転換して電卓をやってきましたが、とにかく最後まで出来たのが嬉しいです。

感想はまた次回にでも。ではさようなら。

アプリ開発 第五回目

こんばんは。

ai8249です。では早速ですが前回の続きをやってまいりましょー。

前回同様参考にさせていただくサイトはこちら。

kuguido-fujinka.com

 

前回は数字は表示できたものの連続した数字はムリというところで終わってましたね。

ということで、、、

 

ボタンを押した時に取得する数字をBigDecimalに変えます。

f:id:ai8249:20161214173511j:plain

 

連続した数値を入力できるように入力値を10倍にして入力値に戻すらしいです。

そしてボタンの値のBigDeximalを生成して入力値にプラス。

最後にtextViewへの出力のための引数を変更し、

f:id:ai8249:20161214174015j:plain

 

エミュレーター起動

f:id:ai8249:20161214174056j:plain

ちゃんと連続して出せました!!

 

 

そして要となる四則演算のメソッドを考えます。

+-×/にandroid:onClick="opBttononClick"と追加。

javaのソースにopButtonOnClickメソッドを定義して処理を考えます。

f:id:ai8249:20161214174602j:plain

 

=を押されたらもちろん計算した数が出てくる!!

その処理はeqBttonOnClickで行いました。

足し算・引き算・掛け算・割り算とありますが、まず割り算以外の3つをif分で定義。

計算結果はtextViewに格納して表示します。

f:id:ai8249:20161214175057j:plain

 

割り算についての処理は他の四則演算子のメソッドと同じですが、小数点を何桁まで計算するのかを考えます。

f:id:ai8249:20161214175439j:plainresultvalu = preInputValue.devide(inputValue, 9, BigDecimal.ROUND_HALF_UP);

ここのは小数点以下9桁表示の四捨五入を指定してます。

 

この後エミュレーターで確認してみると2行になってレイアウトがずれてしまいました。

なので7に変更したところ…

f:id:ai8249:20161214175853j:plain

綺麗にレイアウトされてます!!

 

今度は6÷0=を計算するとエラーに。

そこで0での割り算を避けるための処理の追加。

割る数が0の時は『ERROR』を表示させるように設定。

f:id:ai8249:20161214180254j:plain

6÷0=をすると、ちゃんとERRORをでかでかと表示してくれました!!

 

 

次に今まで気になっていた右ボタンの幅の狭さ。

これは各ボタンにandroid:layout_weight="1"を追加して解決!!

f:id:ai8249:20161214180619j:plain

 

c以外のボタンも同じく設定。

f:id:ai8249:20161214180749j:plain

う〜ん、綺麗ですね!!

 

そして全てのボタンの背景色をTextViewと同じに揃え、cのボタンについてはレイアウトを考えて横に伸ばす感じに。

f:id:ai8249:20161214181025j:plain

 

次はこのcボタン(クリアボタン)の処理へ

xmlファイルのクリアボタンにandroid:onClicl="clearButtonOnClick"と追記。

f:id:ai8249:20161214181241j:plain

 

javaプログラムにclearButtonOnClick()メソッドを定義し、エミュレーターで確認。

f:id:ai8249:20161214181425j:plain

 

ここでcボタンを押すと、、、

f:id:ai8249:20161214181456j:plain

0が表示されました!!

 

 

そのあと同じ定義があるので、この処理をメソッドとして定義しました。

ここで動作を確認するために1+2=と押し、3が表示されたあとイコールボタンを押すと4になってしまいます。

f:id:ai8249:20161214181928j:plain

これは計算をした後イコールボタンを押すと、計算結果と最初に入力した値がその演算子で再度計算されているらしいです。

 

これを解決するためにoperator = R.id.ButtonEq;の一文を追記。

すると3×6=の後に連続して=を押しても18のままになりました。

f:id:ai8249:20161214182308j:plain

 

 

レイアウトとして余白の白い部分が入らないので

f:id:ai8249:20161214183640j:plain

xmlファイルの"16dp"とかかれた四行を消去。

 

すると綺麗に。

f:id:ai8249:20161214183808j:plain

 

1+2=と押した後3と表示されますが、続けて4を押すと34になるのを修正しました。

これらの計算結果の修正を幾つかしました。

 

 

次回はこの続きからです。

アプリ開発 第四回目

こんばんは。

ai8249です。さて今回は前置きはさておき、前回決定した電卓を早速つくっていきたいと思いまーす。

張り切っていきましょう!!

 

参考にさせていただく記事はこちらです。

kuguido-fujinka.com

 

まずAndroid Studioを起動します。

Start a new Android Studio project を選択し、細かい設定をすると…

 

じゃーん ソースが記載された画面が開きました。

 

では、デザインレイアウトを考えていきます。

数値を表示するディスプレイとしてText Viewの箇所を編集してみます。

すると、、、

おお〜 画面に反映されました!!

 

次に各ボタンを配置する前にDesignタブで表示を切り替えて左側のPaletteからドラッグ&ドロップをしTableLayoutを追加。

 

では電卓で重要なボタンの配置についてやっていきます。

先ほどと同じようにTableRowというレイアウトを5つドラッグ&ドロップ!!

PaletteからTable Rowを選択しその中にButtonを挿入していきます。

 

まず一つ目 ポチッ

 

TextでButtonのソースをこのように変更するとCとかかれたボタンが出現。

同じように電卓に必要な数字ボタンを追加。ポチッ ポチィ

 

ソースは画面の通りに。

 

すると

ずいぶん電卓に近づいてきましたね。

 

これをエミュレーターで確認してみると…

ちゃんと反応してくれました!!

少し右側が切り取られている感じですが、全体のデザインとしてOKです。

 

次はjavaで機能を充実させていきます。

各数字ボタンが押された時にその数字をディスプレイに表示される処理を作ります。

Main Activityを以下の通りにかきエミュレータで確認してみると

押したボタンの数字が反映されています。(画像は8を押した場合)

この場合、他の数字を押すとその数字に表示が変わってしまい連続した数字を表示させることができません。

 

さて、次回はこの続きからやっていきたいと思います。

休話

こんばんは。

ai8249です。今回は休話ということで皆さんにひとつ報告をいたします。

 

前回やっとノスタルジックに加工できるセピアアプリという具体案を示すことができ

さぁ開発だ!!と意気込んでいたのですが…

 

手順が難解すぎてワタシにはまだ理解できない段階でした。

せっかくちまちまと構想し、良いイメージが出来上がったのですが実物ができないのなら仕方がない 

ということで

 

Android Studioで作る電卓を採用したいと思います。

初心者のワタシでも比較的簡単にできる、使い道があるという点で選び直しました。

 

もう少し知識が身についた時点でカメラ加工アプリに挑戦してみたいと思います。

さぁ頑張って開発していきましょう!!

 

アプリ開発 第三回目

こんにちは。

ai8249です。第三回目で行いたいことは決めた事項を詳しく検討していくことです。

では考えていきましょう。

 

Instagramで使用出来る自分が欲しいアプリを考える

前回自分の思い通りに加工してくれるアプリ〇〇風に加工してくれるアプリという二つの案を考えました。

まず思い通りに加工できるという点ですが表現が曖昧すぎて具体的なイメージができていないと感じたので、

夜景を綺麗に補正してくれるアプリ

そして〇〇風に加工してくれるアプリは、

ノスタルジックに加工できるセピアアプリにします。

 

この二つの案の長所・短所を考えると

"夜景を綺麗に補正してくれるアプリ"

長所:夜景というInstgramのユーザが撮るであろう景色に対応できる点

短所:全体を細かく補正しなければいけないのでプログラムが難しそう

 

"ノスタルジックに加工できるセピアアプリ"

長所:セピアにすると限定しているので開発がしやすい

短所:なかなかセピアは使い勝手が悪い(私がそう思ってる)

 

これらの点を踏まえて今回開発するのは

ノスタルジックに加工できるセプアアプリ

にしたいと思います!!

 

開発の手順

こちらの記事で詳しくフィルターアプリ開発の手順が書いてあるので参考にしたいと思います。

Xcodeは以前授業で使ったことがあるので四苦八苦しながらやります。

blog.kasajei.com

blog.kasajei.com

 

www.slideshare.net

livedoor Techブログ : 猫でもわかるiPhoneで画像にフィルターをかける方法

 

今日の進歩

第三回目にして何を作っていくか・作り方が決定しました。

最初から一つの案に絞るのではなく幾つかを比較して最善のアプリ構想をすることができたと思います。

アプリを作るツールとしてXcodeが登場しましたが、授業で学んだこともあり自分の考えも取り入れられたらと考えています。

さて次回はやっときました。実際の開発工程です。

アプリ開発 第二回目

こんにちは。

ai8249です。今回はアプリ開発第二回目ということで、具体的なイメージとアプリの作成方法について考えていきたいと思います。

 

具体的な構想について

前回はInstagramで使用出来るアプリにすると決定しました。

主に写真のサイズを変更できるアプリ、効果を使ってイメージを変えることができるアプリなど様々なものがあります。

その中で撮った写真のイメージを変えるアプリに魅力を感じます。(私が欲しいので。)

私の体験談として夜景を撮ったにも関わらずイメージ通りの写真にならない場合が多々ありました。

そうした思い通りにいかない写真を素敵に加工してくれるアプリが第一案です。

また、なんたら風に加工してくれるアプリも素敵ですね。(次回なんたらは考えます。)

 

アプリの作成方法について

調べてみたところ紹介されているGPUImage for Androidを使うのがいいのでは。

dev.classmethod.jp

魅力として超高速で処理ができるという点、リアルタイムでフィルターの確認ができるなどがありました。

高速で処理が可能ということは作業がしやすく反映した時のラグもなくなるのでGPUImage for Androidを使用していきたいと思っています。

 

今日の進歩

今回は具体的な中身を考えることができました。

自分自身で使ってみたい効果をアプリに反映させることによってより良いものができるのではないかと思います。

ただ二つの案のどちらにするのかは絞りきれていないのでそこは今後決めたいです。

また、開発するにあたって使用できるライブラリを調べてみました。

最有力はGPUImage for Androidですがもう少し調べてみて、より良い開発にしたいきたいと思っています。

アプリ開発 第一回目

こんにちは。

ai8249です。今回は自分が作ってみたいアプリの構想を練っていきたいと思います。

でもアプリといっても一概に何がいいかは言えないですよね。

そこで自分があったら嬉しい、使いたいと思うアイデアを考えていきますよ!!

 

使用しているアプリから考える

私が普段から使っているアプリは

 Twitter

f:id:ai8249:20161207093601p:plainみなさんご存知コミュニケーションネットワークアプリ

 Instagram

f:id:ai8249:20161207093624p:plain 写真や動画をシェアできるアプリケーションソフトウェア

 

です。この二つのアプリで私の使用頻度が高いのはInstagramです。

やはり自分で使いたいアプリを作るには実際によく使用してるアプリで使えるものが嬉しい!ということで、

 Instagramで使えるアプリを作っていくことに決めました!!

 

Instgramで使われているアプリ一覧

こちらで紹介されているアプリを参考にしたいと思います。

appllio.com

android.app-liv.jp

 

f:id:ai8249:20161207101637p:plain Pixlr-o-matic

200万通り以上の組み合わせのエフェクト、オーバーレイ、フィルタを使って加工可能。

様々なレイアウト、背景、間隔を選択してコラージュ写真を作成できる。

 

f:id:ai8249:20161207095959p:plain InstaSize-フォトスタジオ画像加工&コラージュ編集

Instagramに最適なサイズに加工してくれる。

余白の部分に色や模様を入れられアレンジ可能。

 

f:id:ai8249:20161207101853j:plain スケッチグル

撮った写真をスケッチ風に加工してくれるアプリ。

13種類の効果を使って芸術にしてくれる。

 

今日の進歩

開発をするからには自分自身で使いたいものを作る!!という気持ちで考えることにし、Instagramで使用出来るアプリを作ることにしました。

既存アプリでユーザが使用しているものを調べたところ、やはり写真を加工できるものの需要がありそうです。

けれどただ、加工ができますというアプリでは面白くないので一風変わった感じを出せたらいいなと思います。(そこの構想はまた次回で)