ミソクソみたいなモノでもPWAでアプリにする練習をしよう
ミソクソみたいなモノでもPWAでアプリにする練習をしよう:
Progressive Web Appsの略で、いわゆるウェブ上にあるものをアプリっぽく動かせるようにできるよ！という「仕組み」です。新技術とかどっちかというとそういう方向ではありません。が、スマホでアプリっぽく動く。これは色々勉強する上でものすごいモチベーションになると思うんですよね。
javascriptで書いた簡単なスクリプトから、Wordpressで作ったブログもPWA対応することが可能。自分で作ったjavascriptのゲームや、家族間だけで使うスクリプトなんかもPWA対応するだけでめっちゃ便利に使えると思うんですよね。
以下、例はミソクソなコードでご紹介しますが過去の遺産なので気にしないでください。
https://qiita.com/Gen6/items/25601c7a9da8bf958f26
上記記事をご参考ください。
とりあえず適当なSSL化したレンタルサーバーに投げてください。
AndroidスマホからそのURLへアクセスすれば完成。
PWAはこれからなにか言語を学ぼう、という人にとって是非オススメしたいものだと思うんですよ、
とりあえずPWAとは
Progressive Web Appsの略で、いわゆるウェブ上にあるものをアプリっぽく動かせるようにできるよ！という「仕組み」です。新技術とかどっちかというとそういう方向ではありません。が、スマホでアプリっぽく動く。これは色々勉強する上でものすごいモチベーションになると思うんですよね。javascriptで書いた簡単なスクリプトから、Wordpressで作ったブログもPWA対応することが可能。自分で作ったjavascriptのゲームや、家族間だけで使うスクリプトなんかもPWA対応するだけでめっちゃ便利に使えると思うんですよね。
クソアプリを作る
以下、例はミソクソなコードでご紹介しますが過去の遺産なので気にしないでください。index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>位置情報取得マン</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="位置情報取得マン">
<link rel="apple-touch-icon" href="icon.png">
<link rel="manifest" href="manifest.json">
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js').then(function(registration) {
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}).catch(function(err) {
console.log('ServiceWorker registration failed: ', err);
});
}
</script>
<body>
<h1>位置情報取得マン</h1>
<script type="text/javascript">
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function (pos) {
var locationlat = pos.coords.latitude;
var locationlong = pos.coords.longitude;
$('#location .lat').append(locationlat);
$('#location .long').append(locationlong);
var linktag = 'https://www.google.co.jp/search?q=' + locationlat + ',' + locationlong;
$('#linktag').attr('href',linktag);
var linelink = 'http://line.me/R/msg/text/?'+ '%20' + linktag;
$('#linetag').attr('href',linelink);
});
} else {
window.alert("本ブラウザではGeolocationが使えません");
}
</script>
<div id="location">
<p class="lat">緯度: </p>
<p class="long">経度: </p>
</div>
<p><a id="linktag" href="">現在地の地図を表示</a></p>
<p><a id="linetag" href="">現在地をLINEで送る</a></p>
</body>
</html>
PWAに必要なファイルについて
https://qiita.com/Gen6/items/25601c7a9da8bf958f26上記記事をご参考ください。
サーバーにアップロード
とりあえず適当なSSL化したレンタルサーバーに投げてください。AndroidスマホからそのURLへアクセスすれば完成。
PWAはこれからなにか言語を学ぼう、という人にとって是非オススメしたいものだと思うんですよ、
コメント
コメントを投稿