SWZWの雑記帳

SWZWがいろいろやってる趣味等に関することを適当にかきます

Android用Twitter自作クライアントをつくろうとした話 ~レイアウトについて~

この記事はKobe University Advent Calendar 2016の12日目の記事です.

AndroidはひよっこですがTwitterアプリ作りかけたのでそのメモ書き程度に記事にしました. いろいろ間違ってるかもしれないけど気にしない.

きっかけ

最近Twitterの公式アプリが広告やおすすめなどが段々増えて正直邪魔になってきました.
あと, 誤いいね(旧誤ふぁぼ)が公式アプリは多発するのも使いづらかったです.
他の非公式のTwitterアプリも何個か使ってみたけど, しっくりきたものがなく, なかったら作ろうということでプログラミングの勉強も兼ねて作ろうということになりました.
(Twitterの存続が危なくなってきた時期に作り始めるのはミスだとかそんなことはないと信じる)

とりあえず

今回の記事はアプリのレイアウトを考えるところだけ書きます.
オリジナルで使いやすいレイアウトを考えるほどデザイン発想力がなかったので今回は公式に近いものを作っていきたいです.

レイアウト

準備

今の公式アプリのデザインはGoogle系統のアプリでもよく見るAndroidDesignSupportLibraryのCoordinatorLayoutっぽいのでそれで作っていきます.
minSdkVersionは14(Android4.0以上)みたいですね.

とりあえず, 使うためにAndroidStudioでProjectStructureのModulesの中のDependenciesに追加. あとでrecyclerviewも使うので

  • com.android.support:design
  • com.android.support:recyclerview-v7

の2つを追加.

構成

メインのレイアウトの構成

<android.support.v4.widget.DrawerLayout>
    <android.support.design.widget.CoordinatorLayout>
        <android.support.design.widget.AppBarLayout>
            <android.support.v7.Toolbar>
                <TextView/>
            </android.support.v7.Toolbar>
            <android.support.design.widget.TabLayout/>
        </android.support.design.widget.AppBarLayout>
        <android.support.v4.view.ViewPager/>
        <android.support.design.widget.FloatingActionButton/>
    </android.support.design.widget.CoordinatorLayout>
</android.support.v4.widget.DrawerLayout>

公式アプリでいうプロフィール等にとぶための左のメニューのために一番親のレイアウトをDrawerLayoutにします.
また, 上にスワイプしたら一部が隠れるようなAppBarLayoutや, 右下のツイートボタンになっているFAB(FloatingActionButton)を利用するために, CoordinatorLayoutをDrawerLayoutの一つ下の階層のレイアウトにします.
あとは, AppBarLayoutの挙動に関わるToolbarとTabLayoutをAppBarLayoutの子に配置して, TLやらが表示されるメイン画面になるViewPagerとツイートボタンになるFABをそれぞれCoordinatorLayoutの子にすればOK.

TLや自分あてツイートの一覧等の中身はそれぞれFragment作って, FragmentPagerAdapterを継承したクラスに登録すればいける.

TL用Fragment

メイン画面になるであろうTLのFragmentだけ構成やらを書きます.(というかTL用の画面しかまだ作ってない)
とりあえず構成とFragmentの中身

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/fragment_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/swipeLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" >

        <android.support.v7.widget.RecyclerView
            android:id="@+id/recycleView"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </android.support.v4.widget.SwipeRefreshLayout>

</RelativeLayout>

一番親は適当にRelativeLayoutを配置. TLの画面を下にスワイプしたら更新するように, 次の階層にSwipeRefreshLayoutを配置.一番下の階層にはTLのためにTweetのリストを表示するRecyclerViewを配置しておきます.
ListViewではなくRecyclerViewなのはListViewだとどれかがうまくいかなくなったので変えたのですが忘れました.(すみません)
まあカスタマイズいろいろできるしTweetのリストはRecyclerViewでします.

