【JS CSS HTML】Ajax（JQuery）CSSでアプリっぽいモックを作ってみる【JSbin・Codepen・WebMaker】

目次 [show]

アプリをつくろうと。。

結構まえから、Hello Worldはたくさんやっているんですが、Androidにするか？ iPhoneにするか？　Kotolinか？　Pythonか？　PHPか？　とか悩んでいろいろ見たりしています。

Webの方は、Wordpressとか、適当なJavaScriptとかで書いたりはするのですが。。Toolを使った方がかっこよかったりもするので。。

本当に作りたいのは、たんぽぽ調査用のアプリとか、小平CivicTECH用のスタンプラリーや、写真登録用のアプリなんです。　で・・・　というわけでもないんですが、最近モバイル系ではPWAっていう技術なども出てきているので、Webアプリだけ作ってPWAでアプリっぽくすればいいかな？って思い始めて、Webのフロントエンドを試そうと、JavaScript、CSS、HTMLでコピペでできることを、Web-IDEっぽい仕組みで、試してみました。

JSBin

画面構成的にも、中身も一番シンプルなものです

こんな感じで、ソースの共有と動作確認ができます。

JS Bin on jsbin.com

このソースは、ファイルをブラウザにアップロードして、縮小するというアプリです。サーバーサイドのプログラムがないので、クライアントのブラウザの中だけでのアプリですね。ファイルアップロードってサーバーにPHPとかでセーブするのとか必要なんですが、Canvasというブラウザのコンテナに入れているってことなんですね。

JavaScriptって、いろいろなライブラリーというかフレームワークがあってとっても便利というか覚えられないんですよねぇ～おじさんには。。表記方法がぜんぜん違うんだもん。。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,700" rel="stylesheet">
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet">

こういうライブラリを読み込んでコピペで作ってみました。のちのちにMapを使いたいのでDOMで動くAjaxというAsynchronous JavaScript + XML　という仕組みで書いたものです。

http://www.atmarkit.co.jp/ait/articles/0708/23/news134.html

ＨＴＭＬにＤＩＶ要素でいろいろと書かれているんですが。。　JavaScriptとJqueryの表記で何枚かのページに分かれて表現されています。　アプリっぽいですよね。

JS Bin on jsbin.com

こだいらCivicTechのサンプルアプリっぽくしてます。

JSBinはダウンロードすると一つのHTMLファイルでダウンロードされます。そのままサーバにおくと、アプリっぽく起動しますね。

https://tom2rd.sakura.ne.jp/hanakotech/kodaira3d/jsbinsampleapli.html

もともとサーバーと非同期にアクセスできるので、サーバサイドのプログラムを書けばいろいろできるんでしょうね。

https://qiita.com/katsunory/items/9bf9ee49ee5c08bf2b3d