Tech

TypeScriptを使っていると、「ちゃんとprivateとかreadonlyとか使って制約かけないとな〜」と認識し直すタイミングが定期的に来るんですが、 そんな折にJavaScript側で実現できるプライベートクラス機能なるものがあることを知りました。 プライベートクラス機能 - JavaScript | MDN クラスのフィールドの先頭にハッシュ(#)をつけることで、プライベートなインスタンスフィールドを生成することができます。 あくまでコンパイル時にエラーの判定を行うTypeScriptと異なり、JavaScript自身の機能なのでランタイム時に判定＆エラーを返してくれます。 継承を使う場合は、privateと同じく子クラスからは参照不可になりますが、 子クラス側で同じ名前のプライベートインスタンスフィールドを定義することはできます。 存在を知ってパッと概要を追って、良さそうと思ったけど世の反応（？）はどんな感じなんでしょうか。 （ちなみに、インスタンス生成時に少し遅くなるらしい、と言う旨の去年の記事はお見かけしました: JavaScriptでプライベートを使うと遅くなる話）

SSO、使う側としてはよく見かけますが実装する側としてはあんまりキャッチアップしてこなかったなと思ったので、軽く調べたのをまとめておきます。 SSOとは シングルサインオン（Single Sign-On、SSO）は、ユーザが1回の認証で複数のアプリケーションにアクセスできるようにする仕組み全般のことを指します。 大きく分けるとSAML（Security Assertion Markup Lnaguage）、OIDC（OpenID Connect）の2つの一般的なプロトコルがあります。（※諸説ある） SAML SAMLアサーション（ユーザ情報とアクセスできる内容を含む暗号化署名されたXMLドキュメント）を使用してサービス間でID情報を共有します。 ビジネス系（Slack, Office365, Salesforce）などでよく見られる（らしい）です。 OpenID Connect JWT(JSON Web Token)を使用してサービス間でID情報を共有します。 よくお世話になる「GoogleアカウントでYoutubeにログインしている」系はOpenID Connectで実現されています。 代表的な実現方式 （【図解つき】シングルサインオン（SSO）とは？機能や仕組み、導入メリット、デメリットをわかりやすく解説！ | mobiconnect（モビコネクト）を多大に参考にしています、ありがとうございます） 代行認証方式 利用者の代わりにエージェントが認証情報を保持し、ログイン画面を検知したら代行して各システムのID、パスワードを入力する方式です。 （個人的にはこれをSSOと呼んでも良いのか、という気持ちは多少あるけど、パスワード自動生成などで認証情報を意識しないので実質SSO、と言うことなのかもしれない） システム側でSSOに対応していなくても、ID/パスワードでログインする一般的なシステムであれば使用することができ、活用範囲が広いです。 その代わり、利用者側のPC（もしくはWebブラウザ）に常駐するエージェントを必ず入れる必要があります。 リバースプロキシ方式 Web上で実現するSSOの仕組みとして、アクセスを全てリバースプロキシと呼ばれる中継サーバを介して行うようにネットワークを設計する方式です。 リバースプロキシに対して認証を行うと、認証済みのCookieが発行され、各サイトにアクセスできるようになります。 対象としたいシステムに何か導入する必要がないため、既存システムへの影響がほぼない状態で事前検証ができます。が、リバースプロキシがボトルネックになる可能性があります。 実装する場合はざっくり以下のような構成になります: Nginx等を使用して、アプリケーションへのリバースプロキシをセットアップ SSOプロバイダの設定（色々あるので最適なものを選ぶ） アプリケーション側の認証ビュー（API）の実装 エージェント方式 リバースプロキシ方式同様、Web上で実現するSSOの仕組みで、Webサーバやアプリケーションサーバにエージェントソフトウェアを組み込む方式です。 組み込んだモジュールがSSOサーバと連携することでSSOを実現します。 リバースプロキシと異なり、ボトルネックが発生しづらい、既存のネットワーク環境に変更を加えなくて良い点がメリットです。 SAML認証方式 SAML認証方式は、IdP（Identity Provider）とSP（Service Provider）の2つの要素で構成され、SP側（Webサーバやアプリケーション側）をSAMLに対応させることで、IdPが提供する認証情報を利用してSSOを実現できます。 （名前がすごくややこしいけど、別に他の方式がSAMLプロトコルを使わないと言うわけではなくて、この方式の説明の意図は「上二つの方式と異なりWeb上で完結せず、アプリケーション側でSAMLに対応するSSO方式」ってことだと思います） まとめ 認証まわりって難しいですね。 （見ている途中でソーシャル認証やOAuth2あたりの情報も出てきましたがちょっとパンクしてきたのでここで止めておきます） 参考 シングルサインオンとは｜「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典 【図解つき】シングルサインオン（SSO）とは？機能や仕組み、導入メリット、デメリットをわかりやすく解説！ | mobiconnect（モビコネクト） What Is Single Sign-on (SSO)? How It Works - YouTube 後で見たい Django SSO - YouTube

最近個人でFlutterを触っていて楽しいので色々調べていて、その時知ったことや勉強会で聞かせてもらった話などのまとめ。 （「こんな便利なものあるんだ〜」と思っても一回ブラウザのタブを開いちゃうと忘れがちなので、自分用のリンク集として） Material Design3 https://m3.material.io/ Material 3 is the latest version of Google’s open-source design system. Design and build beautiful, usable products with Material 3. (拙訳) Material 3 は、Google のオープンソース デザイン システムの最新バージョンです。 Material 3 を使用して、美しく使いやすい製品を設計および構築します。 Googleのデザイナーと開発者によって構築・サポートされている、オープンソースなデザインシステム。 Android, Flutter, そしてWeb向けのUXガイダンス・UIコンポーネントの実装が含まれている。 PrimaryColorを選択するだけでいい感じに各色設定してくれたりするので便利。 （絶対それ以外の便利な使い方もある） // ThemeDataで指定する ThemeData( useMaterial3: true, colorSchemeSeed: Colors.XXX, // 好きな色 ) これだけでデフォルトの「テストです！！！」と言わんばかりの真っ青なヘッダが変わるのでちょっと「おぉ……」ってなる。 DartPad https://dartpad.dev/ Dartの構文を気軽に試せる。便利。 ちなみに、新しいバージョンを試したいときは下のstable channelを押して切り替える。 Serverpod https://serverpod.dev/ reverpodならぬServerPod。 Flutterコミュニティ向けに、Dartで書かれたOSSのアプリサーバ。 isar https://isar.dev/ hiveのv2系としてのプロジェクトらしい？ Flutterで使うデータベース。詳しくはこれから調べる。

pythonでHTTP通信するときに大体使うrequestsで、timeoutエラーの種類で問題の切り分けがしたくて調べたのでちょっとまとめ。 TL;DR 公式ドキュメントのExceptionsを見るとわかりやすい。 中でもタイムアウト関連のエラーは以下の二つ: connect timeout requests.exceptions.ConnectTimeout例外が投げられる。 相手のサーバと接続を確立する時に時間がかかりすぎたtimeout。 公式ドキュメント read timeout requests.exceptions.ReadTimeout例外が投げられる。 相手のサーバからレスポンスが返ってくるまでに時間がかかりすぎたtimeout。 公式ドキュメント 両方まとめてcatchしたい時は requests.exceptions.Timeout例外が設定されていて、ConnectTimeout, ReadTimeoutどちらも含まれます。 もうちょっと詳しく そもそもRequestsの例外の中には、RequestException（曖昧な例外）やConnectionErrorが設定されていて、明らかに設定がおかしい場合や早期に接続エラーが起きた場合には、レスポンスを待つ前にこの例外が投げられます。 それらが起きずにtimeoutエラーが起きた場合は、接続の確立で相手からレスポンスが返ってこない(ConnectTimeout)か、接続確率はできてるけど接続先がデータの準備などで時間がかかりすぎて設定したtimeout時間内にレスポンスが返ってこない(Readtimeout)かの二択。 なので、ConnectTimeoutが起きた時には安全に再試行できると公式ドキュメントにも書かれてます（少なくともリクエスト時の設定に問題がある訳じゃないから）。 Timeout例外が出た時にする事は下記の感じになると思います: ConnectTimeoutが出た場合は、リクエストを投げてる相手のサーバがダウンしてないか、ネットワーク設定に問題がないかを確認する。 ReadTimeoutが出た場合は、接続の確立には成功していて、向こうのレスポンスに時間がかかっているので、リクエストするサーバ側にも責任がある場合はチューニングする。そうでない場合は一度timeout時間を伸ばして成功するか様子を見る。 デフォルトのtimeout時間は設定されていないので注意する 明示的に設定しない限り、timeoutのデフォルトはNoneです。つまりtimeoutしません。 基本的にはtimeoutを設定して、上記のtimeoutエラーで原因がわかるようにした方が良さそうです。 import requests try: # connect timeout, read timeoutどちらも同じ値で良い場合 res = requests.get('有効なURL', timeout=30) # connect timeout=30, read timeout=60とかで分けたい場合 res = requests.get('有効なURL', timeout=(30, 60)) except requests.exceptions.ConnectTimeout: print("接続確立のエラー") except requests.exceptions.ReadTimeout: print("レスポンスが遅すぎたエラー")

個人開発でアプリ出したいなぁと思っていて（今はFlutterくんと仲良くなるためにチュートリアルやってるだけですが）、毎日少しずつでもコーディングするモチベーションが欲しい……！と思ってwakatimeを導入しました。 wakatimeは、VSCodeなどのエディタと連携して、実際にコーディングしている時間を計測してくれるサービスです。 ちょうど最近登録したLAPRAS(GithubやTwitterなどからクローリングした情報をまとめてポートフォリオにしてくれるサービス)のbeta版機能として連携できるようになっていて知りました。 個人で使っているPCのVSCodeにだけ導入しておけば、完全に個人でコーディングしている時間を集計できるのが良さげです。 インストール&セットアップ サイトからgithubでサインアップ settingsにあるSecret API Keyをコピーしておく VSCodeの拡張機能でwakatimeをインストール インストールが終わるとAPIKeyの入力を求められるのでペースト これだけです。ダッシュボードは割とリアルタイムに反映されるので、少しコードを触って見に行くと集計されてます。 どのリポジトリを触ったか、どの言語を触ったか、更にはデバッグしていた時間なども記録されてました。 profileに反映されるのは少し時間がかかりますが、少しすると表示され始めます: （githubのProfileにバッジも置いてみた） 結論: 良さそう 最初は「ブログでもzennの記事書くときでも結構だらだらmdファイル触るし、触った言語比率とかそういうのpublicになるとちょっと恥ずかしいな〜」みたいな謎のプライド(？)で導入を悩んでいたんですが、公表するデータは制御できるし、最初から気軽な気持ちで導入しておけばよかったなと思いました。 サイト内でコーディング時間のゴールも設定できる&profileの草形式で自分の頑張りが見られるので、モチベーションアップに繋がりそうです。 (個人で触るコードのみの環境なのでサクッと導入しましたが、仕事上の守秘義務のあるコードを触る環境なんかに入れる時はセキュリティ的にちゃんと色々調べないといけないと思います。)

最近読んだGoF本を記事としてまとめたくて、このサイト内でmermaidを記述したかったので組み込みました。その時の備忘録です。 ※「エラーを出さずに動くようにする」をメインに進めていったので、「こっちの方がいい」「これやらない方がいい」等もあるかもです。適宜読み替えて実施してください。 手順 mermaidのUNPKGから、mermaild.min.jsとmermaild.min.js.mapをダウンロードする static/jsあたりに取得した2つのファイルを置く 適宜リネームしてください。私はVersion情報を入れてmermaild.min.9.2.jsにしました layouts/shortcodes/mermaid.htmlを作成する。 <script src="{{"js/mermaid.min.9.2.js" | relURL}}" defer></script> <div class="mermaid" align="{{ if .Get "align" }}{{ .Get "align" }}{{ else }}center{{ end }}"> {{ safeHTML .Inner }} </div> (ローカルで確認するときは)ビルド＆devサーバ立ち上げ 記事内に{{<mermaid>}} mermaidの記述 {{< /mermaid >}}と記述することで、図として表示されるようになります。 結果 これは試しに入れてみた公式ドキュメントの例: (ダークモードだとちょっと見づらいかも) sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts prevail! John-->>Alice: Great! John->>Bob: How about you?...

前置き 今更何を言っているんだ感が凄まじいんですが、最近「ここ見たらわかりやすいですよ」とファイルのURL（できればgithub上の）を投げたい事があって、VScodeでファイル探す→githubのURLに直して渡すの流れが億劫だった（絶対VSCode上で出来るだろうにその時テンパってて見つけられなかった）のを真面目に探したら数分で発見したので備忘録として書いておきます。 結論 拡張機能：GitLensのコマンドで出来ます。 GitLens: Open File on Remote # ブラウザで開く GitLens: Copy Remote File Url # URLコピーする(便利) コマンドを実行する前に範囲選択しておくと、その行が選択された状態のURLになります。便利だ……。 反省 「不便だな」と思ったことを手数で誤魔化してそのままにしないこと。

...

...

...