初心者の書～ざっくり使い方メモ「基礎学・基本学」BLOG版

リスキリングざっくり入門～メモなのであまり読み応えはない・・・ブログです。ざっくり解説・備忘録・リカレント・初心者の書大全／「入門書」の前に読む入門書。初心者がまず読むべき手軽な本。まったくの初心者だけど、何からすればいい？ 「入門書」の前に読む入門書。HELLO WORLD BOOKS／はじめての学習の前に

monacaで開発したアプリを、ビルドしてインストール／リリースビルド／アップロードするまで

モナカでアプリをビルドする方法まとめ

 

■ アンドロイド／Android

 

docs.monaca.io

 

ビルドしたあと、

QRコードをアンドロイド端末で読み込み

URLでダウンロードする（ダウンロードには5分ほど時間がかかった）

 

その後、

スマホのダウンロードフォルダを開いて

apkをインストール

（設定で不明なアプリもインストできるようにしておく）

 

一応動作確認はできた。

 

■ iPhone／iOS

https://docs.monaca.io/ja/products_guide/monaca_ide/build/ios/build_ios/

もっとも簡単そうなシミュレータービルドをやってみます

シミュレータービルドをする

https://press.monaca.io/atsushi/2494

zipファイルをmacで解凍してシミュレーターを起動（open -a /Applications/Xcode.app/Contents/Developer/Applications/Simulator.app
）してファイルを開く

 

・ デバッグビルド

 

 【 iOS用ビルド 】

・リリース向けビルド

https://docs.monaca.io/ja/rpg_tkool/build_release_ios/

 + 秘密鍵とCSRの作成

必要生成ファイル

① 証明書を作成して、ダウンロード（その都度？？）

https://i-app-tec.com/ios/apply-application.html

 

② プロビジョニング プロファイル（証明書をもとに作成？？？）

※アプリIDをiTunes Connectで登録していることが前提

docs.monaca.io

 

 

 

③２つのファイルを登録後、「ビルドを開始」

※QRでインストール検証中… →ホーム画面にインストールアイコンはでるが、進んでいる気配がない・・・？？？

 

 ④未検証::ipaファイルのアップロード

qiita.com

 

■ ipaをmac経由でインストール

qiita.com

 

※ ビルドしたアプリはダウンロードできる期間が決まっている。

 

 

【monacaのライセンス】

https://ja.monaca.io/free-plan-policy-change.html

個人でのMonacaのご利用については利用目的の制限はございません。

 とあるが、

本格的に使うなら有料プランの必要がありそう。

ja.monaca.io

 

リリースビルド

 

■ アンドロイド

Android キーストア ( KeyStore ) の設定

※キーストアを再設定した場合、プロジェクトをいったん閉じる必要があるようです。

 

■ プロビジョニングファイル

qiita.com

 

プロビジョニングファイル作り方

i-app-tec.com

developer.apple.com

 

■ ipaファイル アップロード

blog.nkzn.info

 

 

気になる話題。

ITMS-90809: Deprecated API Usage

awesome-rainbow-colors.com

monacaで作成したアプリに広告を表示

nendであればできるような感じ？？

 

 monacaに広告用プラグインを導入する方法

【nendは何故か広告リンクが開かない？？】

ざっくりと調べた感じでは、手軽にnendで実証し、

その後、慣れてきたらadmobへ移行するのがいいかも知れません。

https://blog.webico.work/monaca-ad

 

ということで、

nendで試してみます。

 

→nend管理画面のコードと、上記のソースを利用すると、

デバッガーでも表示されました。

※ 1度目は表示されなかったので、タイミングが少し怪しいですが・・・

 

 

■ Cordovaとは？

ライブラリっぽい。

docs.monaca.io

 

■ アップデート方法

press.monaca.io

 

 

■ nend用

【参考サイト様】

http:// https://docs.monaca.io/ja/sampleapp/tips/nend_ad/

 

https://teratail.com/questions/85420

https://teratail.com/questions/100793

 

・ エラー

https://teratail.com/questions/76396

 

 

■ admob用

【参考サイト様】

docs.monaca.io

 

 

https://qiita.com/TaskForceYokohama/items/4367c4c11b9838c91607

 

https://itkdev.hatenablog.com/entry/2018/08/14/145552

 

 

summerplus64.hatenablog.com

 

■ 動作検証 ■

ja.stackoverflow.com

 

teratail.com

 

ja.stackoverflow.com

 

teratail.com

 