あと, 基本全部idとかlayout関係だけだが, SwipeRefreshLayoutはリストの一番上になった時のみ下にスワイプすることで更新するようにするため, SwipeRefreshLayoutにはlayout_behaviorも追加.

Fragmentの実装はこんな感じで. Twitter系統の情報の取得はtwitter4jを使用しています.

public class MainFragment extends Fragment {

    private RecyclerView mRecyclerView;
    private RecyclerAdapter recyclerAdapter;
    private List<twitter4j.Status> data;
    private Twitter mTwitter;
    private SwipeRefreshLayout mSwipeRefreshLayout;

    @Override
    public View onCreateView(
            LayoutInflater inflater,
            ViewGroup container,
            Bundle savedInstanceState){
        return inflater.inflate(R.layout.fragment_main, container, false);
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);

        data = createData();
        recyclerAdapter = new RecyclerAdapter(getActivity(), data);

        mSwipeRefreshLayout = (SwipeRefreshLayout) getView().findViewById(R.id.swipeLayout);
        mSwipeRefreshLayout.setOnRefreshListener(mOnRefreshListener);

        mRecyclerView = (RecyclerView) getView().findViewById(R.id.recycleView);
        mRecyclerView.setLayoutManager(new LinearLayoutManager(getActivity(), LinearLayoutManager.VERTICAL, false));
        mRecyclerView.setAdapter(recyclerAdapter);

        mTwitter = TwitterUtils.getTwitterInstance(getActivity());
        reloadTimeLine();


    }


    private List<twitter4j.Status> createData() {
        List<twitter4j.Status> data = new ArrayList<>();
        return data;
    }

    private void reloadTimeLine() {

    (略)

    }


    private SwipeRefreshLayout.OnRefreshListener mOnRefreshListener = new SwipeRefreshLayout.OnRefreshListener(){
        @Override
        public void onRefresh() {
            reloadTimeLine();
            mSwipeRefreshLayout.setRefreshing(false);
        }
    };

}

RecyclerAdapterクラスはRecyclerViewのためのRecyclerView.Adapterを継承した自作クラスです.
リストの要素一つ一つにコンストラクタで取得したタイムラインのリストから名前やら本文やらを登録していってます.

reloadTimeLine()はタイムラインを再取得する関数です.
リストの一番上で下にスワイプすることでmOnRefreshListenerのonRefresh()がよばれてタイムラインを更新してます.

今回は終わり

そもそもまだ自作Twitterクライアント(アプリ)を制作途中なんで, 今回は大まかなレイアウトのまとめということでこの辺で終わります. また進捗があったら自分のメモ書き用程度にまとめるかもしれない.

2015年アニメOP, EDから見る今年のトレンドコード進行

この記事はKobeUniv Advent Calendar 2015 - Adventar 12/18の記事です.

他の方々が技術たっぷりな記事をよく書かれているのですが, 技術的な知識があまりないためそういう内容は書きません.

ソースコードは書かず音楽のコードを書くので気楽に読んでいただけると幸いです.

今回の内容は, ふと「音楽のコード進行のトレンドはないものか」と思って今年のトレンドを探ろうと思いました , 今年どんな曲が売れた, どんなアーティストが売れたとかわからないので, 独断と偏見で 2015年のアニメ曲を見ていこうと思います.

音楽のコード進行がなにかわからないかたは適当にググったらでてくると思います.

コードについてはChordWikiさんを参考にさせていただきました.

※選曲は私が見たものや話題になってたんじゃないかと感じたものなので, 売れた曲とは限りませんのでご了承ください.

コード分析

2015年冬アニメ

それでは冬アニメから順に見ていきます. サビだけを見ていきます.

選んだ曲は

です.

ちなみに私はどちらのアニメもまだ見れていません.

吹雪

かっこいい曲ですね.

この曲のサビは以下のようになってます.

|Gm     |F      |Eb   F    |Bb      |
|Cm7    |Dm7    |Eb   C7/E |F D7/F# |
|Gm     |F      |Eb   F    |Bb      |
|Cm7    |Dm7    |Eb   C7/E |F D7/F# |
|Cm7    |Dm7    |G         |        |

この曲はGmの曲なので, ローマ数字に直すと,

|Ⅵm    |Ⅴ       |Ⅳ    Ⅴ    |Ⅰ         |
|Ⅱm7    |Ⅲm7    |Ⅳ   Ⅱ7/Ⅳ# |Ⅴ Ⅲ7/Ⅴ# |
|Ⅵm    |Ⅴ       |Ⅳ    Ⅴ    |Ⅰ         |
|Ⅱm7    |Ⅲm7    |Ⅳ   Ⅱ7/Ⅳ# |Ⅴ Ⅲ7/Ⅴ# |
|Ⅱm7    |Ⅲm7    |Ⅵ          |        |

Star!!

転調祭りの曲です.

この曲のサビは以下のようになってます.

|E      |D#m7  G#7 |C#m7     |Bm7  Eaug   |
|A  B/A |G#m7  C#  |F#m7     |D    F#m7/B |
|E      |D#m7  G#7 |C#m Caug |E/B  A#m7-5 |
|A  B   |G#m7  C#  |F#m7     |B7          |

この曲はEの曲なので, ローマ数字に直すと,

|Ⅰ        |Ⅶm7  Ⅲ7 |Ⅵm7       |Ⅴm7    Ⅰaug  |
|Ⅳ  Ⅴ/Ⅳ |Ⅲm7  Ⅵ  |Ⅱm7        |Ⅶb   Ⅱm7/Ⅴ |
|Ⅰ        |Ⅶm7  Ⅲ7 |Ⅵm Ⅵbaug |Ⅰ/Ⅴ  Ⅳ#m7-5 |
|Ⅳ  Ⅴ   |Ⅲm7  Ⅵ  |Ⅱm7        |Ⅴ7          |

2015年春アニメ

次は春アニメです. ここにきて, 長調か短調か決めておけばよかったと後悔しています.

選んだ曲は

です.

これまた全部アニメ見れてないです. ユーフォは3話ぐらいまでは見ました.

トゥッティ!

個人的にはOPよりEDのこの曲のほうが印象強いです.

この曲のサビは以下のようになってます.

|Bb      |C           |Dm   C     |F          |
|Bb      |Dm/A  A7/C# |Dm   Bm7-5 |F/C  Bm7-5 |
|Bb      |C           |A7   A7/C# |Dm   Dm7/C |
|Bb      |            |C          |           |
|Dm      |            |           |           |
|Dm    Bb|      Am    |E7   A7  Dm|

この曲はDmの曲なので, ローマ数字に直すと,

|Ⅳ      |Ⅴ            |Ⅵm    Ⅴ     |Ⅰ            |
|Ⅳ      |Ⅵm/Ⅲ  Ⅲ7/Ⅴ# |Ⅵm  Ⅳ#m7-5 |Ⅰ/Ⅴ  Ⅳ#m7-5 |
|Ⅳ      |Ⅴ            |Ⅲ7   Ⅲ7/Ⅴ# |Ⅵm   Ⅵm7/Ⅴ |
|Ⅳ      |             |Ⅴ           |             |
|Ⅵm     |             |            |             |
|Ⅵm   Ⅳ|       Ⅲm    |Ⅶ7   Ⅲ7  Ⅵm|

シュガーソングとビターステップ

個人的におしゃれだと思います.

この曲のサビは以下のようになってます. (若干コード違う気が...)

|G#m   C#  |A#m  D#m |G#m  A#7  |D#m Dm C#m F#7 |
|G#m   C#  |A#m  D#m |G#m       |D              |
|F#m A Bm E Fdim|F#m  |

この曲はF#の曲なので, ローマ数字に直すと,

