はじめに
某人材会社でプロダクトマネージャー（以下PdM）兼、新規事業担当をしている者です。
PdMの役割は、業界や会社規模、プロジェクトの性質によって大きく異なります。私の現場では、複雑で難しいタスクが多い中、プロダクトの成功を目指して働きかける『忍び』的な存在として活動しています。🥷
また、新規事業担当としても企画立案を行い、『新規プロダクトの創出』という観点で幅広い業務に携わっています。
今回は技術記事、ということで、メモアプリを拡張機能でいつでも起動して保存すれば閲覧できるようなアプリを作ったのでシェアしてみようかと思います('ω')ノ
ツールを作った背景
わたしは業務の中でよくメモをする頻度が高く、slackなど自分のチャットにメモ書きをしています。
ですが、そのメモ書きが生かされる割合はほとんどなく、『メモ書きのごみ山』ができあがってしまっている散々な状態なのです😥
▽わたしのslackメモ。断捨離めんどくさくてできない(´;ω;｀)
Google拡張機能の作り方
▽超参考にした記事
https://qiita.com/RyBB/items/32b2a7b879f21b3edefc
https://qiita.com/mdstoy/items/9866544e37987337dc79
https://www2.kobe-u.ac.jp/~tnishida/programming/ChromeExtension-02.html
https://www.dsk-cloud.com/blog/how-to-create-chrome-extension
作ってみよう
それでは実際にChrome拡張機能を作ってみましょう。
今回のファイル構成は以下のとおりです。
∟ manifest.json
∟ popup.html
∟ styles.css
∟ popup.js
∟ icon.png（アイコン画像に使うみたいです）
まずは、次のような manifest.json ファイルを作成します。
{
"manifest_version": 3,
"name": "Memo",
"version": "1.0",
"description": "簡易メモアプリ",
"permissions": ["storage"],
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "icon.png",
"48": "icon.png",
"128": "icon.png"
}
}
}
次にツールの画面をつくります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>memo</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>memo</h1>
<textarea id="memo" placeholder="ここにメモを書いてね！"></textarea>
<button id="save">保存</button>
<p id="status"></p>
</div>
<script src="popup.js"></script>
</body>
</html>
body {
font-family: 'Arial', sans-serif;
background-color: #fffbf0;
color: #333;
margin: 0;
padding: 0;
font-family: 'M PLUS Rounded 1c', sans-serif;
}
.container {
width: 300px;
padding: 20px;
text-align: center;
}
h1 {
font-size: 20px;
color: #ff7f7f;
}
textarea {
width: 84%;
height: 150px;
border: 2px solid #ff7f7f;
border-radius: 10px;
padding: 10px;
font-size: 14px;
background-color: #fffaf0;
color: #333;
resize: none;
}
button {
margin-top: 10px;
padding: 10px 20px;
background-color: #ffb6c1;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
}
button:hover {
background-color: #ff7f7f;
}
#status {
margin-top: 10px;
font-size: 12px;
color: #666;
}
さいごにメモ帳を保存する、保存したメモ帳を読み込む処理を書きます。
document.addEventListener('DOMContentLoaded', function () {
const memo = document.getElementById('memo');
const saveButton = document.getElementById('save');
// 保存されたメモを読み込む
chrome.storage.sync.get(['memo'], function (result) {
if (result.memo) {
memo.value = result.memo;
}
});
// メモを保存する
saveButton.addEventListener('click', function () {
chrome.storage.sync.set({ memo: memo.value }, function () {
});
});
});
メモ帳完成📝
おわりに
メモは取るに越したことはないが、メモをメモで終わらせず、タスクなどに昇華させることのほうがどうやら大事っぽいぞ？と気づいてしまった。。。(＾ω＾)まぁいいや、メリクリ！！！よいおとしを！！！！