Help us understand the problem. What is going on with this article?

オッス!!悟空語翻訳アプリを作ったぞ!!

ドラゴンボール.jpg

はじめに

オッス!!
今回はandroidアプリで【悟空語トランスレータ】を作ったぞぉ!!すげぇなぁ!!
正直実装に取り掛かるまでに時間がかかっちまって二番煎じ感がでちまったが、
修行の成果(実装でつまったところ)を見せてぇと思うぞ!!
よろしくな!!

ちなみに、Google Developer Accountがまだ作れてねぇから、アプリのリリースはできねぇんだ。すまねぇ。
GitHubから落として来れるから、ぜってぇ使ってくれよな!!
https://github.com/Kliter/GokuTranslater

全体像

まずは全体のレイアウトからだぞ。
オラがUIの修行を怠ったせいで、「どこに何を置いたら使いやすいか」が全然わからなかったんだ。
結論から言うと、App Storeで翻訳アプリを検索して、使いやすそうなUIを参考にさせてもらったぞ。
それでも、きちんと勉強しねぇと今回みてぇにすっげぇだせぇデザインになっちまうんだ。
おしゃれなアプリを開発するためには、UI/UXもきちんと勉強しなきゃいけねぇって気付けたぞ。
オラワクワクすんなぁ!!

スクリーンショット 2019-03-03 1.10.46.png

Element RelativeLayout is not allowed here

実はオラはandroidアプリを開発するのはにけぇめで、いっけぇめはInstagram Cloneっつぅアプリをつくってたんだ。
こいつがすっげぇつえぇやつで、Tool Barはこいつを参考にして実装したんだ。コードはこんな感じ。

snippet_translate_toolbar.xml
<merge xmlns:android="http://schemas.android.com/apk/res/android">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@drawable/toolbar_background">

        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <TextView
                    android:id="@+id/tvScreenName"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:fontFamily="sans-serif-black"
                    android:text="@string/screen_name_main"
                    android:textAlignment="center"
                    android:textSize="24sp"
                    android:textStyle="bold" />

                <ImageView
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_alignParentEnd="true"
                    android:layout_centerVertical="true"
                    android:layout_marginEnd="20dp"
                    android:id="@+id/info"
                    android:src="@drawable/ic_info"/>

            </RelativeLayout>

        </android.support.v7.widget.Toolbar>

    </android.support.design.widget.AppBarLayout>

</merge>

けどレイアウトを丸ごと持ってきたら、RelativeLayoutのタグで"Element RelativeLayout is not allowed here"のエラーが出ちまった。
最初はまたフリーザのやつが悪さしてるのかと思ったけど、そうじゃなかったんだ。

原因はAppBarLayoutにあって、android.support.designライブラリがbuild.gradleに記述されてなかったんだ。
こいつがねぇとandroid.support.designライブラリから提供されているViewなんかは使うことができねぇから、みんなは気をつけてくれよな。

Toolbarが二つでる

Toolbarのレイアウトの依存関係が解決したのもつかの間、アプリのプレビューを見たらToolbarが二つ出ちまってたぞ。
こいつは前にも経験したことがあったんだけど、解決方法をメモするのを忘れちまってたんだ。
オラ情けねぇぞ。

調べてみたところ、原因はAndroid.Manifest.xmlだったんだ。
android:themeの値がそのままだと、デフォルトのToolbarを表示しちまうんだ。
そこに新しいToolbarが追加されて、二つ表示されちまってたわけだな。
こいつを修正すれば、自作のToolbarを使うことができるぞ。具体的にはこうだな。
android:theme="@style/Theme.AppCompat.Light.NoActionBar">

プロジェクトを作りたての時は結構忘れちまうことが多いから、忘れずに書き換えてくれよな!!

変換処理の実装

悟空語翻訳アプリを作りたいって思いは結構昔からあったんだけど、オラは自然言語処理とかはさっぱりわからねぇんだ。
正直諦めようかと思ったこともあったけど、悟空の言葉っぽく変えるだけなら別に難しい技術を使わなくてもいいって気づいて、法則性を見つけることができたぞぉ。実装方法はこんな感じだ。
1.ひらがな、カタカナを変換するためのMapを作成

StringUtil.kt
private val convertMap: Map<String, String> = mapOf<String, String>(
    "あい" to "えぇ",
    "かい" to "けぇ",
    "かえ" to "けぇ",
    "がい" to "げぇ",
    "がえ" to "げぇ"
    //こんな感じでひらがな、カタカナのentryを入れていくぞ。
)

2.渡された文字列をentryを使って置換

StringUtil.kt
fun translate(string: String): String {
    var obtainedText: String = string

    var key: String
    val keySetIterator: Iterator<String> = convertMap.keys.iterator()
    while (keySetIterator.hasNext()) {
        key = keySetIterator.next()
        obtainedText = obtainedText.replace(key, convertMap[key] as String)
    }

    return obtainedText
}

KotlinはJavaとCollectionの扱い方が全然ちげぇから、少しそこに戸惑ったぞ。
参考記事を書いてくれたみんな、サンキューな!!

※参考記事
https://qiita.com/opengl-8080/items/36351dca891b6d9c9687
https://qiita.com/opengl-8080/items/4d335dafe526dd17d96e
https://re-engines.com/2017/06/26/kotlin%E3%82%92%E3%81%AF%E3%81%98%E3%82%81%E3%82%88%E3%81%86%E3%80%9C%E3%82%B3%E3%83%AC%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AA%E3%81%A9%E3%80%9C/

static関数の実装

Javaでコーディングをしている時、static関数を持つクラスを実装することってあるよな!!
今回の置換処理なんかは、見た目の処理とロジックを分けるために他のクラスで実装したかったんだ。
そこでStringUtil.ktってクラスを作ったんだが、なんとKotlinにはstaticっていう概念が存在しないらしいんだ。
オラすっげぇびっくりしたぞ!!

でも、代用になる仕組みはきちんと用意されてるみたいなんだ。
それが、companion objectだ。

StringUtil.kt
class StringUtil {
    companion object StringUtil{
       // 置換処理
    }
}

こんな感じで記述すると、他のクラスからインポートして関数を利用することができるんだ。
正直なところまだ詳しい仕組みが理解できていねぇから、100倍の重力で修行する予定だ!!

まとめ

今回はこれで終わりだ!!
Done is better than perfectの精神で一応完成としてみたけど、
「レイアウトがダサすぎる」「アプリをリリースできていない」等の理由で、全然達成感を得られなかったぞ。
やっぱりアプリをアウトプットとするなら、最初に目標を決めてから走り出さないと「何をもってして完成か」がブレちまうな。

次に開発するアプリは今回の反省を活かして「UI/UXにこだわる」「アプリをリリースするところまでで完成」ってことを意識して修行しようと思うぞ!!
それじゃあオラはこれから精神と時の部屋に行ってくるぞ!!

またな。はっ!!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away