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

スポンサーリンク
広告

アプリをつくろうと。。

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

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

【流行りのデザイン】Bootstrap用のエディタ(Mobirise)を使って、それっぽいサイトをぱぱっと作ってみる。【ホームページ作成】
WordPress全盛ですが・・・ 僕のこのサイトもWordpressなんですけど、記事が大変増えてきたので、そろそろ、なんというかそれぞ...

本当に作りたいのは、たんぽぽ調査用のアプリとか、小平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 という仕組みで書いたものです。

いまさら聞けない、“Ajax”とは何なのか?

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

JS Bin on jsbin.com

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

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

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

JavascriptのAjaxについての基本まとめ - Qiita
AjaxとはAsynchronous JavaScript + XMLの略。すなわちJavascriptとXMLを使用して非同期(Asynchronous)でページ内容を更新する技術のこと。①…

CodePen

JSbinとほぼ同じようなものですが、こちらの方が他の方が作ったコードを見つけやすいですね。さきほどの同じソースをCodePenに入れてみたものです。

See the Pen SampleAjax by Tetsuya Tominaga (@tom2rd) on CodePen.

探しにくいけど、JS+CSS+HTMLで書かれたいろんなPenを見ることができます。

Mobileのページ用のスワイプを作っているものです。他人のコードの再利用がしやすいですね。

See the Pen Bootstrap 3 carousel with swipe by Andrea Rufo (@andrearufo) on CodePen.

あとファイルのセーブもCSSとJSとHTMLと別々のファイルのままZipでダウンロードできるので、使いまわしをするにはこちらの方がいいかな?

JSBinで短く試して、CodePenでもう少し広い範囲を試すって感じでしょうか?

WebMaker

オフラインでもできるChrome拡張です。CodePenにセーブしたりできるので、便利かも。。

CodePenとほとんど同じですが共有機能とかがないのかな?SnapShotとかあります。

インターネットにつながってなくても動かして見せれるのは便利かも

コメントを残していただけるとありがたいです

Loading Facebook Comments ...
%d人のブロガーが「いいね」をつけました。