SEで週末ミュージシャンなアキラコンドウのブログ

Cordovaでのアプリ開発_001〜Cordovaってなんじゃらほい？？〜

お疲れ様です。アキラコンドウです！

スマホアプリ開発でネイティブ以外で人気なのが「Cordovaを用いたスマホアプリ開発」がメインかなと思っている(今仕事で開発しているというのが大きいですが。笑)んでそのあたりをしばらく解説してこうかなと思います。

■Cordovaとは・・・

　オープンソースのハイブリッドアプリ開発フレームワークです。複数のプラットフォームで動作するクロスプラットフォームアプリをワンソースで開発できます。

・・・なんのこっちゃ？？？笑

ではでは解説！

◆ハイブリッドアプリとは

すごくざっくり書くとWebサイトを標準ブラウザ(SafariやGoogleChromeなど)以外で実装しているようなもんです。

HTML5、CSS、JavaScriptなどのWeb技術で開発しており、且つカメラやGPSなどのデバイスのネイティブ機能を利用しているアプリのこと。ブラウザ上で動作するWebアプリとは異なり、Android OSやiOSに標準で組み込まれているWebView上で動作する。

イメージ図だとこんな感じ！

使える機能にはある程度制限があるみたいですが、調べた感じだいたい基本的なものは使えそうですねー。

◆クロスプラットフォームとは

色々なプラットフォーム(簡単にいうとOS)で動作するアプリのことです。

Cordovaが対応しているOSは以下の通り

・Android
・iOS
・OS X
・Windows
・Electron

Electronで開発やってみようかな。。

次回からはインストール等開発環境の設定をやりたいと思います！

・・・多分！

HTML/CSS_002(写真を入れる。)

今回は写真をHTMLに載せちゃいましょう。

使うタグは<img>タグを使います。

詳しくはここを調べてみてね。

http://www.htmq.com/html/indexm.shtml

早速ソース例

html--------

<h1>h1だよ。最近ギターが脱退したバンドはHYだよ。</h1>

--------------

説明：

まずは<img>に</img>みたいな閉じタグはありません。

　こういう書き方するものは他にもあるので上記のサイトを調べてみてね。

src ・・・表示させる画像のアドレスを記載します。上記の場合、htmlソースが置いてあるフォルダ内の「img」というフォルダにある「sample_001」という画像ファイルを参照しています。ちなみに下の画像です。自分でとった写真なので著作権フリーです。笑

width/height・・・画像サイズを指定します。これをやらんとめっちゃ大きくなったり小さくなったりして大変です。笑

そのまま数字を書くと単位は「px」（ピクセル）です。他にも色々指定方法があるので興味がある人はググってみましょう。笑

alt・・・画像が見れない人向けの説明書きです。別になくてもいいけどあったほうがいいんでないかな。まー最近の利用環境で画像が見れないなんてことがあるのかなとは思うが。笑

実行結果：

それでは今日はこの辺で！

HTML/CSS_001(タグを使う。)

ということで初めてのブログです。笑

復習の意味も込めてまずはHTML/CSSからやっていきたいと思います。

■タグとは？？

・<・・・>で囲われている「・・・」の部分のことで、色々な下のソース例では「h1」や「p」がそれに当たります。

　他にも色々あるしHTML使う上でタグの知識は必須だから、全部覚える必要はないけど調べればすぐにわかるようにしといてね。

　よく見るサイト

　　http://www.htmq.com/html/indexm.shtml

　　HTML/CSSやる人はめっちゃ見ます。笑

　　ここに掲載されてないタグって存在するんかな？？っていうくらい沢山あります。

　　サンプルもあるから使いやすいと思うので、わからないタグが出てきたらとりあえずココ調べればいいと思います。

　　他にも似たようなサイトは沢山あるから他の情報サイトみるなりしてください。笑

とりあえず書いてみましょう！

html--------

<h1>h1だよ。最近ギターが脱退したバンドはHYだよ。</h1>

--------------

今回は「h1」タグと「p」タグを使ってみました！

タグの意味は上記のサイトとか他のサイトを見てみてください。笑

とりあえず実行してみましょう。

実行結果：