「Monaca」を使って10分くらいで超簡単にWordPressサイトをアプリ化する方法。Export(EVE)」の使い方を解説するぜ!ブラーをつけたスクショも撮れるぜ!GTA5GTA5で車両のコンバートをやってみたい方に朗報!沖縄食堂のDiscordにて「ZM3相談所」はじめました。「Monaca」を使って10分くらいで超簡単にWordPressサイトをアプリ化する方法。2017.06.12どうもほそぼそと生きている男HachiQ4です。今回は、HTMLでスマホアプリが作れちゃうサービス「Monaca」を使って、実際にWordPressサイトをアプリ化する方法を解説してみようと思います。UI」タブバーのナビゲーションを編集するデバッグビルドでテストする最後にスポンサーリンク実際に私が作ったアプリ私がメインで運営している野球を語るためだけのフォーラムサイトgeek894.comを、先日Android向けのスマホアプリにしてみました。GEEK894.com何事も広く浅くほどほどにがモットーです。先日の記事でも話しましたが、私はWordPressサイトをアプリ化する一番の方法は「Monaca」を使う方法だと思っています。WordPressサイトをスマホアプリ化する方法は「Monaca」が一番楽な理由。ぶっちゃけプログラムなんてわかんなくてもアプリが作れる!どうもデカレンジャーを何十週見てきたかわからないくらい見ているHachiQ4です。今回は、どのくらい需要が有るかわかりませんが、WordPressで作ったサイトをアプリ化する方法で一番おすすめな「Monaca」を使う方法につ...続きを読むgeek894.com2017.06.11そんなわけで「Monaca」を使ってWordPressサイトをアプリ化する方法を解説していくわけですが、実際に細かい部分を見ていく前に大まかな手順を確認しておきましょう。実際にパッケージをビルドして公開とりあえず今回は1~5までを解説していきます。withアプリーチ「Monaca」に登録して新しいプロジェクトを作る「Monaca」を使うには会員登録が必要です。(無料)まずは、Monacaに会員登録して新しいプロジェクトを作るとこまでさくさくっとやっちゃいましょう。「Monaca」への会員登録は特に難しい作業もないので説明を省略します。Monacaの会員登録ページから会員登録を済ませておいてください。HTML5ハイブリッドアプリ開発プラットフォームMonacaは、Cordovaを内包したHTML5ハイブリッドアプリ開発プラットフォームです。HTML5でマルチプラットフォーム対応のモバイルアプリ開発が行えます。UI」を使った新しいプロジェクトを作成する会員登録を済ませたらログインしてダッシュボードを表示します。UI」というHTMLハイブリッドアプリ用のフレームワークを利用しました。UI」を使用しています。ダッシュボード左上にある「新規プロジェクトの作成」をクリックして、開発に使用するテンプレートを選択します。フレームワークごとにテンプレートが分かれているので、自分が作りたいアプリに合わせて選ぶといいでしょう。project」を選択してダウンロードしてきたプロジェクトをインポートします。下部にタブバーが表示されることで、ワンタップで記事をカテゴリーごとに表示したり会員機能などへの誘導がやりやすくなるような気がしています。アプリ上で表示したいページを作るただ単にWebサイトをモバイル表示するだけであればこの作業は必要ないでしょう。私の場合、サイトのトップページがモバイルではスクロールが多くなって見づらかったためスマホアプリ用にいくつかのページを作成しました。Monacaで直接ページを作っていくのが正しいやり方だとは思いますが、geek894.comの場合掲示板プラグインの「bbpress」を利用しているのでその辺を表示するコードの書き方がよくわかっていません(笑)てなわけでWordPressで新たに固定ページを作って表示することにしました。すれば、WordPressの全機能をスマホアプリでも問題なく表示出来るだけでなく、bbpressの投稿機能も簡単に実装することができます。作ったページをアプリで表示するWordPressで作ったサイトをスマホアプリ化するために、なにはともあれWordPressのページを表示させなければなりません。MonacaではPHPが使えないのでWordPressで使っているコードを使って表示させるようなことはできません。そこで、最も簡単にWordPressページをスマホアプリに表示する方法として「iframe」を利用する方法があります。ぶっちゃけ詳しいことはよく知りませんが、iframeは指定したURLを表示してくれるコードなようです(笑)具体的には以下のようなコードを書きます。seamless></iframe>URLの部分は表示したいURLに書き換えてください。}これだけなら10分もかかりませんね(笑)ちなみに「ガジェメニュー」さんの記事を参考にさせていただいています。UI」タブバーのナビゲーションを編集する続いて、この画像のようにタブバーを編集していきます。スマホアプリでよく見かけますよね。UI」のタブバーはこのような記述になっています。</ons-tabbar>上から下に行くにつれて右から左に表示されます。一つ一つはこんな感じです。active="true"></ons-tabbar-item>「icon」はFontAwsomeのアイコンのクラス名を利用します。Awesomefontawesome.io「label」は実際にアプリの画面に表示されるテキストです。「page」はボタンを押された時に表示するページを指定します。この場合は「navigator.html」を表示するのですが、このプロジェクトでは元々「navigator.html」を選択すると「page1.html」に飛ばされるようになっています。お分かりかと思いますが、タブごとに表示するページを指定する必要があり、それごとにhtmlファイルを作成しておく必要があります。私はそれぞれのhtmlファイルで先程作ったWordPressページをiframeで表示するようにしています。デバッグビルドでテストするMonacaのデバッグ方法は大きく3種類あります。Monacaのプレビュー画面Monacaデバッガーデバッグビルド通常は、プレビュー画面で表示を確認しながら作業して、ある程度出来たら「Monacaデバッガー」というアプリで端末表示を確認することが多いと思います。Monacaのプレビュー画面はリアルタイムに画面の表示を確認できて便利です。ツールバーの「プレビュー」ボタンをクリックすることでプレビューの表示と非表示を切り替えることができます。Monacaデバッガーというアプリを使えば、お持ちのスマートフォン上で実際のアプリの動作を確認できます。アプリをビルドする必要がないのでこれも手軽にアプリの動作を確認できて便利です。デバッグビルドはアプリをリリース用に書き出す前の最終確認として利用することをおすすめします。いうのもMonacaの無料ユーザーには一日にビルドできる上限が決まっているため、何度もアプリのビルドを繰り返しているといざリリース用のアプリをビルド際に回数制限でできなくなったりするからです(笑)ちなみにリリース用とデバッグ用のパッケージの違いは、署名がされているかどうかの違いしかないようです。最後に「アプリ開発」と聞くとどうも難しそうに感じてしまいますが、WordPressで作ったサイトを表示するだけのアプリなら本当に簡単にできてしまいました。実際にgeek894.comアプリの制作はのべ2時間ちょっとでできてしまっています(笑)もし、私と同じようにWordPressサイトをアプリ化したいと考えている方は、一度「Monaca」に触れてみることをおすすめします。@894ch_officialカープファンです。広く浅くほどほどにがモットーです。2017-06-06Amazonで最安値を探す楽天市場で最安値を探すYahooショッピングで最安値を探すとんでもないコスパの良さが魅力的なタブレットです。2017-09-28Amazonで最安値を探す楽天市場で最安値を探すYahooショッピングで最安値を探す新品で3万円程度にも関わらずGTX980と同程度の性能を持っているというコスパ抜群なグラフィックカードです。2010-11-10Amazonで最安値を探す楽天市場で最安値を探すYahooショッピングで最安値を探す私がもう5年以上愛用しているスピーカーです。サブウーファー付きなおかげで重低音がしっかりしているので、音楽や映画鑑賞、ゲームまでオールマイティにこなしてくれますSRS-D5のレビューはコチラHachiQ4GEEK894.com関連記事WordPressWordPressサイトをスマホアプリ化する方法は「Monaca」が一番楽な理由。ぶっちゃけプログラムなんてわかんなくてもアプリが作れる!どうもデカレンジャーを何十週見てきたかわからないくらい見ているHachiQ4です。2018.06.01894ch.comのことWordPressでサイトを立ち上げて3ヶ月でとりあえず感じたこと「ぶっちゃけ現状維持」どうも野球好きのためのフォーラムサイトgeek894.com管理人の894です。今回は、私がこのサイトを立ち上げてから3ヶ月ちょいたった今感じたことを書いていこうと思います。2018.12.12WordPressわかりやすいブログにするための文章の書き方と条件を考えてみた。このブログで実践している方法も解説?どうも、ブログの書き出しなんて真面目に読んでる奴いねえだろって思いながら、いつもこの部分を考えているHachiQ4です。今回は、わかりやすいブログの書き方とその条件を、私のブログの書き方を解説しながら考えていきたいと思います。2019.02.05894ch.comのことWordPressでサイトを立ち上げて2ヶ月でとりあえず感じたこと「日本版FanGraphs目指すぜ!?」どうも野球好きのためのフォーラムサイトgeek894.com管理人の894です。私がこのサイトを立ち上げてから2ヶ月ちょいたった今感じたことを書いていこうと思います。2018.12.12WordPressWordPressでブログサイト:2ヶ月目「早くも月間6000PV到達!自分でもびっくり(笑)」どうも普段全然弾かないくせに新しいギターが欲しいHachiQ4です。今回は、GEEK894.comを開設してから2ヶ月が経ったということで今月もサイトの振り返りをしていこうと思います。2018.06.01WordPress2017年のGEEK894.COMをPV数と共にどどんと振り返ります!新年もよろしくお願いいたします!毎年絶賛寝正月のHachiQ4です。今回は、大晦日ということで2017年のGEEK894.COMの活動を振り返って行こうと思います。ガキ使が始まるまでの暇つぶしでございます。2018.06.01スポンサーリンクWordPressサイトをスマホアプリ化する方法は「Monaca」が一番楽な理由。PMアプリのナビ付きタブバーについてです。貼ってある外部リンク先に行くも、ダウンロードページが分かりません。お手数をおかけしますが教えてください。AMどうやら現在はダウンロードできないようになっているみたいですね...。新米SE、マーケティングを学ぶの巻http://se-marketing.hatenablog.com/entry/2015/11/21/204540このページに記載されているソースがほぼそれです。私はほとんどコードとかがわからないのですが、ある程度詳しい方がみれば理解できる内容ではないかと思います。ここからは蛇足ですが、個人的には、この記事を書いた時ほどサイトをアプリ化するメリットを感じられていません。アプリ化してリリースしても放置しているだけではストアからの流入はありません。https://geek894.com/2017/wordpress/3214最近では、WordPressテーマでモバイル表示時にナビゲーションバーを表示してくれるテーマなどもあります。https://geek894.com/2018/wordpress/6319もちろんサイトとアプリ化の相性というのは一概には言えないと思いますが、アプリ化にかけた時間を目に見える形で回収できるかは難しいところだと思います。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。コメントデータの処理方法の詳細はこちらをご覧ください。ホームWordPress「Monaca」を使って10分くらいで超簡単にWordPressサイトをアプリ化する方法。Remastered」の導入方法の解説2017.08.022018.06.01私が導入しているおすすめ実車MODをご紹介【日本車スポーツカー編】2017.05.012018.06.01GTA5に車両MODを導入しよう!講座【Add-On車両MOD編】2017.04.102018.06.01環状族仕様のシビックEK9でGTA5の世界を爆走せよ!珍しい日本人作者によるMODです。最近のコメントMOD大好き2020.01.12この方法で憧れのマーク2を走らせることができましたとても感謝しています。2点ほど聞きたいのですが、GTA5のアップデートが来るとそれまで入れたMODたちをまた設定しな...GTA5に車両MODを導入しよう!講座【Add-On車両MOD編】U-5052020.01.04可能です。reduxはグラフィックMODなので、他の車MODやスキンMODとは干渉しません。modの上にスキンmodなどを入れることは可能でしょうか?GTA5が劇的に変わると話題の「REDUX」を導入してみたから感想と解説(1011対応)新着記事Hokonui製のQi充電対応のモバイルバッテリーを購入したので早速レビュー!ケーブル内蔵でスッキリ![type-B/type-C/Lightning/Qi]2019.02.162019.06.09わかりやすいブログにするための文章の書き方と条件を考えてみた。Premium(SO-03H)から乗り換えました。Remastered」の導入方法の解説2017.08.022018.06.01私が導入しているおすすめ実車MODをご紹介【日本車スポーツカー編】2017.05.012018.06.01GTA5に車両MODを導入しよう!講座【Add-On車両MOD編】2017.04.102018.06.01環状族仕様のシビックEK9でGTA5の世界を爆走せよ!珍しい日本人作者によるMODです。最近のコメントMOD大好き2020.01.12この方法で憧れのマーク2を走らせることができましたとても感謝しています。2点ほど聞きたいのですが、GTA5のアップデートが来るとそれまで入れたMODたちをまた設定しな...GTA5に車両MODを導入しよう!講座【Add-On車両MOD編】U-5052020.01.04可能です。reduxはグラフィックMODなので、他の車MODやスキンMODとは干渉しません。modの上にスキンmodなどを入れることは可能でしょうか?GTA5が劇的に変わると話題の「REDUX」を導入してみたから感想と解説(1011対応)新着記事Hokonui製のQi充電対応のモバイルバッテリーを購入したので早速レビュー!ケーブル内蔵でスッキリ![type-B/type-C/Lightning/Qi]2019.02.162019.06.09わかりやすいブログにするための文章の書き方と条件を考えてみた。Premium(SO-03H)から乗り換えました。894ch_officialスポンサーリンク。