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になります。便利だ……。 反省 「不便だな」と思ったことを手数で誤魔化してそのままにしないこと。

上手くいかないCSSをdev toolでぐりぐり動かしていたらdisplay: contents;なる値があることを知って、結局そのパターンは上手くいったんですがなんで上手くいったかわからないのでちょっとだけ調べました。 (本格的に調べるのは後日) display: contents;とは colissで紹介されていました。 (先日参加した勉強会で紹介されていたサイトなのでちょっとテンションが上が理ました) すごくざっくり言うと、 タグ内のコンテンツを通常通り描画しつつ、周囲のタグは完全に省略する display: contents; が指定されたタグ自体が無視されたような挙動になる CSS Gridのレイアウトで、複数あるカードのそれぞれの高さや幅を揃えるのに便利 (今回上手くいった修正はこのパターンだった) まだ全然追いきてれないですが、タグを無視したような挙動をする以上落とし穴(何かの拍子にめちゃくちゃ表示崩れる)とかもありそうなので、見れる時にもう少しちゃんと挙動を見たい……。 ちなみにCan I Useで見てみると、大体2018年くらいからパーシャルサポートが始まり、現在(2022/06)主要なブラウザはほとんどがフルサポートです。 IE君はNot Supportedですが先日卒業式をしたので…… 参考 [CSS]「display: contents;」がすごい便利！ラッパーを使った実装が大きく変わるこれからのテクニック Can I use display: contents

タイトルの通り 3月頃に思い立って申し込みをして、1ヶ月前後の勉強で受かりました。嬉しいことに午前午後どちらも9割近く取った上での合格でした。 全体的には、学生時代に学んだことを思い出すのに役立ったなぁと言う印象でした。 学生の頃に「ITパスポート取るか。言っても専攻だし(情報工学科だった)いけるでしょ！」と全く勉強をせずに行って落ちた経験があり、国家試験系からは長年目を背け続けていたので、受けるにあたってちょっと驚いたことがいくつかあったので書いておきます。 早起きを証明できる試験ではなくなっていた よく基本情報についてTwitterなどで「朝早く起きて会場に行ける社会性を証明できる試験」なんて揶揄されているのを目にしていましたが、CBT方式になって時間は選び放題、なんなら午前と午後を別日に受けてもいいと言う緩さになっていました。 正直、今回基本情報を実際に受ける気になったのも、このCBT方式で受けられると言うのを知ったから、と言うところが大きかったです。 直近の過去問が参照できない 基本情報と言えば引くほど過去問が見れるイメージがあったんですが、CBT方式になってからの過去問は公開されていないみたいです。 今はまだCBT方式になってから日が浅い＆シラバスの大幅な改訂も入っていないので、公開されている過去問を一通り解いても十分勉強になります。ただ、これからどんどん過去問と実際の問題との乖離が進んでいくんじゃないかなーと思います。 (そもそもCBT方式にしてから合格者の割合がグッと増えてるらしいので、そう言う意味ではちょうど良いところに落ち着くのかも？) 応用情報はまだ紙試験 この勢いで応用情報も受けようかな〜と思ったんですが、応用情報の方はまだ筆記らしくて悩んでます。 朝起きれないし、一日に午前午後で集中力続く気がしないので……(社会適応力皆無)。

環境 PC: macbook Air (M1) OS: Big Sur 11.6.1 起きた問題 ある日、docker desktop for macのアイコンからPreferencesを押してもDockerの画面が立ち上がらなくなりました(アイコンが2,3回跳ねて落ちる)。 同様にDownload updateも立ち上がらないのでおや？と思い、一度PCを再起動したらFatal Error Failed to ping backend APIというエラーウィンドウが出てdocker自体が立ち上がらなくなりました。 Reset Docker to factory defaults, Diagnose & Feedback, Exitの選択肢はありますが押せない（カーソルぐるぐる）状態になっていて、リセットもさせてくれません。 どうやら似た状況になっている方も結構いるようで、既知のバグ？のようです。(docker for macのissue)。こちらでも未だに議論されていて、完璧な解決策はまだ出ていないように見えます。 色々参考にさせてもらいつつとりあえず復旧はさせたので、手順を残しておこうと思います。 復帰方法 docker関連のプロセスをkillする コマンドで消すか、アクティビティモニタでdockerを調べて出てきたものを終了させます。 # コマンドの場合 $killall Docker アンインストール アプリケーションフォルダからゴミ箱にどん。今思えばもうちょっとスマートなやりようがあった気がします。 新しいのをインストールする 公式サイトから最新版をダウンロード＆インストール。 フルアクセスを許可 上記でインストールしたものが上手く立ち上がればここはスキップしてもいいと思います（起動時にアクセス権限の変更をdocker側から提案してくれる筈なので）。 システム環境設定>セキュリティとプライバシー>フルディスクアクセスからdockerにフルアクセスを許可します。 （追記） しばらく触っていなかった別のmacbookを見てみたらdockerにそんな権限は渡していなかった（でも上手く動いている）ので、ここに関してはちょっと不確かかも知れません。 docker再起動 うまく動きました。