投稿

Nuxt.jsを短期間でFirebaseにデプロイしてCircleCIで自動デプロイをするところまでを設定するマニュアル

イメージ
楽をするのは良いことだ 環境 構築 Firebase Nuxt.js 楽をするのは良いことだ ということで、個人的に好きで使っているNuxt.jsをFirebaseにデプロイし、その後Githubにプッシュするたびに自動的にデプロイされるように設定するまでをこの記事では解説しておきます。 Firebase使ってみた こちらの記事を参考にさせていただきました。 環境 OSX Catalina npm version6.14.6 node.js v12.18.4 構築 Firebase まず Firebase にログインします。 Googleアカウントが必要となるので持っていない方は取得してください。 こちらのページにアクセスしたら使ってみるをクリックし、以下の個人のプロジェクトを管理するページに移ってください。 そしてプロジェクトを追加をクリックし、任意のプロジェクト名を設定し、プロジェクトを作成してください。 これでプロジェクトを作成できました! ひとまずターミナルを開き、以下のコマンドを使ってFirebase CLIをインストールしておきましょう。 $ npm install -g firebase-tools そしてついでにログインをしておきましょう。 $ firebase login 次はNuxtプロジェクトを作成し、Firebaseとつないでデプロイしてみましょう。 Nuxt.js mkdir firebase cd firebase vue init nuxt-community/starter-template sample こちらでfirebaseディレクトリ内にNuxtのテンプレートが作成されました。 そして次にfirebaseとつなぐ必要があるので以下のコマンドをターミナルで実行してください。 また、ここではHostingを選択してください。 $ firebase init MacBook-Pro sample % firebase init ######## #### ######## ######## ######## ### ###### ######## ## ## ##

社内システムを開発する際にAPIを使う、という選択肢を考える

イメージ
社内システムとAPI 社内でとある雑談をしている際に、社内システムを構築する際にAPIを設計、開発するとより簡単、かつ疎結合なシステムを作る時に便利になってくるのではないか、という前提を元にAPIについて勉強しなおしました。 どうせ勉強するならアウトプットして外に出すことで間違っていた際にご指摘を受けることも出来ますし、自身の勉強の証にもなるだろうということでサクサクっと書いていきます。 参考図書 Webを支える技術 Web API: The Good Parts 学習の順番 Webを支える技術 Web API: The Good Parts の順で勉強しました。 正確には Webを支える技術 は読んだことがあったので、基本的な歴史や仕様について学び直すために読んだ、と言ったほうが正しいかもしれません。 そもそもHTTPとかを理解できていないとAPIについて何を言っているのか分からない、というのはあると思うのでWebの仕組みを理解する基礎固めのためにも読むべきだと思います。 あと単純に面白いです。 Web API: The Good Parts はWeb APIをこれから設計、開発しようという人を対象とした本なので、APIについてのざっくりとした説明はあるものの、主軸はあくまでこういうAPI設計したら気持ち悪くね?こっちの方がよくね?とか、特定のユーザーにAPI叩かれすぎたら困るよね?じゃあこうしよう!などの開発者向けの内容がメインです。 こちらも面白かったです。 オライリーの本ですが、著者が日本の方ということもあり、分かりにくい表現も少なく、スラスラ読める、という印象なので困っている方に特におすすめです。 そもそもAPIって何よ? 一般的な定義 Application programming interface の略です。 よく言われるAPI、というのは大体の場合Web APIのことを指します。 なお、APIを使うことをITエンジニア界隈では「APIを叩く」、と言います。 これはAPIを使うことを英語で「hit api」というためで、それが和訳されて使われ続けて今に至るとか。 なお、Web APIとは、 Web API: The Good Parts にある通り、 Web APIとは「HTTPプロトコルを

ど素人がYouTube上のSwiftUIの動画を見ながら模写した話

イメージ
SwiftUIマスターに、俺はなる! という冗談は置いておいて。 なんか楽しそうなアニメーションとかやりたいよなぁ〜と思い、YouTubeで SwiftUI Animation で検索したら面白そうなのがあったので見様見真似で模写。 コードは ここ。 何ができるかというとこんな感じのボタンを押した時に以下のようなアニメーションを行うというもの。 すっごい立体的・・・ 特に技術的な記事ではないけど無料でこういうちょっとした遊びを学べるのはいい時代だなぁと思いました。 基本は公式のチュートリアルでさくっと学んであとは無料で真似て描いてこれっていうものを作ってみるという時代が来ているのかも。 これからも楽しく学んでいけるといいなと思いました! (小学生の感想文かな?)

SwiftのCoreDataってなんやねんって話

イメージ
忘れることが多いので 逐一メモしておく。 間違えている場合は親切な方が指摘してくれると思う。 で、コアデータってなんやねんという話。 調べてみたら、 Apple系の製品(WatchOSとかMacOSも含む)アプリ開発ではデバイス単体でオフラインでもアプリのデータを使えるようにしたり、一時的なデータをキャッシュしたりとかするためにコアデータフレームワークなる仕組みでデータを管理してるんだそうな。 それらの特徴としては、 アプリケーションにおけるモデルレイヤにあたる部分 データを溜めて、取り出して、更新して、削除ができる オブジェクトグラフを管理できる 特別な実装をしなくてもUNDO/REDOができる 一時的なデータをキャッシュできる 大きな枠組としてはデータベースではない (一般的にはSQLiteを使う事が多いみたい) 特徴的にはこんな感じっぽい。 SQLiteってデータベースの枠組みに入るんちゃうんかい・・・と思ったけど、バイナリデータとかXMLファイルで管理することもあるらしく、くくりやすくするためにざっくりとまとめたらそうなったみたい。 あまり納得は言っていない。 オブジェクトグラフというのは例えば本があった時にそれに付随するその本の筆者やジャンルなどの付随情報をグラフ構造で管理している、みたいな形式のことらしい。 データベースを使うんだろうなぁと個人的には思っていたので個人的には衝撃。

