ソースに絡まるエスカルゴ

貧弱プログラマの外部記憶装置です。

【Android Studio】備忘録#1 メッセージダイアログについて

最近ちょっとしたAndroidアプリでも作ってみるかと思い立ってAndroid Studioを触り始めました。「メッセージダイアログを表示させてOK、キャンセルで違う挙動をさせたい」と考えて調べてもすぐにはできない様子。

ググってコピペしていじってを繰り返してなんとか動くものができたので残しておこうと思った次第です。


1:メッセージダイアログ画面の作成

まずは表示させたいメッセージダイアログ画面を作成します。タイトル、内容、OK、CANCELの各要素があれば良いと思ったので以下のようにしました。

dialog.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    tools:context="com.test.test.util.CustomDialogFragment">

    <TextView
        android:id="@+id/dTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:text="注意"
        android:textAlignment="center"
        android:textColor="?android:attr/editTextColor"
        android:textSize="30sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/dMessage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:text="dMessage"
        android:textColor="?android:attr/panelColorForeground"
        android:textSize="20sp" />

    <Button
        android:id="@+id/dOK"
        android:layout_width="350dp"
        android:layout_height="wrap_content"
        android:text="OK" />

    <Button
        android:id="@+id/dCancel"
        android:layout_width="350dp"
        android:layout_height="wrap_content"
        android:text="Cancel" />
</LinearLayout>

ちなみにプレビューは以下のとおり。
f:id:rikoubou:20170324204341p:plain



2:メッセージダイアログ画面を表示させるクラスの作成

CustomDialogFragmentという名前で以下のようにクラスを作成します。

CustomDialogFragment.java

/**
 * メッセージダイアログを表示させるクラス
 */
public class CustomDialogFragment extends DialogFragment {

    // 画面に設定するキー
    public static final String FIELD_TITLE = "title";
    public static final String FIELD_MESSAGE = "message";
    public static final String FIELD_LABEL_POSITIVE = "label_positive";
    public static final String FIELD_LABEL_NEGATIVE = "label_negative";

    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        // ダイアログの設定
        Dialog dialog = new Dialog(getActivity());
        dialog.getWindow().requestFeature(Window.FEATURE_NO_TITLE);
        dialog.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
                WindowManager.LayoutParams.FLAG_LAYOUT_IN_SCREEN);
        dialog.setContentView(R.layout.dialog);
        dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.argb(255, 255, 255, 255)));

        // 画面の各情報
        Bundle args = getArguments();

        // 各種画面の要素を取得
        TextView dTitle = (TextView)(dialog.findViewById(R.id.dTitle));
        TextView dMessage = (TextView)(dialog.findViewById(R.id.dMessage));
        Button dOK = (Button)(dialog.findViewById(R.id.dOK));
        Button dCancel = (Button)(dialog.findViewById(R.id.dCancel));

        // argsにある各文字列を設定
        if (args.containsKey(FIELD_TITLE)) {
            dTitle.setText(args.getString(FIELD_TITLE));
        }
        if (args.containsKey(FIELD_MESSAGE)) {
            dMessage.setText(args.getString(FIELD_MESSAGE));
        }
        if (args.containsKey(FIELD_LABEL_POSITIVE)) {
            dOK.setText(args.getString(FIELD_LABEL_POSITIVE));
        }
        if (args.containsKey(FIELD_LABEL_NEGATIVE)) {
            dCancel.setText(args.getString(FIELD_LABEL_NEGATIVE));
        }

        // OKボタンが押された時の処理
        dOK.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                IActivity callingActivity = (IActivity) getActivity();
                callingActivity.onReturnValue(true);
                dismiss();
            }
        });

        // キャンセルボタンが押された時の処理
        dCancel.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                IActivity callingActivity = (IActivity) getActivity();
                callingActivity.onReturnValue(false);
                dismiss();
            }
        });

        return dialog;
    }
}

簡単に説明すると、
タイトルやメッセージ、OKボタン、CANCELボタンに表示させる文字列は
Bundle argsで渡しているのでそれを取得して設定しています。

そしてボタンが押された場合、
呼び出し元に実装されているonReturnValue(boolean value)の引数valueに
OKならtrue、CANCELならfalseが渡されて実行されます。

IActivity.java

public interface IActivity {
    /**
     * OK/Cancelのダイアログの戻り処理
     * @param value true:OK、false:Cancel
     */
    public void onReturnValue(boolean value);
}

またIActivityというインターフェースを使うことで
呼び出し元でonReturnValueを実装するのを忘れないようにしています。


3:メッセージダイアログを呼び出す

実装したメッセージダイアログを呼び出す方法は以下の通りです。

MainActivity.java

public class MainActivity extends FragmentActivity implements IActivity {

     // 各要素に設定する文字列
     Bundle args = new Bundle();
     args.putString(CustomDialogFragment.FIELD_TITLE, "注意");  // タイトルの設定
     args.putString(CustomDialogFragment.FIELD_MESSAGE, "別の画面に移動します。\nよろしいですか?"); // メッセージの設定

     // メッセージダイアログ作成
     CustomDialogFragment cdf = new CustomDialogFragment();
     cdf.setArguments(args);
     cdf.show(getSupportFragmentManager(),"dialog");

    /**
     * OK/Cancelのダイアログの戻り処理
     * @param value true:OK、false:Cancel
     */
    public void onReturnValue(boolean value) {
        if (value) {
            // OKの場合の処理
            Intent intent = new Intent(getApplication(), SubActivity.class); // SubActivityの画面へ移動
            startActivity(intent);
        } else {
            // キャンセルの場合の処理
        } 
    }
}

上記の方法で自作のメッセージダイアログを作成し、
onReturnValueという関数の引数に結果が渡されるので
if文によって処理を変えることができます。

また別のクラスでもIActivityインターフェースを使うことで
同じようにメッセージダイアログを使うことができます。

これである程度は汎用的に扱えるようになったはずです。

【備忘録】esp8266の扱い方について

毎回ググって調べるのがアホらしいので、備忘録として描いておこうと思った次第です。

1:Arduino IDEでesp8266を使えるようにする
Arduino IDEのメニューから環境設定を選択し、追加ボードマネージャのURLに以下を記述して、OKを押す。
http://arduino.esp8266.com/stable/package_esp8266com_index.json

その後、ツール->マイコンボード->ボードマネージャを選択し「esp8266 by ESP8266 Community」をインストールする。
するとマイコンボードに「Generic ESP8266 Module」が追加されます。

2:書き込み時の設定値
Generic ESP8266 Moduleを選択すると各種設定値を以下のように設定する。
f:id:rikoubou:20161206113532p:plain


3:esp8266とPCをUSBケーブルで接続する
2までの準備ができたら、USBケーブルでPCに接続する。
接続しても認識されない場合は、PCの再起動やUSBケーブルを充電用ではなくシリアル通信できるものに交換する。
また電力が足りないと認識されないそうなので、充電器を刺したりUSBハブを使わずに直接接続してみる。

それでも認識しない場合は、以下の3'のドライバのインストールを実行してみる。

3':ドライバをインストールする(場合によっては飛ばせるかも)
以下のサイトから該当するOSを選択してドライバをインストールしてから、再起動する。
(これをするとドライバがダウングレードするという話も見かけたので、どうしても認識しない場合にやるといいかも)
www.ftdichip.com

4:esp8266への書き込み
esp8266が認識できたら、GNDとGPIO:0を繋いで書き込みモードにする。
その状態でRESETとFLASHボタンを両方押してから書き込む。

以上がざっとしたesp8266の流れです。
Macではドライバを入れていても認識しなかったりしますが、充電器を刺して再起動を繰り返すと認識するようになる場合もあります。

【お絵描き】アニメなどでよくあるぼやっとした光の玉の描き方

本当にお久しぶりです。
なんかもう放置気味になってますね……。

今回はタイトルにあるように「ぼやっとした光の玉」を割と簡単に描く方法です。忘れないようにするための、個人的なメモです。
使用するのはクリスタですが、GIMPとかでも多分できると思います。

方法としては以下の通り。

1:マジックペンなどの丸いペンを選択し、
  大きめなブラシサイズ(ここでは100ぐらい)にして黄色で丸を描く
f:id:rikoubou:20160908220127p:plain

2:ブラシサイズを小さく(ここでは50ぐらい)し、
  色を白に変更して、1の中心に丸を描く
f:id:rikoubou:20160908220139p:plain

3:ガウスぼかしで適当にぼかして完成
f:id:rikoubou:20160908220149p:plain


