3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

PWAAdvent Calendar 2020

Day 14

それほどかしこまらなくても書けるPWA

Posted at

ども
連続何日書いてたっけ。
もう忘れてしまった。
PWA Advent Calendar 202014日目です。
#PWAって難しく考えてませんか?
PWAというのはスマホ上で動くWebアプリのこと言います。
実際には携帯サイズに合わせてCSSやjQueryMobileやReactを使って書いているアプリのことを言います。
スマホアプリで一番とっつきやすいのが実はPWAで自分も昔得意にしていました。
ある会社の教育関係アプリを3ヶ月でWeb上で動くようにプログラミングしたこともあったっけ。
そのあとはめっきり普通のWebアプリ書いてましたが。
一般職に行く前にガリガリとタイムラインを生成するフレームワークを書いてました。
#PWAにはいろんな要素が含まれている
PWAってスマホで表示できるアプリだけだと思ってませんか。
実は裏側は実はC#やPHP・Pythonなどでデータベースに接続されています。
一時期自分もしたんですがHTML5ではもう書けない宣言なんてものをしたことがあります。
それはJavascriptさながら裏側で動くサーバスクリプトが動きが早くブラウザが表示することが遅かったために発生しました。
PHP主体でやっていたFacebookがHTML5に手を出しやけどしたのがちょうど自分がガリガリとある業種のソフト作っていたときでした。
しかも特殊で打倒〇〇〇と叫びながら作るもんですから困らされたのですが実はこのときもう一つの動きとして日報をスマホで書きたいという話も出てきていました。
だけど書くのに疲れた自分は追加のやまと格闘しながらHTML5で各道を選びすっと書き続けました。
その時は盆暮れ正月なしの上土日までフルに使ってました。
その時の上司はどこか逃亡したみたいですけどね。
#昔はガリガリ書ける人にしかできませんでした。
マジでこれ入っておきます。
Reactが来るまでは狂うくらいの仕事量でした。
HTML5を動かすためにはまずCSSをスマホ仕様にHeightやWidthを%表示に変えるところから始まります。
その後動作をつけるためにjQueryMobileでフルスクラッチをしバックエンドに投げるためにAjaxやAsync/Awaitなどを使って書くことになります。
最近はPromiseが多いみたいですけど。
これがまた大変です。
送り出すのにどの手法をp使うかで変わってきます。
昔みたいにPost/Getでやれればよいのですがセキュリティが関わってくるので最近はJSONオブジェクトが多いみたいですね。
JSON配列じゃないですよJSONオブジェクトです。
なぜJSONオブジェクトかというと内部が暗号化され復号化されるまでは何が入っているかわかりにくいからです。
これでPHPとやり取りをしデータベースへとアクセスしていたというわけです。
#タイムラインってなんで難しいの
はっきり言っておきます。
タイムラインをPWAで書くのは至難の業です。
大概の人は見つけ出す前に投げ出してしまう人が大半です。
自分が一回一般職に言って体を治そうと思ったのはこれで精神が狂ってしまったからなんです。
それほど大変です。
今みたいに全部Listでやればいいじゃんじゃないんです。
これやったらおそらく完璧に1年はかかるでしょう。
昔のWeb書いている人なら簡単に思いつくことです。
そうですTableを使うんです。
これじゃないと早くは書けません。
Listだといろんな制限が満載で描くだけでお腹いっぱいになります。
本当ですよ。
気が狂っちゃいます。
削ったり順番入れ替えたり追加したりするとListって案外使いようにならないということがやっていてわかりました。
結局HTML5はTableから逃げられないということだけ言っておきましょう。
業務アプリもほとんどがTableで書かれてますしね。
#地図アプリはPWAがいいよ
そう言えば第2回中京テレビハッカソン優勝作品のまたたびって知ってますか。
あれは対策です。
ときにはライバルでもあり同士でもある瀬谷さん青島さん川合くんの三人が作ったアプリで実はこれが優勝したときに俺の得意分野でやられてしまったと思ってしまいました。
正直言うとまだ改造中でいろんな機能が盛り込まれています。
一度使ってみることおすすめします。
こういった事ができるんだと言うことを知ることができます。
俺もチームに入りたかったなぁと今も思うくらい最強のチームでした。

今日はここまでにしようと思います。
次はkan_daiさんです。
PWAって最近下火になりかけてるのでお互い頑張っていきましょう。

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?