その他の業務
PWA制作

PWA制作

これまでウェブページに配置して利用していたコンテンツ・スクリプト(JavaScript)を、シンプル設計のアプリケーションシェル(HTML・CSS)とマニフェスト(JSON)・スクリプト(Service WorkerなどのJS)などを合わせたものにのせたPWA(Progressive Web Apps)を制作します。

PWA

PWAとは、ウェブページと同じブラウズ性にネイティブアプリの操作性を加えたもので、スマートフォンなどのモバイル端末で高速表示とオフラインでの利用ができ、アプリのようにインストール・プッシュ通知することも可能です。
そのため、事前に読み込みができていれば地下鉄内や山間部などの電波が届かないところでも利用できます。

FUTURE ARTISTIC APPLICATION
未来アプリ(仮)

活用の可能性と限界を実験するために開発・試作・制作したPWAのサンプルです。(サーバーにより自動的に追加される広告がちょっとあれですが、、、。)
スマートフォンのChromeで開きインストールすると、並んだアプリの最後尾にアイコンが追加され、ネットワーク接続のないオフライン状態でも使用できます。
技術的にはウェブページがベースなので、オンライン状態のデスクトップ版ウェブブラウザーでも動作し、Chromeではアプリとして追加もできます。

特長

  • アプリケーションシェル(App Shell)は、このサイトでも使用しているウェブサイト用フレームワーク「JVW 04」互換のサブセットとして「Java Sparrow」を新たに制作。
  • アプリケーションシェルがウェブサイト用と互換性のあるサブセットのため、ウェブサイト用に制作したGUI描画・処理・結果描画を行うスクリプトを変更することなくのせることが可能。
  • 今後制作するPWA内のコンテンツ・スクリプトは、PWA独自の機能を使用していなければ変更することなくウェブサイトにのせることが可能。

ウェブページとPWA

PWAのインストール
スマートフォンへのインストール

PWA X 01
(開発中)#301 ぴこぴこ配色くん
COLOR SCHEME CALCULATOR

PWA COLOR SCHEME SIMULATOR
#302 いろいろ配色くん
COLOR SCHEME SIMULATOR

PWA X 01
(計画中)#303 ぴこぴこサイズくん
LAYOUT SIZE CALCULATOR

PWA mm-px CONVERTER
#304 ひょいひょいミリピクくん
mm-px CONVERTER

PWA ACCOUNT TITLE SEARCHER
#305 どれどれ勘定科目くん
ACCOUNT TITLE SEARCHER

PWA LINEAR CONTENTS SLIDER
#306 つぎつぎ表示くん
LINEAR CONTENTS SLIDER

PWA X 01
(計画中)#nnn
?

PWA X 02
(計画中)#nnn
?

PWA X 03
(計画中)#nnn
?

開発ログ

2017/12/01
#304 mm-px CONVERTER
基本設計・インストール実験
インストール後の更新が反映されるタイミング調査(Service Workerを更新し最上部でさらに上にスクロールしようとすると再起動なしで再読込・更新が反映される場合がある)
2017/12/01
#305 ACCOUNT TITLE SEARCHER
同ドメインに複数アプリの配置実験(Service Workerはそれぞれ動作可能)
start_urlより上位の共通データの利用実験
制作時間調査(処理部分のスクリプトがあれば10分程度で完成)
2017/12/06
#306 LINEAR CONTENTS SLIDER
スマホ横長・タブレットでのレスポンシブレイアウトの限界実験
2017/12/08
#302 COLOR SCHEME SIMULATOR
制作時間調査
2018/04/22
#302 COLOR SCHEME SIMULATOR
GUIの効率化による操作性向上を目的としたレンダリング後のposition:fixed設定の実験

ページトップ

inserted by FC2 system