読者です 読者をやめる 読者になる 読者になる

くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

DjangoとjQueryでAjaxする

最近、フロントエンドもやるようになり、いまさらjQueryAjaxを使うことに。。

右も左も分からないので、その際の備忘録。

コードはこんなかんじ

formで入力を受け付けて、submitの際に、Ajaxでの通信に切り替える感じ

成功するとdiv配下に、帰ってきたHTMLを挿入する。

<div id="contents"></div>

<form class="form-horizontal" method="post" action="...">
  {% csrf_token %}
  <button type="submit" class="btn">Submit</button>
</form>
$("from").submit(function(event){
    // HTMLでの送信をキャンセル
    event.preventDefault();

    var $form = $(this);
    $.ajax({
        url: $form.attr('action'),
        type: $form.attr('method'),
        data: $form.serialize(),
        timeout: 10000,
        beforeSend: function(xhr, settings) {
           xhr.setRequestHeader("X-CSRFToken", $("input[name='csrfmiddlewaretoken']").val());
        },
    }).done(function(data, textStatus, jqXHR){
        // 成功したときの処理

        var $data = $(data);
        var $root = $('#contents');
        $root.empty();
        $root.append($data);
        $data.ready(function(){
            // DOMを操作をし終えた後にする処理
        });
    }).fail(function(jqXHR, textStatus, errorThrown){
       // 失敗したときの処理
    });
});

とても2017年とは思えないコード。。。ReactとかAngulrとかしたい。。。
が、とりあえず、歴史を辿ってみている感じ。

参考にしたサイト様

(Django小ネタ) Templateのforでたくさん固定回数繰り返す方法

最近、Djangoのお仕事をいただけるので、そのときの備忘録

templateで固定回数のループしたいときの小ネタ。

以下のような感じに感じにすると、100回繰り返せる。

{% for file_id in ""|rjust:"100" %}
  (繰り返したいなにか)
{% endfor %}

参考にしたサイト様

Unity×AndroidでmBaaSのニフティクラウド mobile backend(NCMB)を使ってみる

ひさびさにAndroidアプリをリリース! 初の横スクロールアクション「あざらしロジック」(GooglePlay)

f:id:wannabe-jellyfish:20170128222935p:plain

www.youtube.com

その際にいろいろやったので、忘れないための備忘録φ(..)メモメモ
「あざらしロジック」で、Nifty Cloud mobile backend(NCMB)を導入したときの話。

NCMBのUnityプラグインのインストール

NCMBのUnityプラグインは、GitHubにて提供されているので、こちらからダウンロード。

ダウンロードしたzip(NCMB.2.2.0.zip)を解凍すると、「NCMB.unitypackage」が入っているので、そちらをインポート。

【注意】ほかにもSupportLibを利用しているプラグインを入れている場合

support-libやgoogle-play-serviceが競合していると、上手く動かないのでインポート時に外しておく。 f:id:wannabe-jellyfish:20170129203102p:plain

特にNCMBの、v2.2.0のライブラリはバージョンが古く、
AdMob/GPGS/Applovinなどと合わせて利用するとバージョンの整合性が合わず、上手く行かなかった。。。

ただ、AndroidManifest.xmlを除いた場合、必要な項目を手動でマージする必要がある。

使い方

基本的な使い方は以下の感じ。 ドキュメントも日本語でまとまっているため、わかりやすい

更新系

