目次 [show]
アプリをつくろうと。。
結構まえから、Hello Worldはたくさんやっているんですが、Androidにするか? iPhoneにするか? Kotolinか? Pythonか? PHPか? とか悩んでいろいろ見たりしています。
Webの方は、Wordpressとか、適当なJavaScriptとかで書いたりはするのですが。。Toolを使った方がかっこよかったりもするので。。
本当に作りたいのは、たんぽぽ調査用のアプリとか、小平CivicTECH用のスタンプラリーや、写真登録用のアプリなんです。 で・・・ というわけでもないんですが、最近モバイル系ではPWAっていう技術なども出てきているので、Webアプリだけ作ってPWAでアプリっぽくすればいいかな?って思い始めて、Webのフロントエンドを試そうと、JavaScript、CSS、HTMLでコピペでできることを、Web-IDEっぽい仕組みで、試してみました。
JSBin
画面構成的にも、中身も一番シンプルなものです
このソースは、ファイルをブラウザにアップロードして、縮小するというアプリです。サーバーサイドのプログラムがないので、クライアントのブラウザの中だけでのアプリですね。ファイルアップロードってサーバーに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の表記で何枚かのページに分かれて表現されています。 アプリっぽいですよね。
こだいらCivicTechのサンプルアプリっぽくしてます。
JSBinはダウンロードすると一つのHTMLファイルでダウンロードされます。そのままサーバにおくと、アプリっぽく起動しますね。
https://tom2rd.sakura.ne.jp/hanakotech/kodaira3d/jsbinsampleapli.html
もともとサーバーと非同期にアクセスできるので、サーバサイドのプログラムを書けばいろいろできるんでしょうね。
https://qiita.com/katsunory/items/9bf9ee49ee5c08bf2b3d
CodePen
JSbinとほぼ同じようなものですが、こちらの方が他の方が作ったコードを見つけやすいですね。さきほどの同じソースをCodePenに入れてみたものです。
探しにくいけど、JS+CSS+HTMLで書かれたいろんなPenを見ることができます。
Mobileのページ用のスワイプを作っているものです。他人のコードの再利用がしやすいですね。
あとファイルのセーブもCSSとJSとHTMLと別々のファイルのままZipでダウンロードできるので、使いまわしをするにはこちらの方がいいかな?
JSBinで短く試して、CodePenでもう少し広い範囲を試すって感じでしょうか?
WebMaker
オフラインでもできるChrome拡張です。CodePenにセーブしたりできるので、便利かも。。
CodePenとほとんど同じですが共有機能とかがないのかな?SnapShotとかあります。
インターネットにつながってなくても動かして見せれるのは便利かも
「プロになるためのWeb技術入門」 ――なぜ、あなたはWebシステムを開発できないのか
- 小森 裕介
- 技術評論社
- 価格¥2,508(2025/04/04 22:59時点)
- 発売日2010/04/10
- 商品ランキング16,940位
フロントエンド専門制作会社が教える速く正確なWeb制作のための実践的メソッド ワークフロー構築、コーディング規約、制作&ディレクションTipsなど、高品質な制作を支える現場の仕事術
- 株式会社モノサス/コーディングファクトリー
- マイナビ出版
- 価格¥2,695(2025/04/04 22:59時点)
- 発売日2017/04/28
- 商品ランキング724,502位
コメントを残していただけるとありがたいです