Category:

Poetry+direnvで環境管理しているPythonアプリをVS Code上でDebug実行する

ここ最近Pythonのローカル開発環境においては、Poetryで仮想環境+パッケージ管理を行い、direnvで環境変数管理を行うスタンスなのですが、VS Code上でDebug実行しようと思ったら少し設定が必要だったのでメモ的に残しておきます。 Poetry Poetryは仮想環境構築とパッケージ管理をまとめて実行できる便利なツールです。つまり、venvとpipの代替ツールとなります。詳細は以前記事を書いたのでそちらを参照ください。 poetryでパッケージ・仮想環境を管理 direnv 12 factor を意識して、設定は環境変数に格納するというのが一般的になってきていると思いますが、ターミナルであるディレクトリにcdしたさいに、現在のディレクトリもしくは親ディレクトリを探索して、.envrcが存在していた場合そこに記載されている内容を環境変数にロードしてくれる便利なツールです。別のデ Continue Reading

Posted On :

Vue.js, TypeScript, FirebaseでChrome Extensionを作った

任意のWEBサイトに自分用のメモを残すことができる Chrome Extension を作って公開しました。 plaintextモード or markdownモードでメモを取ることができます。よければ使ってみてください。 この記事では、このChrome拡張開発のコアな部分が出来上がるまでについて紹介していこうと思います。 Web Storeリンク https://chrome.google.com/webstore/detail/memorun/lhkibcggoojcpjmigjohdlgfgjdbjkpb 紹介動画 使用している技術 Chrome Extension Vue.js + Vuetify TypeScript Firebase Authentication Cloud Firestore Cloud Function(この記事では出てきません) Vue.jsを使ったChro Continue Reading

Posted On :
Category:

ローカルPCでWEBサーバを立ち上げ静的ファイルをSERVEする4つの方法

最近スクレイピングをすることが多いのですが、開発時に動作確認のために条件に合うWEBサイトを探し出すのが大変なので、ローカルPC上でWEBサーバを立ち上げて静的ファイルをSERVEしたくなることが多いです。 ローカルPCで簡単に静的WEBサーバを立ち上げる方法を4つほど紹介しようと思います。 VS Code の Live Server(おすすめ) 自分は知らなかったのですが、VS Codeの拡張機能でLive Serverというものがあります。静的および動的ページのライブリロード機能を備えたローカル開発サーバーを起動してくれる拡張機能です。こちらに特徴が列挙してあります。 インストール VS CodeのExtensionsからLive Serverを検索してインストールします 使い方 一番お手軽な方法は、対象のファイルを右クリックして、Open with Live Serverする方法です Continue Reading

Posted On :
Category:

Chrome ExtensionをWeb Storeに公開する

WEBページに個人用のメモを残せるChrome拡張を作成しているのですが、だいたい作り終わったので、公開しました。 一度申請して拒否されてしまい、今は二回目の申請で公開されたのですが、どう書いて申請したか紹介している記事が少ない印象なので、なるべく具体的に紹介してみたいと思います。 ちなみに、作ったChrome拡張はこちらです。よければ使ってみてください。 https://chrome.google.com/webstore/detail/memorun/lhkibcggoojcpjmigjohdlgfgjdbjkpb?hl=ja 1回目 => 拒否 以下のサイトをベースに作業を進めました。 https://developer.chrome.com/webstore/publish 開発者アカウントを作成 開発者コンソールに初回アクセスする際に、開発者アカウントの作成を要求されます。 Continue Reading

Posted On :
Category:

VuetifyのリセットCSSの影響範囲をVuetify適用範囲内に限定する

Vuetify は、とても使いやすいVue UIコンポーネントを提供してくれるライブラリなのですが、リセットCSSが強制的にページ全体に適用されてしまうため、既存ページの一部分にVuetifyを使いたくてもその外側のデザインが崩れてしまうことがあります。 ここではその問題を回避する方法について紹介します。 リセットCSSとは リセットCSSとは各ブラウザがデフォルトで適用するCSSの差異の影響で画面のデザインが変わってしまわない様に、ブラウザが適用するCSSを打ち消すためのものらしいです。 VuetifyのリセットCSS VuetifyのリセットCSSは以下で、これが強制的に適用されます。 https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/styles/generic/_reset.scss 例えば、 Continue Reading

Posted On :