djoserを使ったDjango REST Frameworkでのカスタムユーザーモデル認証機能の実装

イメージ
djoserとは 使い方 djoserとは djoser とはDjango REST Framework上での基本的なユーザー認証や登録などの認証周りをサポートしてくれるライブラリです。 カスタムモデルに対しても使え、Djangoのコードを再利用するような形をとるのではなく、Single Page Application(以下SPA)によりフィットするようなアーキテクチャを目指して作られています。 今回はdjoserの最もシンプルな認証機能の実装について書きます。 なお、この認証はセキュリティの面などから実際に使用するべきではなく、以下のJWT認証のようなより強固なセキュリティの設定があります。 あくまでお手軽な認証として紹介します。 ソースコードは こちら なお、以下の全てが導入後にエンドポイントとして使えます。 /users/ /users/me/ /users/confirm/ /users/resend_activation/ /users/set_password/ /users/reset_password/ /users/reset_password_confirm/ /users/set_username/ /users/reset_username/ /users/reset_username_confirm/ /token/login/ (Token Based Authentication) /token/logout/ (Token Based Authentication) /jwt/create/ (JSON Web Token Authentication) /jwt/refresh/ (JSON Web Token Authentication) /jwt/verify/ (JSON Web Token Authentication) Getting started djoser関連の記事を他にも書いています。 djoserを使ったDjango REST Frameworkでの認証機能の実装 djoserを使ったDjango REST FrameworkでのJWT認証機能の実装 なお、今回はJWT認証を用いたユーザー認証を実装することとします。 使い方 途中

Pythonで学ぶスタック

イメージ
スタック スタックについて Pythonでのスタック利用例 Pythonでの表記法と注意点 連結リストの要素を逆転させる 逆ポーランド記法の計算 ディレクトリ構造の短縮化 スタック について改めて使い道を模索してみたのでメモ。 スタックについて 底のある箱の中に積み木を積んでいくイメージ。 いわゆるLIFO(last in first out)、最後に入れたものを最初に取り出す、というデータ構造。 要素を取り出す時の操作を pop 、要素を入れる時の操作を push という。 スタックを連結リスト、もしくは配列で実装した場合のpop、pushの操作はO(1)の計算量となります。 Pythonでのスタック利用例 Pythonでの表記法と注意点 他の言語と同様に、Pythonでも Stack が組み込み関数として用意されています。 ここで注意すべきなのは上記で用意したPythonでリストを用いてスタックを表す場合には push ではなく、 append を使う点です。 スタックとして使う場合は以下のように要素の出し入れを行います。 >> > stack . append ( 6 ) >> > stack . append ( 7 ) >> > stack [ 3 , 4 , 5 , 6 , 7 ] >> > stack . pop ( ) 7 >> > stack [ 3 , 4 , 5 , 6 ] >> > stack . pop ( ) 6 >> > stack . pop ( ) 5 >> > stack [ 3 , 4 ] 他にもスタックには様々な使い道があります。 連結リストの要素を逆転させる def reverse_linked_list ( head ) : nodes = [ ] while head : nodes . append ( head . data ) head = head . next 逆ポーランド記法の計算

C++のstd::lower_bound()とPythonでの話。

イメージ
けんちょん本を読むと・・・ けんちょん本 ってAmazonで検索すると出るんですね。知らなかった。 本題に戻りますが、この本には二分探索法の章があります。 C++の話 その中でC++のライブラリである std::lower_bound() を使う際に得られる情報について記述があります。 std::lower_bound() の使用自体はソート済みの配列 a と key が存在するかという内容のライブラリです。 もう少し具体的に記述すると、 a[i] >= key という条件を満たす最小の添字 i を返す(この時の計算量は配列Nに対してO(logN))、というものなのですが、これは単に配列の中に存在するか否か、だけのライブラリではないという事みたいです。 例えば、 配列のなかに key が存在しない場合、与えた key 以上の値の範囲での最小値を取得 配列のなかに値 key が複数あった時、その内の最小の添字を取得 といったような使い方があるようで、これについて学んだ時、Pythonで似たようなライブラリは無いのかパッと思い浮かばなかったので、調べてみました。 Pythonの話 Pythonでは bisect が該当するようで、何度か使ったことはあったが詳しい仕様を思い出せなかったので、実際にドキュメントを読みながら使い方を見てみました。 import bisect a = [ 3 , 8 , 11 , 18 , 27 , 31 ] bisect . bisect_right ( a , 20 ) # 4 print ( bisect . bisect_right ( a , 11 ) ) # 3 print ( bisect . bisect_left ( a , 11 ) ) # 2 この配列に 18 を足してみましょう。すると bisect は以下のような振る舞いをします。 import bisect a = [ 3 , 8 , 11 , 18 , 18 , 27 , 31 ] bisect . bisect_right ( a , 18 ) # 5 bisect . bisect_left ( a , 18 ) # 3 lower_boundはbisect_left