①inappbrowserプラグインをいれる

→不要かもしれない

docs.monaca.io

② window.open(href, '_system');を使う（aタグではできない？？）

phiary.me

 

 

■ 広告導入手順など

blog.webico.work

 

Monacaでプロジェクトインポート＆ネイティブ機能

manaca（モナカ）学習用のプロジェクトなどを読み込む手順の覚え書き

 

インポート→インポート方法:URL→URLを入力する

 

ちなみにフリー版だとプロジェクトが３つまでっぽいので不要なプロジェクトを削除する必要があるよう

 

■ カメラ機能の使い方（超ざっくり）

１．cameraプラグインを「有効」にする

２．スクリプトを書く

３．iOSの場合はinfo.plistに追加が必要

iOS 10以降は、info.plist に NSCameraUsageDescription と NSPhotoLibraryUsageDescription を追加する必要があります。

docs.monaca.io

■ スクリプトの参考

tonari-it.com

 

 

Monacaの使い方～アプリの作り方②

前回までの続きです・・・

webnote.hatenadiary.com

 

■ イベントはonclick？

 

いまさら、onloadがDOMを全て読み込むのを待機するためのモノと知る・・・

そうだったのか・・・

 

■ フォームパーツをそのまま使えるのがありがたい・・・

 

■ モナカアプリにはデバッガーがある

 

■ ハードウェア機能

・ GPS

  

※ モナカのダッシュボードが突然英語になった場合は、

https://monaca.mobi/ja/account/edit

↑アカウント管理で言語設定をjapaneseにする

 

 ■ ブラウザの制御

docs.monaca.io

 

 

 

 

Monacaの使い方～アプリの作り方①

Monacaを使ってアプリを作ってみる

 

とりあえず、の、とりあえず。

Monacaを使ってみる備忘録。

 

好評なら別ブログでまとめる予定ですが、

つらつらとメモします！

 

■ アカウント登録

Monaca - HTML5ハイブリッドアプリ開発プラットフォーム

→何故か確認メールが迷惑フィルタにひっかかってた

※ まずは、freeプランで動作などを確認して、気に入ったらプロ版で本格的に使おうと思います

 

■ プロジェクト作成

↓

■ Monaca IDEの起動

 

表示部分は、HTMLで記述出来る。

→「Hello world」と記述

保存するとすぐにプレビューに表示された

 

動作部分は、JavaScriptで記述。

→alert関数で動作確認

 

デバッガーには専用アプリがあるようです

これだけ整っていると、

なんだか楽しくなってきます。

 

 

 

 

 

以前にモナカを起動～プロジェクト作成までしたので、

その続きを備忘録・・・

 

今後は、このブログにて掲載予定

 

ってことで

おさらい

 

■ モナカの起動方法

まぁ起動も何も、webページにアクセスするだけ

https://console.monaca.mobi/dashboard

 

■ プロジェクトの作成

IDEの起動

 

■ 開発はHTML / CSS / Javascriptで行なう

 

■ デバッグはモナカアプリで行なう

 

 

【開発の作法】

複雑そうなのはいやなので、カンタンな方式をメモ

 

■ cssは「css/style.css」に記述

※ 多分別ファイルもつくれる

 

■ jsも外部ファイルにしておく

<link rel="stylesheet" href="components/loader.css">

 何故か、jsファイルを新規作成した場合、IDEが使えない？？

フォルダを移動したら入力できた・・？？

 

→久しぶりにjsの教本を見直す必要があるかもしれない・・・

jQueryばかりつかってたからDOMでの指定とかまったく忘れている

 

☆☆☆☆☆☆

 今回の留意点

※ 間違っていたらご指摘下さい

 

・ aタグは、アプリ内のブラウザで開く感じ？

・ jsはネイティブ？jQueryは使えない？？

 

 

 

No.03 HTMLファイルを表示してみよう

htmlファイルを作ってもそのままでは

ただの文字のかかれたファイル（テキストファイル）です。

 

この.htmlファイルをブラウザといわれるアプリケーションで開くと、

普段みているホームページとかの感じになります。

 

さっそく開いてみます

ファイルの上で右クリックして

プログラムから開くを選び

Internet ExporerかChromeなどのブラウザを選択します

f:id:fromkishibe:20180822141752j:plain

すると

心が真っ白な人には、真っ白な画面が開きます

 

これがHTMLページです

 

いまは中身がないので、何も表示されていません。

では、次回はここに文字を追加してみます。