// Insert
NCMBObject obj = new NCMBObject ("Book");
obj["test"] = "value";
obj.SaveAsync ((NCMBException e) => {      
    if (e == null) { //成功時の処理 }
});

// Update(ObjectIdを指定する)
NCMBObject obj = new NCMBObject ("Book");
obj.ObjectId = "xxxxxxxxx";
obj["test"] = "value2";
obj.SaveAsync ((NCMBException e) => {      
    if (e == null) { //成功時の処理 }
});

// Delete
obj.DeleteAsync((NCMBException e) => {      
    if (e == null) { //成功時の処理 }
});

参照系

// Search by objectId
NCMBObject obj2 = new NCMBObject ("Book");
obj2.ObjectId = obj.ObjectId;
obj2.FetchAsync ((NCMBException e) => {        
    if (e == null) { //成功時の処理 }
});

// Search Query
//QueryTestを検索するクラスを作成
NCMBQuery<NCMBObject> query = new NCMBQuery<NCMBObject> ("QueryTest");
//Scoreの値が7と一致するオブジェクト検索
query.WhereEqualTo ("Score", 7);
//取得件数の指定
query.Limit = 5;
//取得開始位置の指定
query.Skip = 6;
// Sort
query.OrderByDescending ("Score");  //Scoreを降順で並べ替え
query.AddAscendingOrder ("Age");    //さらにAgeを昇順で並べ替え
// 外部参照も合わせて取得
query.Include("Child");

// 検索を実行
query.FindAsync ((List<NCMBObject> objList ,NCMBException e) => {
    if (e == null) {
        //Scoreが7のオブジェクトを出力
        foreach (NCMBObject obj in objList) {
            Debug.Log ("objectId:" + obj.ObjectId);
        }
    }
});

// 検索件数の取得
query.CountAsync((int count , NCMBException e )=>{
    if(e == null){
        //件数を出力
        Debug.Log("件数 : "+ count);
    }
});

以上!!

参考にしたサイト様

Unity×Android | Admob/Applovinを使ったリワード広告(動画リワード)

ひさびさにUnityでAndroidアプリを作ってみました! 初の横スクロールアクション「あざらしロジック」!(GooglePlay)

f:id:wannabe-jellyfish:20170128222935p:plain

www.youtube.com

その際にいろいろやったので、忘れないための備忘録φ(..)メモメモ
「あざらしロジック」で、AdMobApplovinを導入したときの話。

AdMobのUnityプラグインのインストール

AdMobのプラグインは、GitHubに公開されているので、以下からダウンロード。
Release Google Mobile Ads Unity Plugin v3.2.0 · googleads/googleads-mobile-unity · GitHub

※すでに他のプラグインで、AndroidManifest.xmlをインポートしている場合は、追加でインポートしない。

ApplovinのUnityプラグインのインストール

Applovinのプラグインは、Applovinの公式サイトからダウンロード
AppLovin - Sign in

※すでに他のプラグインで、AndroidManifest.xmlをインポートしている場合は、追加でインポートしない。

AndroidMainifest.xmlをインポートしなかった場合

AndroidManifest.xmlに追記が必要。追記する内容は以下の通り。
YOUR_PACKAGE_NAMEYOUR_SDK_KEYは、自分の環境に合わせて。

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="YOUR_PACKAGE_NAME"
  ・・・・
  >

  <!-- These permissions are mandatory to run AppLovin SDK -->
  <uses-permission android:name="android.permission.INTERNET"/>
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" android:maxSdkVersion="18"/>

  <!-- These permissions are strongly recommended and will result in higher performance -->
  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
  <uses-permission android:name="android.permission.READ_PHONE_STATE" />

  <application>
    <!-- Applovin's meta-data -->
    <meta-data android:name="applovin.sdk.key" android:value="YOUR_SDK_KEY" />
    <activity android:name="com.applovin.adview.AppLovinInterstitialActivity" android:configChanges="orientation|screenSize"/>
    <activity android:name="com.applovin.adview.AppLovinConfirmationActivity" />
  </application>

</manifest>

リワード広告を表示してみる

使い方は、こんな感じ。(公式のDoc)より
リスナーが用意されているので、動画が表示されたら、報酬を付与するなどの処理ができる。

public class AdRewardManager : MonoBehaviour {

    void Start() {
        // AppLovin SDKの初期化
        AppLovin.InitializeSdk();
        // リワード広告の読み込み
        AppLovin.LoadRewardedInterstitial();
        // リスナーの設定
        AppLovin.SetUnityAdListener(name);
    }

    // リワード広告の表示
    public void ShowAdReward() {
        // 表示の準備ができていたら、広告を表示する
        if(AppLovin.IsIncentInterstitialReady()) {
            AppLovin.ShowRewardedInterstitial();
        }
    }

    // リスナー
    void onAppLovinEventReceived(string ev) {
        if(ev.Contains("REWARDAPPROVEDINFO")) {
            // 動画が再生された
        } else if(ev.Contains("LOADEDREWARDED")) {
            // 読み込み完了
        } else if(ev.Contains("LOADREWARDEDFAILED")) {  
            // 読み込み失敗
        } else if(ev.Contains("HIDDENREWARDED")) {
            //動画の表示し終わり、非表示にされた

            // 次の動画の準備
            AppLovin.LoadRewardedInterstitial();
        }
    }
}

AppLovinは、インタースティシャル広告も表示できる

インタースティシャル広告版はこちら。(公式のDoc)より

public class AdInterstitialManager : MonoBehaviour {

    void Start() {
        // AppLovin SDKの初期化
        AppLovin.InitializeSdk();
        // インタースティシャル広告の読み込み
        AppLovin.PreloadInterstitial();
        // リスナーの設定
        AppLovin.SetUnityAdListener(name);
    }

    // インタースティシャル広告の表示
    public void ShowAdReward(string name) {
        // 表示の準備ができていたら、広告を表示する
        if(AppLovin.HasPreloadedInterstitial()) {
            AppLovin.ShowInterstitial();
        }
    }

    // リスナー
    void onAppLovinEventReceived(string ev) {
        if(ev.Contains("DISPLAYEDINTER")) {
            // 広告が表示された
        } else if(ev.Contains("LOADEDINTER")) {
            // 読み込み完了
        } else if(ev.Contains("LOADINTERFAILED")) {  
            // 読み込み失敗
        } else if(ev.Contains("HIDDENINTER")) {
            // 広告が非表示にされた

            // 次の広告の準備
            AppLovin.PreloadInterstitial();
        }
    }
}

ちなみに、リスナーについては、こっちの公式Docより

以上!!かんたん!!

参考にしたサイト様

(小ネタ) 徐々に透過させて、フェードアウトする

UnityでSpriteをフェードアウトさせる小ネタ。

Time.deltaTimeに応じて、徐々に透過度をさげていく。

ソース

using UnityEngine;

public class Fadeout: MonoBehaviour {
    // フェードアウトするまでの時間(0.5sec)
    public float fadeTime = 0.5f;
    private float time;
    private SpriteRenderer render;


    void Start () {
        render = GetComponent<SpriteRenderer>();
    }

    void Update () {
        time += Time.deltaTime;
        if(time < fadeTime) {
            float alpha = 1.0f - time / fadeTime;
            Color color = render.color;
            color.a = alpha;
            render.color = color;
        } else {
            Destroy(gameObject);
        }
    }
}

参考にしたサイト様

UnityxAndoridでGooglePlayGameServiceを使ったログイン処理

ひさびさにUnityでAndroidアプリを作ってみました!
拙作、初の横スクロールアクション「あざらしロジック」!(GooglePlay)

f:id:wannabe-jellyfish:20170128222935p:plain

www.youtube.com

その際にいろいろやったので、忘れないための備忘録φ(..)メモメモ
「あざらしロジック」で、Google Play Game Serviceを使ったので、その時の話

Google Play Game Service(GPGS)とは

Google Play ゲーム サービスの機能 - Google Play デベロッパー ヘルプ」によると、以下の感じ。

Google Play ゲーム サービスの機能

Google Play ゲーム サービスを使うと、楽しいソーシャル機能やマルチプレーヤー機能をゲームに追加することができます。

Google Play ゲーム サービスの実装に関する基本事項の解説やドキュメントをご覧いただくには、下記の機能を選択してください。

ランキング(リーダーボード)やGoogleアカウントでのSignin(ログイン)など、ゲームで使う機能を提供しているサービス。
今回は、Signin(ログイン)の部分だけ、利用した。
(リーダーボードも使おうとしたけど、1アカウントにつき1つのスコアしか表示されないので、mBaaSを使うことに)

Google Play Developer Consoleでの準備

ほぼ、この記事のとおりやっただけ。わかりやすくまとまってて、助かりました!

qiita.com

開発中の場合、証明書のフィンガープリントが必要

開発中のアプリで利用する場合は、証明書のフィンガープリント(SHA1)を自分で取得する必要があるので注意。
デバッグ用のkeystoreはC:/Users/<アカウント名>/.android/debug.keystoreにあるので、
「keytool.exe」を使って確認。

keytool -list -keystore C:/Users/<アカウント名>/.android/debug.keystore -v -storepass android

Unityプラグインのインストール/セットアップ

UnityからGPGSを利用するためのプラグインGitHubに公開されているので、そこから入手

GitHub - playgameservices/play-games-plugin-for-unity: Google Play Games plugin for Unity

zipをダウンロードして、

f:id:wannabe-jellyfish:20170129122106p:plain

zipを展開すると、current-buildにある「GooglePlayGamesPlugin-x.x.x.unitypackage」をインポート。

※ AdMobやAppLovinなどを使っている場合、AndroidMainfestやsupport-lib.jarが競合しないように!!
※ 競合すると、メニューが表示されず、セットアップに進めない。。。

f:id:wannabe-jellyfish:20170129122343p:plain

Unityプラグインのセットアップ

メニューの「Window > Google Play Games > Setup > Android setup…」から設定。

f:id:wannabe-jellyfish:20170129123125p:plain

Developer Consoleで追加した、実績/リーダボードの画面からリソースを取得できるので、
それを貼り付けて、「Setup」ボタンを押せば、OK

GPGSを使う(Signin/Signout)

使い方は以下の感じ。

using UnityEngine;
using UnityEngine.UI;
using GooglePlayGames;
using GooglePlayGames.BasicApi;
using System;

public class GPGSManager : MonoBehaviour {

    public Text textBtnSign;

    // Use this for initialization
    void Start() {
        if(!IsLogined()) {
            // クライアントの設定
            PlayGamesClientConfiguration config = new PlayGamesClientConfiguration.Builder().Build();

            PlayGamesPlatform.InitializeInstance(config);
            PlayGamesPlatform.DebugLogEnabled = true;
            PlayGamesPlatform.Activate();
        }
    }

    // Sign-in
    public void SignIn(Action<bool> callback) {
        Social.localUser.Authenticate((bool success) => {
            callback(success);
        });
    }

    // Sign-out
    public void SingOut() {
        PlayGamesPlatform.Instance.SignOut();
    }

    // Login状態の確認
    public bool IsLogined() {
        return Social.localUser.authenticated;
    }
}

他の使い方も、GitHubのREADME.mdに詳しく書いてあるので、
迷うことは少ないかも。(英語だけど、英語だけど)

以上!!

参考にしたサイト様

Android/KotlinでRxAndroidを使うときに参考にしたサイト

[PR] Android+Kotlin+SpringBootのアプリをリリースました!

迷惑な路上駐車に困っていませんか?
そんなイライラを「路駐密告」ですっきり解消!
路上駐車を密告(情報を共有)するアプリ「路駐密告」

play.google.com

f:id:wannabe-jellyfish:20161002194416p:plain f:id:wannabe-jellyfish:20161002221328p:plain

「路駐密告」を作っていたときに、RxAndoridを初導入!

その際に参考にしたリンク集。まとめはまたいつか。。

参考にしたサイト様