- 1. ブログラミング学習サイトDonblerに有料レッスンを投稿してみた
- 2. Chrome拡張機能を作ってみよう②
- 3. Chrome拡張機能を作ってみよう①
- 4. 【Typescript】 Error: Cannot find module ‘express’ の解決
- 5. UdemyでTypeScript学習メモ
- 6. 蟻コロニー最適化(ACO)で解く巡回セールスマン問題(TSP)をJavaScriptで書いてみた
- 7. 4.1より前のRedmineでもクリップボードから画像ペタリしたいです（Wikiページに）
- 8. 図解するとVuexストアがはっきり理解できた件、
- 9. 六行テトリス
- 10. Next.jsの環境構築とメリット
- 11. jsとhtmlでメモ化を実践
- 12. LIFF URLでクエリパラメータを使おうとするとliff.initが正常に動かなかった話
- 13. [Vue3] v-onでKeyCodeが非推奨になりました
- 14. [TailwindCSS] Error: PostCSS plugin tailwindcss requires PostCSS 8.
- 15. axios では xhr? が効かない
- 16. sam local start-apiでヘッダーが勝手にキャメルケースになるんだが？
- 17. Uncaught Error: Cannot find moduleが出た話
- 18. JavascriptでSlackbotにリアクションをさせよう
- 19. フロントエンド目線でのObserverパターン
- 20. 【Elixir/Phoenixプロダクトへリプレイス②】フロント部分：JavaScriptをTypeScriptにリプレイスする例
ブログラミング学習サイトDonblerに有料レッスンを投稿してみた
#ブログラミング学習サイトDonbler
2021年1月にリリースされたDonblerというサービスが気になっている。このサイトどうやらエディタを内臓(Progateのような？)していてサイト内で完結するらしい。
Progateとなにが違うのか検証してみたところレッスンは公式ではなくユーザが投稿できてさらに有料にもできる仕様らしい。この点はUdemyと似ているがUdemyは動画のレッスンに対してDonblerはテキストベースのレッスンである。これはエンジニアにとっては嬉しい仕様なのではないだろうか。
今回はProgateとUdemyの融合体であるDonblerに試しに有料レッスンを投稿してみることにする。
今回投稿したレッスンのリンクを貼っておきます！興味のある方は買ってみてください！
[
Chrome拡張機能を作ってみよう②
[前回](https://qiita.com/andkirato/items/864a107c628d935a6f7b)はChrome拡張機能からファイルのダウンロードまでを投稿しました。
今回はその続きです。## Chrome拡張機能とローカルプログラムの連携
Chrome拡張機能とローカルプログラムとの連携について
今回はローカルプログラムをvisual studioで作ったC#のプログラムとします。##下準備
まずは連携するための下準備をします。最初に連携するプログラムの配置場所を決めます。
今回は
c:\extensionSample\program
の配下に置くことにします。___連携用JSONファイルを準備___
場所に決まりはないですが連携用のjsonファイルをprogramフォルダの配下に配置する“`program.josn
{
“name”: “put.message”,
“description”: “特定のURLでメッセージを表示する。”,
“path”: “C:\\extensionSample\\program\\progra
Chrome拡張機能を作ってみよう①
## 背景
Chromeの拡張機能を作ってみたが、どこかにアウトプットしないと絶対に忘れると思ったため
基本的に自分用メモなのでよくわからなかったらすみません。## 作るもの
① Chrome拡張機能からWeb上のファイルをダウンロードする。
② ダウンロードしたファイルをC＃で作ったexeに連携する。
③ exeでファイル内容を受け取りChrome拡張機能に返す。
④ exeから受け取ったURLと同じURLを開いた場合にメッセージを表示する。
補足）Chrome拡張機能をChromeウェブストアを介さずにインストールさせる## 準備するもの
・テキストエディタ
・visual studio
・xampp（ファイルダウンロード用）## Chrome拡張機能からファイルのダウンロード
今回はc:\extensionSample\extensions
というフォルダを作って、この中に作っていきます。extensionsの中はこんな感じです
[css]
popup.css – popup.htmlのスタイル
[images]
abnormal.png – Chrome
【Typescript】 Error: Cannot find module ‘express’ の解決
あるファイルを読み込もうとしたら、エラーメッセージが出た。
“`typescript
node index.jsinternal/modules/cjs/loader.js:638
throw err;
^Error: Cannot find module ‘express’
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
at Function.Module._load (internal/modules/cjs/loader.js:562:25)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (internal/modules/cjs/helpers.js:25:18)
at Object.(/home/ec2-user/environment/photo/realitycapture/realit
UdemyでTypeScript学習メモ
### TypeScriptのインストール
“`
npm install -g typescript
“`
### 型指定
Number: 数値
String: 文字
Boolean: true / false
Any: 全ての型
Void: 返り値がない
undefined: undefined
null: null### 配列
“`
let list: number[] = [1, 2, 3];
“`### Tuple型
“`
// 0番目にnumber、1番目にstringのみ入れることができる
let tuple: [string, number] = [“myname”, 3];
“`### Enum形
デフォルト値なし
“`
// 型の定義
enum Family {Rick, Mike,Json};// 使用するとインデックス番号が入る
let Rick:number = Family.Rick; // 0
let Mike:number = Family.Rick; // 1
let Json:number = Family.Ri
蟻コロニー最適化(ACO)で解く巡回セールスマン問題(TSP)をJavaScriptで書いてみた
※個人の練習用です。アルゴリズムの正確性は担保しません。
## 蟻コロニー最適化(ACO)とは
群知能の一つで、代表的なアルゴリズムです。
他に粒子群最適化、人工蜂コロニーアルゴリズムなどがあります。>蟻コロニー最適化(ACO)は難しい組み合わせ最適化問題の近似解を探索するのに使われるメタヒューリスティックな最適化アルゴリズムである。ACOでは、現実の蟻を真似た人工蟻が問題のグラフ上を移動することで解を構築しようとする。このとき、グラフ上に人工のフェロモンを置くことでその後の人工蟻がよりよい解を探索できるようにする[4]。ACOは多数の最適化問題で効力を発揮してきた。
– [Wikipedia: 蟻コロニー最適化]
(https://ja.wikipedia.org/wiki/%E8%9F%BB%E3%82%B3%E3%83%AD%E3%83%8B%E3%83%BC%E6%9C%80%E9%81%A9%E5%8C%96)詳細は下のリンクからどうぞ。
[アントコロニー最適化(ACO)を救いたい](https://qiita.com/ganariya/items/25824f1
4.1より前のRedmineでもクリップボードから画像ペタリしたいです（Wikiページに）
#これをしたい！
Lightshotでクリップボードに保存した画像を “`Ctl + V“` だけでWiki記事にペタリ！
↓Lightshotについてはこっち。
[ウェ～イなPrintScreenを実現してくれる画面キャプチャソフト『Lightshot』](https://qiita.com/waokitsune/items/60115b8d343bcfc69468)#4.1.0からはできますです
[Redmine4.1.0リリース情報](http://blog.redmine.jp/articles/4_1/redmine-4_1_0-released/) によると標準で搭載されてるようです。
あたいもDockerで4.1.0の環境作ってやってみたら実際できました。
でも宗教上の理由とかで中々アップデートできない事情もありまして
図解するとVuexストアがはっきり理解できた件、
Vuexストアによる状態管理が十分理解できていなかったが、図解をすることでかなり理解できたからアウトプットしていく。
## Vuexストアの図解
（参考記事）
https://codezine.jp/article/detail/11994
【流れの説明】
1. コンポーネントがWebページの更新をするためにアクションを実行する（dispatch）。
2. アクションでWeb APIなどの更新に必要なデータを取得（１）。
3. アクションで取得したデータを状態に反映させるためにミューテーションを実行する（commit）。
4. ミューテーションでステートの変更を行う（Mutate）。
5. ステートでWebページ全体の状態を保持する（３）。
6. 変更されたステートに基づいてコンポーネントが画面を表示（Render）。細く言
六行テトリス
# 七行プログラミングとは
かつて、使える文字が「7行×79文字」という制限の元でコーディングの技術を競う、七行プログラミングと呼ばれるショートコーディング技術が流行ったそうです。その流行の中で生まれたのが、以下に紹介する七行で動くテトリスです。
## 七行テトリスについて
七行テトリスはネット上で何種類かの亜種が見つかりますが、主だったものを紹介します。* 498バイト版 ([参考：たった7行でテトリスを実装「七行プログラミング」とは](https://qiita.com/ryuichi1208/items/f9e6ac2b99bbe4fc82d3 “たった7行でテトリスを実装「七行プログラミング」とは”))
“`html