ウェブ共有APIでメモ入り口ツールをWebに置く
Webページにボタンとテキストエリアだけがある
ボタンを押すとテキストエリアの内容が共有に送られる
あとはショートカット.appとかでなんとかする
ショートカット.appだと入力がinputだけになってしまうのをなんとかしたかった
code:samplebtn.js
let shareData = { title: 'MDN', text: 'Learn web development on MDN!', url: 'https://developer.mozilla.org', } const btn = document.querySelector('button'); const resultPara = document.querySelector('.result'); btn.addEventListener('click', () => { navigator.share(shareData) .then(() => resultPara.textContent = 'MDN shared successfully' ) .catch((e) => resultPara.textContent = 'Error: ' + e ) }); code:sample.js
async share() {
if (!window.navigator.share) {
alert("ご利用のブラウザでは共有できません。");
return;
}
try {
await window.navigator.share({
title: 'Share API で共有!',
text: 'ご覧の通り、お手軽にSNSにリンクを供することができます。',
});
alert('共有が完了しました。');
} catch (e) {
console.log(e.message);
}
}
ref.
できた(2023/12/9)
code:sender.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>mSender</title>
</head>
<body>
<button>Share</button>
<div id="shareField">
<textarea style="width:100%;height:100vh;"></textarea>
</div>
<footer>
<address>Copyright(C)Tadanori Kurashita,Allright Reserved.</address>
</footer>
<script>
btn = document.querySelector('button');
btn.addEventListener('click', () => {
const textfiled = document.querySelector('#shareField textarea');
const shareData = textfiled.value
share(shareData)
});
async function share(sText) {
if (!window.navigator.share) {
alert("ご利用のブラウザでは共有できません。");
return;
}
try {
await window.navigator.share({
text: sText,
});
alert('共有が完了しました。');
document.querySelector('#shareField textarea').value = ""
//ローカルストレージに保存もしておくとよいかも
} catch (e) {
console.log(e);
}
}
</script>
</body>
</html>
https://gyazo.com/e2fad1c3beef48663891364e12d47e82
https://gyazo.com/2cc4779dab8c4a7446fa396617e6e927
https://gyazo.com/60a312c7f67858424223e514e90e5790
入力したテキストをノートアプリに移してもいいし、自分でショートカット.appを作ってそこに渡してもいい
シェアできるオブジェクトにファイルもあるので、iPhoneの画像データをテキストと一緒にして、何かしらのアプリに渡すことも可能?
画像はDrooboxに渡して、テキストは〜〜とか
画像はGyazoに渡して、返ってきたURLと入力したテキストと一緒に保存とか
いろいろ可能性はある
2023/12/12
以下のツールを受けて、スワイプ移動ができるようにした
code:sample.html
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<style>
body{
margin: 0px;
}
font-size: 20px;
font-family: sans-serif, Hiragino Maru Gothic ProN;
line-height: 1.8;
color: black;
background: white;
caret-color: red;
padding-top: 180px;
padding-left: 180px;
padding-right: 180px;
padding-bottom: 60vh;
white-space: pre-wrap;
word-break: break-all;
width: 100%;
height: 100vh;
border: 0;
}
</style>
<body>
<textarea id=wine placeholder='...'></textarea>
</body>
<script>
p = 0
speed = 8
wine.ontouchstart = (e) => {
}
wine.ontouchmove = (e) => {
if(x-p>speed || p-x>speed){
e.preventDefault()
d = document.getSelection()
m = (e.touches.length==2 || d.toString().length)? "extend":"move"
d.modify(m, (p>x)? "left":"right", "character")
p = x
}
}
</script>