イントロ最近、これまで作ってきたアプリをまとめたポートフォリオサイト(seto-lab.com)を作って公開しました！ サイトのトップ画面はこんな感じなのですが、他のサイトと違いを出したいと思い、流行っているグリッチエフェクトに挑戦してみました。 そして結果がこちらになります。 サイバーパンクみが増し、よい感じです。 今回はこのグリッチエフェクトのつけ方について解説したいと思います。 解説なんていいから、ソース見せろという方はgithubに格納していますので クローンし
イントロ今回はOAuthとOpen ID Connectの違いについて説明したいと思います。 このネタについて調べている人の多くが、自分が作っているアプリケーションに、以下のようなプラットフォームに認証してもらうログイン機能つけたいと思っている人だと思います。 ただ調べてみたはいいけど、OAuthを使えば良いのか？Open ID Connectを使えば良いのか？よく分からないという人もいるかと思います。そういった方向けに今回、説明したいと思います。 結論まず結論から、「O
イントロOAuth2.0で説明でモヤっとする部分をスッキリ解説する記事を何本か書いています。今回が３回目です。過去記事は以下からどうぞ １回目：OAuth2.0登場人物(オブジェクト)解説 ２回目：処理フロー解説 ３回目は、２回目で説明した処理フローのクライアント部分の実装について解説したいと思います。今回、Node.js(Express)を使ってクライアントを実装しました。認可サーバーはGoogle Cloud、リソースサーバーはGoogle Photoです。 実装したプ
以下の記事でOAuthの実装を解説しています。本記事はその環境の構築方法を解説します。 インストールツール以下のツールをインストールしておきましょう。 (1)vscode (2)Node.js バージョンはそれぞれ最新版で大丈夫です。 セットアップGoogle Cloud API これもいずれまとめたいですが、今回は以下の記事を参照して下さい。 Google Cloudへは以下からアクセスしてください。 今回の検証で利用する固有の値は以下の「認証済みのリダイレクト
イントロOAuth2.0に関して、巷のネットの記事や書籍の説明を読んでいて、私がモヤっとした部分を私なりの解釈で説明したいと思います。今回はその２回目です。１回目はOAuth2.0の登場人物について説明しました。今回はついにOAuth2.0の処理の流れをシーケンス図を使って説明したいと思います。 以降の説明ではOAuth2.0のことをOAuthと省略して記載しますがOAuth1.0のことではないのでご容赦ください。 シーケンス図シーケンス図は以下のようになります。矢印の根
イントロOAuth2.0に関して、巷のネットの記事や書籍の説明を読んでいて、私がモヤっとした部分を私なりの解釈で説明したいと思います。断言的な言い方なので、「別のパターンだってある！」という指摘もあると思いますが、ご容赦ください。以降の説明ではOAuth2.0のことをOAuthと省略して記載しますがOAuth1.0のことではないのでご容赦ください。 何本になるかわかりませんが、数本に分けて説明したいと思います。また、最終的にGoogleとNode.jsで実装したOAuth2.
概要 Next.jsでログイン機能を作る時、一から自作する人は少ないでしょう。そして、よっぽどの自信がない限りセキュリティの観点でやめておいた方が良いです。 2024年10月時点ではAuth.js(NextAuth.js)というパッケージを使って実装することが多いです。 Next.jsでは、セッション情報(ユーザー情報やAPIのアクセストークン)の保存の方法は２通り提供されています(下記リンク参照)。 1つ目はJWTという形式でクッキーに保存する方法(クライアント側)、
WEBエンジニアになって９年目になりますが、これまで読んで、ためになった技術書を紹介します。 1.Webサーバを作りながら学ぶ 基礎からのWebアプリケーション開発入門 WEBを理解するのが難しいのは、それが概念だからだと思います。WEBだけを説明しようとすると抽象的になりがちです。そのため、どれか一つのプログラミング言語を選んでWEBをプログラムとして記述する必要がありますが、この本はJavaを使ってそれを説明しています。 最初はテキストファイルの送受信という最も単純な
皆さんご存じだと思いますが、江崎グリコが大変なことになっています。 別の記事では以下のような内容が書かれてあります。 実際にこのような状況だったかどうかは分かりません。私は本件の関係者でも、SAPの専門家でもありませんが、IT業界に身をおくものとして、この記事からグリコで何が起こっているかを妄想してみようと思います。 同じデータなのに部門ごとに異なるID 同じデータなのに部署ごとに異なるIDが振られていたことが想像できます。具体的に説明すると、同じプリンという商品でも
イントロ 今回は過去に作ったWEBアプリの紹介します。 それがこちら サステナブルタピオカ！！！ 二次元の物理エンジンと加速度センサーを使って、タピオカを再現しています。 いいからソースを見せろという方は以下のgithubからクローンしてください。 https://github.com/setogawamasao/matter-js-spike.git なぜこんなものを作ったのか？少し話は変わりますが、「Chim↑Pom」という芸術家集団をご存じでしょうか？ Chi
イントロ今回は私が一番最初に作ったWEBアプリについて紹介したいと思います。 それがこちら せとがわまさおマッチングアプリ！！ つまり、私とのマッチング率が分かるアプリです！ と偉そうに言ったものの、ただの検定アプリです。設問に答えていくと、回答に点数が振られていて、最終的にその合計がマッチング率として表示されるという単純なアプリです。 少し工夫した点として、他のユーザーがどの選択肢を選んだかグラフに表示される機能があります。 なぜこんなものを作ったのか？最初は「検定
イントロ 去年もiOSでARアプリを作りましたが、今年も作っていきたいと思います。 去年は完成してから、記事を書いたので量が多く大変でした。 今年は作りながら、記事にしていきたいと思います。 今回はどんなアプリを作るかについて説明したいと思います。 どんなアプリを作るか？イメージはこちら 基本はスマホのカメラを使ったARアプリを作っていきたいと思います。 動きとしては、 ①両手で指をL字にしたことを検知して、画面上に四角形を出す ②四角形の中に体が入っていたら、体にレン
ネオンってかっこいいですよね。私はサイバーパンクものが大好きなんですけど、作中の街の風景で必ず出てくるのがネオンサイン。今回、このネオンサインをARで再現したい思います。 それでは、ARKitでネオンサインのようなオブジェクトを作る方法を解説したいと思います。シェーダーフレームワークMetalを使わずに標準APIのみで作れます。出来栄えは以下の通りです。
2022年4月19日に個人で開発したアプリをローンチしました。 その経験をドキュメントとして残しておこうと思います。 今回はpart5で、申請がregectされてから、その対応についてまとめたいと思います。 reject理由が3つあったのですが、最初の２つは前回のpart4で解説しまし た。 part5から３つ目を解説しております、今回はその続きで最終回です！ アプリの概要は以下の動画を参照
2022年4月19日に個人で開発したアプリをローンチしました。 その経験をドキュメントとして残しておこうと思います。 今回はpart5で、申請がregectされてから、その対応についてまとめたいと思います。 アプリの概要は以下の動画を参照 reject理由が3つあったのですが、最初の２つは前回のpart4で解説しました。今回は最後の３つ目に対して解説したいと思います。 3つ目のreject理由 まず、Appleレビューチームから来たメッセージがこちらです。 要約すると
2022年4月19日に個人で開発したアプリをローンチしました。 その経験をドキュメントとして残しておこうと思います。 今回はpart4で、申請がregectされてから、その対応についてまとめたいと思います。 アプリの概要は以下の動画を参照 reject理由は3つ来ました。それぞれについて個々に解説したいと思います。 reject理由1 送られて来た文面がこちらです。日本語訳は私が補足しています。 要約するとiPadでアプリ開くとクラッシュするから、原因調べて直して再提出
