2021/12/05・Androidアプリ
ハマった。
FlutterのFirebase AuthenticationでTwitterログインを実装中、何度やっても下のようなエラーが出てログインできなかった。
The supplied auth credential is malformed or has expired. [ Failed to fetch resource from https://api.twitter.com/1.1/account/verify_credentials.json?include_email=true, http status: 401, http response: {"errors":[{"code":32,"message":"Could not authenticate you."}]} ]
これを解決するため、利用しているOAuthライブラリのバグかと思い、OAuthの仕組みから全部勉強してゼロから実装してみました が、直らず。
さらにAPIキーとシークレットの再生成も試したが、ダメ。
初歩的な問題だった。
初めてエラーが出て __2週間後__、ふと思いつきました。
「あれ、Firebase Consoleで設定したAPIキー、更新してなくね」
ここでOAuthの仕組みの勉強が役に立ったわけですが、サインイン時にアクセストークンとシークレットを渡してsignInWithCredentialを呼ぶと、Twitterのverify_token APIが呼ばれている様子です。
なんとここには、アクセストークン・アクセストークンシークレットだけでなく、APIキー・APIシークレット もAPIを叩くのに必要でした。
つまり、TwitterLoginに渡すAPIキー・APIシークレットと同じものをFirebase Consoleに設定しないと、この段階でAPIキー・APIシークレットが間違っているためログインに失敗します。 つまり、クライアントとFBサーバーの2箇所で持たせる必要があります。
誰かのお役に立てば幸いです。
おまけ
ここからはOAuthの勉強で知った、Twitterログインの裏で何が行われているのかを説明してみます。
1. リクエストを作成する
まずはOAuthのリクエストトークンを取得するリクエスト内容を作成します。具体的には、HTTPメソッド、APIのエンドポイント(簡単に言えばクエリーパラメータを除いたURL)、クエリーパラメータを全部くっつけて1つの文字列にしたものです。
APIエンドポイントは「https://api.twitter.com/oauth/request_token」です。
必要なのは6つ。
①コールバックURI。サインイン後、どこに戻ってくるかのURL。
②APIキー
③ナンス(ランダムな文字列。生成方法は任意)
④署名方法「HMAC-SHA1」
⑤タイムスタンプ (現在時刻)
⑥OAuthバージョン「1.0」
クエリーパラメータはそれぞれの値をパーセントエンコードし、以下の例のように結合します。
oauth_callback=submon%3A%2F%2F&oauth_consumer_key={API_KEY}&oauth_nonce=abcdefg123456&oauth_signature_method=HMAC-SHA1&oauth_timestamp=1638708010&oauth_version=1.0
※{API_KEY}の部分はAPIキー
次に、APIのエンドポイントとクエリーパラメータをそれぞれURLエンコード(パーセントエンコード)します。そして、それらを「&」を挟んでくっつけます。以下が例になります。これを①とします。
POST&https%3A%2F%2Fapi.twitter.com%2Foauth%2Frequest_token&oauth_callback%3Dsubmon%253A%252F%252F%26oauth_consumer_key%3D%7BCONSUMER_KEY%7D%26oauth_nonce%3Dabcdefg123456%26oauth_signature_method%3DHMAC-SHA1%26oauth_timestamp%3D1638708010%26oauth_version%3D1.0
次に、APIシークレットとアクセストークンシークレットを「&」で結合した文字列を作成します。この段階でアクセストークンシークレットは存在しないため、空にします。以下が例になります。これを②とします。
{API_SECRET}&
※{API_SECRET}の部分はAPIシークレット。
2. 署名を作成する
②を鍵として、①をHMAC-SHA1でハッシュ化し、これをBase64エンコードします。これを③とします。
これはリクエスト内容が途中で改竄されていないかチェックする役割を果たしています。ハッシュ化されたものは基本的に復元できませんので、推測ですがTwitter側のAPIで同じ方法でハッシュを作り、一致するかチェックしていると思われます。
3. APIを叩いてリクエストトークンを取得
ようやくHTTPリクエストを作成します。先ほどのクエリーパラメータに oauth_signature=③ を追加してAPIを叩きます。
すると、ログイン画面用のトークン(④)とシークレットが返ってきます。
4. ユーザーをログイン画面に移動させる
次に、ユーザーを以下のURLにアクセスさせます。
https://api.twitter.com/oauth/authorize?oauth_token=④
すると、先程のトークンとベリファイア(?)(⑤)が返ってきます。
5. アクセストークンを取得する
最後に、アクセストークンを取得します。https://api.twitter.com/oauth/access_tokenに向かってoauth_consumer_key(APIキー)とoauth_token(④)とoauth_verifier(⑤)をぶつければアクセストークンとシークレットが返ってきます。これを使ってTwitterのユーザー情報にようやくアクセスできます。長かった。
以上となります。
2021/11/22・Androidアプリ
ハマった。
Firebase ConsoleにてSHA256を登録しても、Dynamic LinkがAndroidアプリ(Flutter)で認証済みリンクとして認識されない現象が発生。Android 12では手動で追加すれば開いてくれますが、普通のユーザーはそんなことしません。
対処法
単純にintent-filterにautoVerify属性を追加する必要があったらしい。これがなんと、firebase_dynamic_linksのREADME.mdには書いてない(記事作成時点)。なんでや
<intent-filter android:autoVerify="true">
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="https" android:host="example.page.link" />
</intent-filter>
解決に導いたページ
https://developer.android.com/training/app-links/verify-site-associations
2021/11/12・動画ウラ話
/i/https://www.youtube.com/embed/wj_Dz4OE_eM
裏話
少し血迷って適当な動画を上げてしまいました。動画構成的にも。
ゲームはやる側よりも作る側のほうが強いの!
ふくらP
作る側に回ったときの景色ほど面白いものはない。このままリリースすればバッシング待ったなしなトンデモゲームも作れる。飽きたらかんたんに組み替えられる。これが作る側のメリット。さぁみなさんもUnityを使ってみましょう
実は、今Unreal Engineを使って音ゲーを作ろうかなと思っています。まだ構想段階で、重い腰がなかなか上がっていないのが現状ですが、開発を始めたらまた報告します。とか言っといて永遠にやらなさそう
2021/10/24・お知らせ
皆さん、こんにちは。
この度、本サイトのコメントシステムについて、大改修を行いましたので、本記事ではその説明を行いたいと思います。
経緯
まだ知識の乏しかった、サイト移行初期のコードがあまりにも汚く、バグを生む元にもなっていました。さらに、コメント関連に利用しているサービスである「Firebase」で、複数のプロジェクトを運用しているにも関わらず同一のプロジェクトでデータベース管理をしていたため、アカウントやコメントデータがごっちゃに なってしまい、管理が面倒になっていました。
さらにさらに、プロジェクト作成時にデータベースのリージョン設定を誤った結果、アメリカにデータベースサーバーを置くことになり、コメントの送信速度にも影響しました。
他には、reCAPTCHA(ボット対策)を導入してはいたものの、ほぼ意味を成さないような実装方法となっていました。(リプライに至っては全くreCAPTCHA介していなかったし)
何をしたか
まず、プロジェクトを分離させました。新規プロジェクトを作成し、データベースサーバーの所在地も東京に設定 しました。これで送信速度向上につながるはずです。
また、コメント周りの処理もすべて見直し、よりセキュリティの高い・バグを生みにくい実装方法に変更しました。
ついでに GoogleおよびTwitterでのログインにも対応させました。
利用者への影響
まず、全てのユーザー様はログアウトされます__。過去にコメントいただいたことがある方は、大変申し訳ありませんが、__利用者様の手で編集・削除することができなくなりました。 どうしても編集したい・削除してほしい場合は、TwitterのDMまでご連絡ください。
2021/10/13・お知らせ
皆さん、こんにちは。
この頃、適当な記事ばかり書いていたり、投稿に間が空いたりしていましたが、本格的に更新を再開していきます。
空白の2ヶ月間(?)
この期間何をしていたかというと、決して暇を持て余していたわけではなく、記事の編集環境を整えていました。
今年の6月頃にサイトの大幅なリニューアルをし、記事執筆環境・記事表示画面ともに抜本的にガラッと変わりました。以前のままの部分といったら移行した記事くらいしか無いほどです。
新環境で利用しているCMS(記事配信サービス)が「Contentful」というものなんですが、その編集ページがちょっと使いにくくて、
1から編集ページを作っていました。
1からバックとフロントを自作してました。
いや、探せば多分そういうのあるんだろうけど、どうせなら1から作ったほうが 全てが思い通り じゃん?
試行錯誤を重ねた結果、開発に3ヶ月ほど費やしました。
今後について
快適な編集環境が手に入ったので、まぁ思いついたことを気ままにやっていこうと思います。(今までと全く変わらない方針)
というわけで今後ともよろしくお願いします。何の報告だったんだ
2021/10/13・作ったモノ
皆さん、こんにちは!
今回は、原神の素材収集が楽になるツール、「原神素材ヘルパー」 を作ったのでご紹介します。
とりあえず使ってみたい方はこちら
何ができるの?
原神素材ヘルパーは所謂 素材データベース です。キャラクターや武器に使用する素材、調度品セットの要素となっている調度品の一覧も確認できます。
もちろんそれだけではありません。
素材計算
それぞれの突破Lvで必要な素材だけでなく、複数段階を突破する際の合計数量の計算も可能です。スライダーを動かして範囲を設定できます。
収集素材のメモ & 周回回数の表示
素材の右にあるブックマークボタンをクリック/タップすると、その素材と使用先が保存され、「収集中の素材」画面から一覧で確認できます。
さらに、秘境やフィールドボスなど周回が必要な素材については周回回数の目安を表示することも可能です。
使用する素材、使用されるキャラや武器、自由自在
本Webアプリ内のほとんどのキャラ・武器・素材アイコンはクリックできるようになっており、クリックすることで直接詳細ページに飛ぶことができます。まるでWikipediaのように。
また、地域特産素材に関しては、その素材とワープポイントだけを表示するテイワットマップへのリンクも表示しています。
調度品セットはもはや暗記ゲーではない
調度品セットに含まれる調度品の一覧と、入手先が確認できます。一部の人にはありがたい機能でしょうか(というかギフトセットについては原石が結構貰えるのでやったほうが良い)。
また、製作済みの調度品にはチェックを付けて記録できます。今後のアップデートで製作数も記録できるようにする予定。
日替わり素材の表も
日替わり素材の表ももちろんあります。ページを見た日にどの素材が獲得できるか、背景色で一目瞭然。先程言ったように、アイコンをクリックすれば素材の詳細ページに飛び、どのキャラで使えるか分かります。天賦素材については、今後のアップデートでページを移動しなくても小さめのキャラアイコンで確認できるようにする予定。まだまだ改善が必要。
流れるようにページ移動
このサイトと同じNuxt.jsをフレームワークに採用しているため、ページ移動時にロードが入らず、高速にページを移動できます。かなり快適。
英語にも対応
一応英語にも対応しています。海外勢にも広めたいという魂胆でしたが、肝心の広め方がよくわかりません。
Google Playでも配信
Android端末向けにGoogle Playストアでも配信しています。実体はWeb版と全く変わりませんが、アドレスバーが表示されないなど多少使いやすくなっていると思います。
アプリが増えるのが嫌な場合はPWAをご利用ください。Chromeなどのブラウザーの下部に表示されるバナーから直接このページをインストールできます。
iOS版 (App Store) については現状公開予定はありませんが、審査が通るかどうか試す予定です。
開発の上でこだわった点
UIの配置
UI部品の配置やデザインにはかなり気を配っています。素材計算のスライダーとか、それぞれの素材の表示とか、使いやすさにはかなりこだわっています。
UIを使いやすくするには、とにかく自分で使ってみる、使いまくる。このメソッドでやっています。APEXとかいう、運営が自分のゲームをプレイしたことがないケースもあるみたいですけど
ダークテーマ
こだわったというよりも、デフォルトでダークテーマです。
目に優しく、一部端末では電池消費を抑えられるという都市伝説もあるダークテーマです。昼間はライトテーマの方が見やすいと思いますので、それも今後実装しようかなと。
スピード感
新キャラ・アイテムの追加や、提案いただいた改善点の実装はスピーディーに行っています。
この記事のコメント欄にも改善点を書いていただければ、返信対応いたします。
まとめ
というわけで、所々改善が必要とはいえ個人的にもかなり便利なものに仕上がったと思います。半月前にこのWebアプリについてHoYoLABに初投稿しましたが、その際には予想を大きく上回る反響があって驚きました。どう役に立つのかよくわからずに作り始めましたが、結果的に多くの人に受け入れられて嬉しい限りです。
それでは、少しでも興味を持ってくれたら、使ってみてね↓
:::btn
Webアプリはこちら
:::
2021/09/09・Androidアプリ
現状
手持ちのM1 MacBook ProをmacOS 12 Beta6にアップデートしたところ、Android Studioが全く起動しなくなりました。
少し調べてみたところ、どうやらIntelliJ IDEAが対応していないことが問題らしく、コンフィグをいじればまた起動するようになります。
手持ちのMacはM1ですが、Intelでも起こるようです。
対処法
.vmoptionsをいじります。
以下のファイルを開きます。
IntelliJ IDEAの場合
~/Library/Application Support/JetBrains/IntelliJIdea2020.3/idea.vmoptions
Android Studioの場合
~/Library/Application Support/Google/AndroidStudio2020.3/studio.vmoptions
このファイル内に以下の行を追加します。
-XX:+TieredCompilation
-XX:TieredStopAtLevel=1
これで保存すると起動できるようになるはずです。
参考
https://youtrack.jetbrains.com/issue/JBR-3715
2021/06/27・動画ウラ話
/i/https://www.youtube.com/embed/8BhBSYqywWA
ウラ話
丁度母親の実家に滞在している時にこの企画を思いついて、「まぁチャンネル自体の知名度も低いし、そんなのびないやろ」と軽い気持ちで作って、拡大編集とかもせずに投稿しました。
しかし事件は投稿から数週間後に起きた。
私は自分の動画にコメントが付くと通知が来るような設定にしてあったが、突然、この動画のコメントが沢山付いた。
「何かの偶然かな?」と思っていたが、しばらくしても通知は止まらない。慌ててTwitterで自分の動画のURLで検索にかけると、なんと QuizKnockの神(河村さん)が紹介してくださっていたのだ。
私の制作物が著名人のツイートによってバズるなんて初めてのことだったのでかなり焦ったし嬉しかった。一体どうやって私の動画を見つけてきたのか・・・
・・・というのがまぁ大まかな流れですね。河村さんも、たくさんコメントを頂いた視聴者の皆様にも感謝。
実は、拡大編集もして見やすくした版(リメイク・リベンジ)を作ろうと思ってたり思ってなかったり。
何でも作る側が強いの!
2021/06/27・お知らせ
この度、私が開発を進めておりました、「原神ダメージシミュレーター」について、開発の続行をしない 決断をいたしました。
決定理由
理由につきましては、他のダメージシミュレーターと比較した際に、突出した点が見出しづらいように感じたことと、ここまでの労力をかけて制作したとしても、それを汲み取れる、有効活用できる人はほんの少数でしかないことを感じ、この状態を完成版とする決断をしました。
今後について
今後についても、「原神ダメージシミュレーター」の公開は続行いたします。キャラクターの追加や仕様変更への追従、ライブラリの更新等も続行します。スクリーンショット解析機能についても提供を続行します。ただし、報告がない限り今後 __新機能の追加やバグ修正が行われることはありません__。武器、聖遺物セット、バフのタブが存在しますが、これらは削除されます。これらのバフを含めた計算ができるようになることはありません。
2021/06/07・どうでもいいこと
更新: iPhoneにおいて接続中の回線が楽天モバイルアプリでわかるようになりました。
皆さん、こんにちは。
楽天モバイル、使ってますか?私は0円に釣られて4月に契約しました。私は岐阜に住んでいますが、割と楽天電波は飛んでいます。ただ、建物に入ると完全にアウトですね。
楽天回線で通信すると通信無制限のため、できるだけ楽天回線で通信したいですよね?今回は、その方法をiPhoneとGalaxyで分けて解説します。
強制接続方法の簡単さは以下のとおりです。
Galaxy > iPhone >>> Galaxy以外のAndroid
現在楽天回線につながっているか確認する方法の簡単さは以下のとおりです。
Android(Galaxy含む) >> iPhone
iPhoneは、野良アプリが現在接続中のバンドを取得出来ないため、隠しコマンドで表示する必要があり、面倒です。(隠しコマンドを覚える必要がありますので、覚悟してください。)
更新: 楽天モバイルアプリで簡単に確認できるようになりました。
現在接続中の回線を確認する
Androidの場合
「LTE回線状況チェッカー」というアプリで簡単に確認できます。
もしくは、楽天モバイルアプリでも確認できます。
iPhoneの場合
楽天モバイルアプリから確認できます。
強制的に楽天回線に接続する
Galaxyの場合
通常表示されない設定画面へのショートカットを作成する形になります。
まず、「QuickShortcutMaker」というアプリをインストールしてください。
次に、ホーム画面の何もない部分を長押しして「ウィジェット」をタップします。その中から「QuickShortcutMaker」を探してホーム画面の任意の場所に追加します。
次に、表示された画面で「通話設定」で検索します。出てきたもののうち、小さい文字が 「com.samsung.android.app.telephonyui」 となっている方をタップします。
次に、その中から小さい文字に 「hiddennetworksetting」 (多分一番下にあります) が含まれるものをタップします。
ここで、「起動」をタップして下のような画面が立ち上がるか確認してください。
最後に、「作成」をタップしてショートカットを作成してください。これでショートカットが作成できました。
※受話器アイコンに「通話設定」という名前で分かりにくいですが、これはバンドを固定するアプリです。(通話設定の一部)
作成してしまえばこっちのもの、超カンタンです。まず、作成したショートカットを開き、ドロワーメニューから「Band Selection」を選択します。
次に、設定するバンドを選択します。Galaxyにおいては、 楽天回線はBand3、au回線はBand26もしくは18 となります。楽天回線に固定したい場合は、LTE B3を選択して、右上の「Selection」のスイッチを入れてください。
iPhoneの場合
設定 → モバイル通信 → ネットワーク選択 → 「自動」をオフ にします。
その後、下に「Rakuten」が2個表示されるはずです。1個しか表示されない場合、Rakuten回線もしくはパートナー回線の電波が弱いか、飛んでいません。
2個出てきた場合、上がRakuten回線、下がau回線となります。
※電波が強い方に優先的に繋がるようなので、気が付くと勝手にパートナー回線に戻っていることがあります。ご注意ください。
以上となります。