|Ⅱm   Ⅴ  |Ⅲm  Ⅵm |Ⅱm  Ⅲ7  |Ⅵm Ⅵbm Ⅴm Ⅰ7 |
|Ⅱm   Ⅴ  |Ⅲm  Ⅵm |Ⅱm       |Ⅵb           |
|Ⅰm Ⅲb Ⅳm Ⅶb Ⅶdim|Ⅰm  |

2015年夏アニメ

次は夏アニメです. この時期は結構アニメ見てました.

選んだ曲は

  • 干物妹!うまるちゃん」より「かくしん的☆めたまるふぉ~ぜっ!」
  • 「がっこうぐらし!」より「ふ・れ・ん・ど・し・た・い」

です.

両方ともアニメ全話みました. 面白かったです.

かくしん的☆めたまるふぉ~ぜっ!

UMR!UMR!

この曲のサビは以下のようになってます.

|D   A/C#   |Bm    Am7  D7 |G   D/F#   |E    Asus4 A |
|D   A/C#   |Bm A#aug Am7  D7 |G   D/F#   |E/G#  Asus4 A |
|G   A/G    |F#m7  F6      |Em7    Em/A   |           |

この曲はDの曲なので, ローマ数字に直すと,

|Ⅰ   Ⅴ/Ⅶ    |Ⅵm    Ⅴm7  Ⅰ7 |Ⅳ     Ⅰ/Ⅲ   |Ⅱ    Ⅴsus4 Ⅴ |
|Ⅰ   Ⅴ/Ⅶ    |Ⅵm Ⅴ#aug Ⅴm7  Ⅰ7 |Ⅳ   Ⅰ/Ⅲ   |Ⅱ/Ⅳ#  Ⅴsus4 Ⅴ |
|Ⅳ   Ⅴ/Ⅳ   |Ⅲm7  Ⅲb6     |Ⅱm7    Ⅱm/Ⅴ   |           |

ふ・れ・ん・ど・し・た・い

死体から~♪死体なら~♪ コードはすごく単純です.

この曲のサビは以下のようになってます.

|F   C  |Dm  Am7 |Bb  F  |Gm7  C  |
|F   C  |Dm  Am7 |Bb  C  |F       |
|F   C  |Dm  Am7 |Bb  F  |Gm7  C  |
|F   C  |Dm  Am7 |Bb  C  |F       |

この曲はFの曲なので, ローマ数字に直すと,

|Ⅰ   Ⅴ  |Ⅵm  Ⅲm7 |Ⅳ   Ⅰ   |Ⅱm7  Ⅴ  |
|Ⅰ   Ⅴ  |Ⅵm  Ⅲm7 |Ⅳ   Ⅴ  |Ⅰ       |
|Ⅰ   Ⅴ  |Ⅵm  Ⅲm7 |Ⅳ   Ⅰ   |Ⅱm7  Ⅴ  |
|Ⅰ   Ⅴ  |Ⅵm  Ⅲm7 |Ⅳ   Ⅴ  |Ⅰ       |

2015年秋アニメ

最後に秋アニメです. ちょうど今ですねー.

選んだ曲は

です.

ごちうさみてないです. すみません.

ノーポイッ!

あぁ~^心がポイポイするんじゃあ~^

この曲のサビは以下のようになってます.

|AM9      |B/A      |G#m7       |C#m7   |
|F#m7     |A/B      |G#m7       |C#7    |
|AM9      |B        |G#m7  C#7-9|C#     |
|F#m7     |E/G#     |Am         |       |
|A/B      |B        |

この曲はEの曲なので, ローマ数字に直すと,

|ⅣM9      |Ⅴ/Ⅳ      |Ⅲm7       |Ⅵm7   |
|Ⅱm7       |Ⅳ/Ⅴ      |Ⅲm7       |Ⅵ7    |
|ⅣM9      |Ⅴ        |Ⅲm7  Ⅵ7-9 |Ⅵ     |
|Ⅱm7       |Ⅰ/Ⅲ      |Ⅳm         |       |
|Ⅳ/Ⅴ      |Ⅴ        |

