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

アプリをつくろうと。。

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

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

【流行りのデザイン】Bootstrap用のエディタ(Mobirise)を使って、それっぽいサイトをぱぱっと作ってみる。【ホームページ作成】

本当に作りたいのは、たんぽぽ調査用のアプリとか、小平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

HTMLにDIV要素でいろいろと書かれているんですが。。 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

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とかあります。

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

 

投稿者 tom2rd

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

Loading Facebook Comments ...

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください