サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
大谷翔平
oita.oika.me
唐突なAstro話。 Astroのv4からi18n(国際化)機能が標準利用できるようになりました。 docs.astro.build ただ、この場合に @astrojs/rss で言語別にフィードを配信しようと思ったらどうやるのかわからず苦戦したのでメモ。 簡単に、Astroの多言語化について 詳細は先のリンク先に書いているとおりだが、Astroで言語別にURLを分ける場合のやり方を簡単に。 Astroのconfig設定 astro.config.mjs の defineConfig() に下記を追加 i18n: { defaultLocale: 'ja', locales: ['ja', 'en', 'zh'], routing: { prefixDefaultLocale: true } } ここではデフォルト言語も他の言語と同じパス構成にするために、 prefixDefaultLoc
作業マシンが変わるたびに毎回同じものを作ってる気がするので、メモしておく。 我々はすべてのドキュメントをプレーンテキストで、つまりMarkdownで書きたいが、人は必ずしもそうではない。 折り合いをつけるためには、読めないからWordで書いてくれと言われてしまう前に、いい感じのアウトプットを出さねばならない。 ここでは html ファイルへのコンバートを考える。 md → html の変換は Pandoc を使えば簡単だが、毎回コマンド一発で使えるようにしておくにはちょっと準備が必要。 環境 Windows 10 Home Pandoc をインストールしておく CSSの用意 いい感じのスタイルで出力するには、いい感じのCSSが必要。 ここでは GitHub スタイルのCSSを利用することにする。 以前は ↓こちら Github Markdown CSS - for Markdown Edi
YouTubeでビデオに対する低評価の数が見えなくなりました。 ヘイトからクリエイターを守るという意図はわかるものの、あらかじめおおよその評価を知ることができなくなり、ユーザ視点ではやっぱり不便になった。 せめて、再生回数に対する高評価数の割合を判断材料にしたいと思い、勉強がてらChrome拡張を作ってみることにしました。 作成するプラグインのイメージ YouTube のURLを開くと勝手に起動する ビデオの一覧画面(トップのフィードや検索結果)に 高評価数 / 視聴回数 のパーセント表示を追加する オプション画面から、YouTube Data API キーを設定できるようにする ビデオの視聴回数や高評価数は YouTube Data API で取れるが、API を利用するにはユーザ側で Key を取得する必要がある。 ユーザによって Key が設定されていれば API を使うものとして、
引き続き React Query の話。 ある関数コンポーネントが useQuery によって取得される外部データに依存している場合に、そのuseQueryで取得される外部データをダミーに置き換えて、コンポーネントテストを書く方法。 なかなかまとまった情報が見つからなかったので記録しておく。 テストには Jest & React Testing Library を使用。 テストしたいコンポーネントのイメージとして、外部APIからユーザ情報を取得して表示するだけの部品を考える。 ↓こういうやつ。 /** * APIのデータ取得ロジック */ const fetchUserData = async () => { const res = await fetch("https://jsonplaceholder.typicode.com/users"); if (!res.ok) { throw
PlantUML の今月リリースされたバージョン(V1.2022.2 あたり)から、デフォルトのテーマが変更になって、スタイリッシュな白黒の感じになりました。 以前のデフォルトテーマに戻す方法 あまり文句のある人もいないとは思いますが、あの以前の垢抜けない黄色の感じが好きだったとか、あるいは色弱だと見づらそうといった理由で、昔のスタイルに戻したいという人もいるかもしれない。 その場合は先頭に skin rose を書くだけで、以前の見た目に戻せるようです。 @startuml skin rose ... @enduml 不要になるskinparamあり 以前のデフォルトスタイルだと、影が濃いのが気になるということで skinparam shadowing false を指定して消していた人もいると思いますが、新しいスタイルは最初から影がついていないので、このパラメータは意味がなくなります。
年も明けたので、Evernoteを卒業します。 Webクリップにもメモにも使えて、できるだけ無料か買い切りで使えて、すぐにサービス終了してしまわなさそうなものを条件として探すと、移行先はほぼNotion一択になるかなぁと思いました。 https://www.notion.so/ Notionには公式でEvernoteからのインポート機能があるが、Webクリップや画像のインポートには対応していない。 それ自体はまあ諦めがつくものの、致命的なのは、インポート中にそういうインポートできないノートがあると、コンソールにエラーを吐き捨てて静かに処理を中止してしまうこと。 エラーとなったノートの特定も容易ではない。 この時点でちょっとNotion自体に不安も生じるところではあるが、、まあちょっと諦めずに使ってみることにします。 やること Evernoteのノートブック単位で、ノートをNotionに一括
Transit UML というオンラインツールをリリースしました。無料で使えます。 Transit UML - Create Screen Tansition Diagrams using PlantUML なにこれ PlantUML の State Diagram の記法を利用すると、テキストとして画面遷移図を作成することができます。 このツールは、PlantUML の記法で作成した画面遷移図を複数の View に分割して管理・出力するためのものです。 なんのために 画面遷移図って、どうしてますか。 エクセル図形や diagrams.net でゴリゴリ作ると差分管理しづらいしメンテだるいし、やはりここはエンジニアらしくプレーンテキストで管理したい。 となると、Markdown エディタでの対応も多い PlantUML が良い。 State Diagram(状態遷移図)を使って画面遷移図を
FxCop、あるいはVisualStudio付属のコード分析で、厳しめの規則セットを使うと、以下のようなコードに対して警告が出る。 public class Person { public string[] Nicknames { get; private set; } ... } CA1819 コレクションを返すために、またはメソッドに設定するために、'Person.Nicknames' を変更してください。 日本語がおかしい。 配列でなくコレクションを返すか、プロパティでなくてメソッドにしろという意味だ。 MSDNにはもう少し詳しく書いてるんだけど、にしてもこれ分かりにくいんだよな。 プロパティが読み取り専用であっても、プロパティで返される配列は書き込みから保護されません。 配列の改ざんを防ぐには、プロパティで配列のコピーを返す必要があります。 一般に、このようなプロパティを呼び出すと
引き続き React Query のターン。 useQuery か、なるほどいいねこれということで導入しようと思っても、手元のコードは全然 class component ですよっていう場合に、どうやって導入していく方法があるかという整理。 おおよそそのまま、クラスコンポーネントでhooks使うにはどうするかっていう話になります。 検証コード 例として、以下のようなシンプルなコードを考える。 外部リソースとしてユーザ一覧を管理している 画面からユーザの追加を行う 画面でユーザ一覧を表示する 検証用コードとして、今は以下のようなダミーのストアを作っておきます。 本来はこの addUser , fetchUserList から APIへのリクエストを投げているイメージ。 (以下、サンプルコードは TypeScript です) export type User = { name: string
お勉強メモ。嘘ついたらごめんなさい。 React Query で、cacheTime, staleTime と、invalidateQueries, resetQueries あたりの使い分けの話。 お試し用コードは最後に載せてます。 cacheTime, staleTime について QueryClient には以下の設定がある。 cacheTime : 取得済みのデータ(以下「キャッシュ」と呼ぶ)を保持する時間(デフォルト5分) staleTime : キャッシュが古くなったと見なして再取得する時間(デフォルト0) 以下のようなコンポーネントの場合、 const SomeComponent = () => { const { data, isLoading } = useQuery("foo", fetchData); if (isLoading) return <div>Loadin
祝 .NET 6 GA アドベントカレンダー、23日の記事になります。 .NET 6 のリリースに伴い、C# の言語バージョンがついに 10.0 となりました。 C# の進化は早く、ちょっと気を抜いている隙に、見たことのない書き方のコードがどんどん出現します。 その一方で、業務の現場では、5年前10年前に書かれたソースコードを保守することも決して珍しくありません。 新しいコードでも古いコードでも、「なんだっけこれ?」という書き方がでてきたときに、同じことを従来の書き方/現在の書き方でどうやるかのリファレンスにできるよう、主要な機能・構文ごとに縦断的に整理してみました。 以下お品書きです。 プロパティ 値の参照渡し クラス・構造体・レコード コレクションと LINQ タプル 変数の文字列化 null の扱い 型推論 メンバ名の参照 非同期処理・並列処理 IDisposable と using
2020年も残り数日。 昨年に続き今年もいろいろ環境が変わり、ちょっと開発は離れめだった昨年に比べると、今年はがっつりコードを書く時間も増えた。 初めて使った技術もそこそこあり、また改めてこれまで使ってきた技術を見直すきっかけにもなったので、取り留めなく書き残しておきたい。 Reactとフロントエンド開発 React は良いものだ。 自分はもともと C#/WPFでGUIアプリを作っていた時間が長く、そこからWebのフロントエンド実装をかじり始めたとき、Knockout.js の双方向バインドの仕組みはわりと抵抗なく受け入れることができた。 そこからもう少しモダンなフレームワークを使おうとした際、React の jsx記法にどうにも抵抗があり、最初は React を避けて Vue.js を覚えることを選択した。 今回、改めて技術選定をするにあたって、観念して React を学ぶことに決めたが
タイムリープTypeScript 〜TypeScript始めたてのあの頃に知っておきたかったこと〜 アドベントカレンダー1日目の記事になります。 よろしくお願いします。 3行で TypeScript で安全に型を扱う勘所は以下2点だと思いました。 最初から最後まで型が壊れていないことを保証する 型が壊れる可能性があるものは壊れている前提で扱う 個人的背景と前提 もともと C# での開発をメインとしていました。 Web開発は、JavaScript歴 ≒ TypeScript歴くらいの型付依存者です。 そのため、型付けのゆるい言語に対する耐性がなく、本内容もそういうポジションからの見解になります。 本記事内のサンプルコードは TypeScript V4.4 で挙動を確認しています。 最近のバージョンで変更のあった点は脚注を入れています。 最初から最後まで型を壊さない C# という静的型付け言語
以前、DataRowとNullの微妙な関係というのを書いたけど、 相変わらず、型なしDataSetの値の扱いは気難しいという話。 まずは、int型のカラムを一つだけ持つDataTableを用意して、 それ用の新規DataRowを作って、適当な値を入れる。 var dt = new DataTable(); dt.Columns.Add("FldInt", typeof(int)); var row = dt.NewRow(); row["FldInt"] = 1234; こうすると、中に入ってるのはint値なので、 以下のようにして取り出せる。ここまでは良い。 var val = (int)row["FldInt"]; だけど、これを以下のようにshortやlongにキャストしようとすると 失敗するのである。 //throws InvalidCastException var sVal =
GitHubと連携して使える CI サービス Travis CIには、ビルドタスクを定期実行させられる Cron Jobs という機能がある。 実行間隔は daily / weekly / monthly というレベルでしか指定できないので利用ケースは限られるが、これを使えば CI 的な用途に限らず、1日1回の cron的な処理を無料の環境で動かせるということだ。 Travis CI は .NET Core のビルドに対応しているので、C# でかいた簡単なアプリを動かしてみる。 なお .NET Core のみならず mono も対応してるっぽかったので、.NET Framework のアプリもそれなりに動きそうではある。 GitHub と Travis の連携 このへんの説明は割愛する。 Travis でアカウントを作って、GitHub のアカウントと紐づけておく必要がある。 .NET C
C#では、リトルエンディアンとビッグエンディアンの バイト変換用メソッドとして、System.Net.IPAddressクラスに HostToNetworkOrderとNetworkToHostOrderを持っている。 コンピューターの配列順からネットワーク用の配列順(ビッグエンディアン)に 数値を変換するのがHostToNetworkOrder、 ネットワーク用の配列順からコンピューター用の配列順に 値を変換するのがNetworkToHostOrder、ということになっている。 これらのメソッドが、実行環境のコンピューターがリトルエンディアンなら 変換を実行し、そうでない場合は何もしないようになっているものなのか、 あるいはコンピューターがリトルエンディアンの場合にだけ これらのメソッドを呼び出せというものなのか、 MSDNの説明を読んだ限りではいまいちわからなかった。 ただいずれにせよ
HttpClientクラスを使って、Web APIなんかにJSONでデータをPOST送信する。 んなもん、なんでもないやろーと思ってテキトーにやろうとしたら、あれれあれれと、意外とはまってしまった。 ので一応備忘メモ。 ↓こんなPerson的なJSONを送りたいとして { "age" : 20, "name" : "太郎" } 答えから書いてしまうと、↓こう。 var json = "{ \"age\" : 20, \"name\" : \"太郎\" }"; using (var client = new HttpClient()) { var content = new StringContent(json, Encoding.UTF8, "application/json"); var response = await client.PostAsync("http://somehost
TypeScript Advent Calendar 23日の記事になります。 TypeScript良さそうだなーと思うんだけど既存のビルドプロセスに組み込むのがめんどくさかったり、使いたいんだけどチーム開発で自分だけ使うわけにいかないというようなしがらみがあったりします。 TypeScript 2.3 から、JavaScriptのままでもコンパイラが静的な型チェックをしてくれるようになったんですけど、すごさのわりに自分の観測範囲ではあまり話題になっていない。 まあすでにTypeScript使ってる人にとってはふつう関係ない話なので、そりゃそうかという気もしますが。 ともかくこれなら簡単に導入できて、コンパイル(トランスパイル)を挟むこともなく、自分だけこっそり型チェックの恩恵を得るようなことができます。 環境 リアルタイムでコンパイルチェックしてくれるエディタがいいです。こだわりがなけれ
C# Advent Calendar ぽっかり今日だけ空きができたみたいなので、急きょ参加しておきます。 Webのバインディング系フレームワークでよくある算出(Computed / Calculated)プロパティをC# のMVVMでも使いたいという話。 ちらっと検索してみた感じ、当然のように同じことをやろうとしている人がいっぱいいそうですが、他の実装例は未確認です。 だいたい同じような形になるんじゃないかなーと思いつつも、ちょっと微妙にスッキリと実装できない部分があったので、そこをどう工夫しているかは他のも見てみたいところではあります。 作りたいもの WindowのDataContextとなるクラス(ViewModel)に、2つのプロパティ Num1, Num2があったとして、このどちらかの値が更新されたときに自動で再計算される合計値 Sumプロパティを作りたいとします。 ↓こんなイメー
Visual Studio Codeアドベントカレンダー 14日目に参加しています。 githubのリポジトリで、2016年8月から2018年12月現在にわたり、350件を超えるコメントがつけられているissueがあります。 Allow for floating windows #10121 なにがやりたいか 本家IDEのVisual Studioには、タブをマウスで引っぱっていって、独立したウィンドウにできる機能があるのです。 これは使い慣れるとたしかに便利なもので、僕もよく利用します。 Chromeなどのブラウザでも同じことができますね。 このissueは、VSCodeでこれをやらせてくれ!というものです。 代替策 issue内の議論で何度も出てくる代替案として、vscode自体をもうひとつ別ウィンドウ起動し、同じファイルを開くという方法があります。 手順としては、 Ctrl+Shif
C#で、自前でイベントを発火させる際、 ハンドラが1つも登録されていない状態でInvokeしようとすると NullReferenceExceptionになっちゃうんで、 Nullでないことを確認してから呼び出す必要があります。 public event PropertyChangedEventHandler PropertyChanged; protected void RaisePropertyChanged(string propertyName) { //nullでないことを確認してから if (PropertyChanged != null) { //発火 PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); } } シングルスレッドで動くことがわかってる場合は 上のような書き方でも問題ないんだけども、
IFTTT(イフト)はいろんなWebサービス同士を連携させるためのWebサービスでございます。 「 IF This Then That 」という名前の表すとおり、Thisをトリガとして、Thatのアクションを起こす (例:Instagramでいいねをつけたら、Evernoteに自動保存する) という形で連携を定義する。 この「This」のトリガ部分に、既存のサービスだけでなく、自前のアプリからのHttpリクエストを使うこともできる。 のだけど、このイフトは何回かUIや用語に大きな変更があって、調べながらやろうとしたらけっこう苦戦した。 (もう「レシピ」とか呼ばないのよ) なので、2017年9月現在の、自前トリガからスマホへのプッシュ通知を実現する手順をまとめておきます。 Web画面ベースで説明するけど、スマホアプリからでもほぼ同様。 準備 IFTTTのアカウントを作成しておく。 あと、スマ
いつからか、PCのエクスプローラで右クリックしたときにエクスプローラが異常終了するようになってた。 特に拡張子が.txtのファイル上で右クリックしたときだけ発生。 ASUSのノート、Windows 10 Home。 こういうときはまずOSのイベント ビューアーを確認してみる。 explorer.exeのエラー。これだ。 見ると、「Foxit PhantomPDF」というソフトのプラグインがエラーをはいてるっぽい。 ASUSのノートにプリインストールされてたソフトだったと思う。たしか。 検索してみると、ちらほら同じような報告が見つかる。 このソフトをアンインストールして解決。 しかしプラグインがエクスプローラごと落としてしまうとは…。
pythonで形態素解析エンジン「MeCab」を使うのをWindows上でやろうとすると、いろいろ罠が多くてかつては大変だったようだが、今では先人たちの功績によって、たやすく構築できるようになっている。 ・・はずなんだけど、Python不慣れなのもあって、いざやってみたら細々としたところで無駄にはまってしまったので、整理しておく。 前提環境 Windows 10 (64bit) Python 3.6.5 pipenv pipさえ使えれば良いが、以下の例ではpipenvを使う pip install pipenv でインストール可能 MeCabのインストール まずは、WindowsマシンへのMeCabのインストール。 公式ページからWindows用のインストールバイナリ(mecab-0.996.exe)をダウンロードできるんだけど、ここで注意。 Pythonが64bit版でインストールされて
唐突なAstro話。 Astroのv4からi18n(国際化)機能が標準利用できるようになりました。 docs.astro.build ただ、この場合に @astrojs/rss で言語別にフィードを配信しようと思ったらどうやるのかわからず苦戦したのでメモ。 続きを読む PlantUML の今月リリースされたバージョン(V1.2022.2 あたり)から、デフォルトのテーマが変更になって、スタイリッシュな白黒の感じになりました。 続きを読む YouTubeでビデオに対する低評価の数が見えなくなりました。 ヘイトからクリエイターを守るという意図はわかるものの、あらかじめおおよその評価を知ることができなくなり、ユーザ視点ではやっぱり不便になった。 せめて、再生回数に対する高評価数の割合を判断材料にしたいと思い、勉強がてらChrome拡張を作ってみることにしました。 続きを読む 年も明けたので、Ev
ちょっと話題のHyperappをTypeScriptとWebpackで試す。 今年は試行段階でもいいからもう少しまめにアウトプットしましょうということで…。とりあえず環境構築まで。 前提 ・開発マシンのOSはWindows 10(あんま関係ないはず) ・Visual Studio Code ・nodeインストール済み(記事中ではyarnを使います) webpackとtypescriptの準備 webpackもtypescriptも、グローバルインストールされていないものとします。 もちろんグローバルにインストールされていればここでのインストールは不要。 ・プロジェクト作成 > yarn init -y ・パッケージインストール > yarn add --dev typescript webpack webpackでtypescriptを読み込むためのローダも入れておく。 今回は名前がつよい
ADO.NETのDataAdapterとかを使おうとすると、DataSetやDataTable経由で DataRowの値をいじる処理が絡むことが多いと思うが、 このクラスはNull値に関してちょっと直感的でない動きをする。 まずサンプルとして、以下のようなint列とstring列のDataTableを用意して そこからDataRowを作っておく。 var dt = new DataTable(); dt.Columns.Add("FldInt", typeof(int)); dt.Columns.Add("FldString", typeof(string)); var row = dt.NewRow(); このDataRowに対し、String列にNullを入れて、直後にそれがNullかどうかを確認する。 row["FldString"] = null; bool isNull = ro
WPFはBindingに始まりBindingに終わるといっても 過言ではない。気がする。 今回はコレクション要素のバインドについて。 例えば配列の0番目の要素に対してバインドしたいときは Hoge="{Binding Path=PiyoArray[0]}" と書けばできてしまう。 さてでは、Dictionaryとかを使って、キーにEnum(列挙型)の定数を 指定したいときはどうやって書けばよいだろう。 えらいもんで、探せばやってくれてる人がいるもんだな。 binding to value in Dictionary with enum as a key 上のページで十分わかりやすいと思うけど、 もう少しシンプルな例で(変わんねえかな)書いておく。 まず適当なEnum型。 public enum MyEnum { Zero, Key1, Key2, Key3, } このEnumがKeyのDi
10個のスレッドを同時に走らせて並列処理したいとする。 まさか new Thread(...).Start() なんてやらないですよね。 LINQでasync/awaitだーってのもアリかもしれませんが、 素直にTaskを10個作ろうとすると↓こんな感じ。 for (int i = 0; i < 10; i++) { Task.Run(() => { Thread.Sleep(4000); //4秒くらいかかる処理 }); } もちろん10個ほぼ同時に走ってくれることを期待する。 確認してみる。 var watch = Stopwatch.StartNew(); for (int i = 0; i < 10; i++) { Task.Run(() => { var threadId = Thread.CurrentThread.ManagedThreadId; Console.WriteL
次のページ
このページを最初にブックマークしてみませんか?
『OITA: Oika's Information Technological Activities』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く