はなまるぴっぴはよいこだけ

配信停止になった回もあったりといろいろ話題ですね. 面白く見てます.

この曲のサビは以下のようになってます.

|Cm   Bb  |Ab     |Fm  Bb  |Dm7-5  G7    |
|Cm   Bb  |Ab     |Fm  Bb  |AbM7 Gm7 Cm  |

この曲はCmの曲なので, ローマ数字に直すと,

|Ⅵm   Ⅴ  |Ⅳ     |Ⅱm  Ⅴ  |Ⅶm7-5  Ⅲ7    |
|Ⅵm   Ⅴ  |Ⅳ     |Ⅱm  Ⅴ  |ⅣM7 Ⅲm7 Ⅵm   |

傾向

先ほども書いたように, 長調の曲と短調の曲を分けるべきでしたが, 上のローマ数字のほうのコードからいろいろな傾向が読み取れます. いろいろ見ていきます.

今でもカノンコードの進行は強い

今回ピックアップした曲の中だと夏アニメの2つはどちらも 「Ⅰ→Ⅴ→Ⅵm→□m→Ⅳ→Ⅰ→Ⅱ系統→Ⅴ」 という進行になっていてこの進行はいろいろな曲でもよく耳にしますね. いわゆるカノンコードというやつ一種にあたります.

特に「ふ・れ・ど・し・た・い」のほうは結構カノンコード感すごいです

王道進行も納得の貫録

「ノーポイッ!」や「トゥッティ!」の一部, 「シュガーソングとビターステップ」前半の進行などはすべて 「Ⅱ(m)→Ⅴ→Ⅲm→Ⅶm」 の派生の動きがあります. J-POPでよく耳にする王道のコード進行です. やっぱりいろいろな人に心地いい動きなんでしょう.

マイナーコードはⅥm→Ⅴ→Ⅳが人気?

「海色」や「はなまるぴっぴはよいこだけ」等は 「Ⅵm→Ⅴ→Ⅳ」 が使われていますが, サビの初めにT→D→Sという流れが今年のアニソンの短調の曲ではよく使われてるみたいですね. 基本の進行だから今年だけの流れではない気がs(ry

基本からうまく派生させたらかっこいい

上の3つでふれなかった「Star!」ですが, この曲は今回あげた他の曲と違う点がかなり派生コードを使ったり, 似た働きをするコードを使っています.

なので, 結構分析めんどくさいのでやってないです. ただ, 原曲を聞いていただけたらわかると思いますが, 派生多用しているにもかかわらずかなり自然に聞こえます. 個人的にすごいとおもいます.

「Star!」は転調も多いのでテクニカルなコード進行をしている(個人的感想)ので, そのような派生コード等も今年の曲で注目できる点ではないでしょうか.

最後に

ながながと書いてきましたが内容はとても薄いです. これからはうまくまとめる能力つけていきます.

あと, こんなにだらだら書いてきましたが

音楽はコード進行がすべてではありません

音楽の3要素は, メロディー, ハーモニー, リズムです. 多くの曲でコード進行はだいたいハーモニーを担当しているのではないかと私は考えていますが, それも人によって感じ方が違うと思います.

つまり

好きだと思う曲が好き

ですね. (今まで書いてきただらだらしたものはなんなんだ)

ただ要素としては重要なので, コード進行の分析もいいんじゃないですかね.

コード進行もっと勉強します. 今度元気があれば今回のトレンドを取り入れた曲を作ります.

それでは長文失礼いたしました.

テスト

Advent Calendarに記事を書くのを期にとりあえずブログ開設しました。

せっかくつくったんでなんか進捗がでたときとか、気が向いたらなんか書きます。

ジャンル的には趣味関連のことになると思うので、DTMとかゲームのプレイの感想とかになると思いますが内容は未定です。