割と簡単にそれっぽくなりますね。
周囲の色も変更してからぼかすとハレーションに色がついてるみたいな感じも作れます。

ツールの力って偉大ですね。

【つくってみた】おなかに◯◯がいますジェネレーター

お久しぶりです。
気がつけば二ヶ月以上も記事を書いてませんでしたね……(もうダメだ)。

そんなダメダメな感じですがタイトルにある通りのものを作ってみました。

       おなかに◯◯がいますジェネレーター

どこかで見たことあるのに近い絵に、好きな文章(30文字まで)を表示させることができます。また簡易ペイントツールで画像に書き込むことも可能です。

実際にこのジェネレーターで作成した画像が以下になります。
f:id:rikoubou:20160718225117p:plain

作りとしてはhtml5canvas機能とjavascriptjqueryだけで完結させています。現状chromefirefoxでしか動作を保証していません。
(htmlのcanvasさんが色々と問題児なので今後も対応させられないかも)

お腹の中に入っているものを主張したいときにぜひ使ってみてください。

【お絵描き】動きのれんしう2

お久しぶりです。
気づいたら、随分と更新してませんでしたね…。

OpenToonzの方は大方の操作がわかったのですが、
バグが多いので自分にとっては修正版待ちという感じで
最近はあまり触っていません。

パラパラ漫画を作る程度ならクリスタで十分なので
今はそっちで遊んでいます。

そんな感じで今回作ってみたのがこれ。

f:id:rikoubou:20160507004957g:plain

色に関しては単色で塗っているのですが、
筆(B)の紙質強調を使うとかなり適当に塗っても
そこそこ見れる感じになるというのが今日の発見でした。

という忘れないためのメモ書きでした。

【OpenToonz】OpenToonzについての雑記3【お絵描き】

OpenToonzについてのことをつらつらと書いていきます。

公開からある程度経ったことでyoutubeなどに解説動画が色々と上がるようになってきました。(公式の動きが特にないのが悲しいですが…)

そんな中、公開直後にニコニコ動画に投稿されたこの動画がかなりわかりやすかったのでご紹介です。

www.nicovideo.jp

タイトルはちょっとあれですが、この動画を見ればflashのようにボーンを設定して動かす方法がわかると思います。

自分もこの動画を参考に以下のような動きを作ってみました。
f:id:rikoubou:20160412163027g:plain

ぬるぬる動きますね。

ただこのようにボーンを作成して動かすにはメッシュのレベルを作成するのですが、現在OpenToonzのバグによりメッシュのレベルが保存できないようです。
なので作成はできても保存ができないという状況なので、凝ったものを作るのは控えた方が精神衛生上良いと思います。

また自分の環境だけかもしれませんが、メッシュをどんどん作成していくと途中でOpenToonzが落ちるという状況も発生したので、メッシュ関係はバグが多く残っているものと考えられます。

この辺りのバグが解消された次のバージョンが早くリリースされることを望むばかりです。

opentoonz.github.io

【お絵描き】エヘクトはいいぞ。

今更感はありますが、私自身アニメが好きです。
気持ちのよい動き(画面)を見ると、それだけで自分も気分が高揚してきます。

ではどういう画面が気持ちが良いのだろう、と改めて考えたり観察した結果、
エヘクトと呼ばれるもの(煙、炎、光、魔法表現、etc)が重要であるということに気づきました。

それまでは単純にキャラの動きぐらいにしか興味がなかったのですが
エヘクトの重要性に気づいてからは、エヘクトに注目するようになりました。

特撮とか見ていても「爆発はいいなぁ」などとその良さがわかるようになってきたところ、先日このようなエヘクトを特集した書籍が発売されました。

www.amazon.co.jp

エヘクトの紹介やちょっとした描き方も紹介されていて非常にオススメです。

エヘクトの良さをこの本で再確認していたら自分もやってみたくなったので
この本を参考にして、ちょっと爆発をさせてみました。

■掲載されていたものをそのまま参考にしたもの
f:id:rikoubou:20160404231419g:plain

■掲載されていたもの+特撮の爆発を参考にしたもの
f:id:rikoubou:20160404231435g:plain


上手く描けているわけではないですが、一応それなりに爆発しているように見えます。(本に紹介されている描き方すごい…)

というわけで、素人でもこれぐらいさっと描けたりするので
みんなこの本を買いましょう!

エヘクトはいいぞ。