ネイティブのカレンダーを操作するPhoneGap Calendar pluginの紹介
ネイティブのカレンダーを操作するPhoneGap Calendar pluginの紹介 2017年12月21日 2018年1月22日 技術情報 Cordovaプラグイン, Monaca, カレンダー 中津川篤司 皆さんはスケジュールの管理をどのように行っているでしょうか。おそらく多くの方が、スマートフォンのアプリを使ってスケジュール管理をしていると思います。 スケジュール機能をアプリに組み込む場合は独自にカレンダーを実装しても良いのですが、ネイティブカレンダーと連動していれば予定が一元管理できるため、より利便性の高いアプリになるでしょう。 今回ご紹介する PhoneGap Calendar plugin は、ネイティブカレンダーの操作機能を提供するCordovaプラグインです。 PhoneGap Calendar pluginのインストール PhoneGap Calendar plugin
HTML内にカメラの撮影画面を埋め込むCordovaプラグイン
HTML内にカメラの撮影画面を埋め込むCordovaプラグイン 2017年12月19日 2018年1月22日 技術情報 camera, Cordovaプラグイン, Monaca 中津川篤司 Cordova標準のCameraプラグインは端末にインストールされているカメラアプリを呼び出す挙動をしますが、アプリのHTML内にカメラの撮影画面を埋め込みたい場合もあると思います。 iOS11のモバイルSafariではHTML内でカメラアクセスするgetUserMediaが使えますが、これはSafariに限った話で、Monacaアプリ内で使われるブラウザであるWKWebViewやUIWebViewにはまだ提供されていません。 （参考：http://www.openradar.me/33571214） そこで今回はiOS, Androidを問わずHTML内での撮影を可能とするCordovaプラグイン、c
Instagram APIで写真を一覧表示するアプリを作ってみよう
Instagram APIで写真を一覧表示するアプリを作ってみよう 2017年12月5日 2017年12月21日 技術情報 Instagram, Monaca, web api 中津川篤司 「インスタ映え」が2017年の流行語大賞に選ばれたことでも話題になっている、お馴染みの写真共有SNS「Instagram」。 InstagramではWeb APIを提供しており、アップロードこそできないものの写真を自由に取得できるようになっています。 今回はInstagramのAPIを使って、自分の写真を取得するMonacaアプリの作り方を紹介します。 作るアプリ 今回作るアプリは次のようになります。まずOAuth認証を行います。 Instagramのログイン画面が出るのでログインします。 確認画面が表示されます。承認するとウィンドウが自動で閉じます。 認証後のトークンを使ってInstagramから自分
Monaca × Squareでアプリに決済機能を追加する
Squareは、専用のカードリーダーを使ってスマホやタブレットでカード決済が利用できるサービスです。決済手数料以外のコストがかからず手軽に利用できるため、カフェや雑貨屋など様々なお店で使われています。 利用を開始するには、イヤホンジャックに挿すタイプのカードリーダーを入手し、「Square POSレジ」を端末にインストールします。このアプリはカスタムURLスキーマやインテントを使って他のアプリと連携できるようになっています。 今回はMonacaと「Square POSレジ」アプリの連携方法をご紹介します。現在AndroidではSquareとの連携ができないため、プラットフォームはiOSを対象とします。 連携の仕組み iOSで外部アプリと連携する場合にはカスタムURLスキーマを使うケースが多いです。「Square POSレジ」アプリには square-commerce-v1:// というUR
Monaca×Watsonで人工知能アプリを作るハンズオン in 大阪
9月7日、大阪の株式会社TAMさんのコワーキングスペースにて 「Watson + Monacaで人工知能アプリを作ろう！」と題したハンズオンが行われました。 講師は、ITCA認定ITコーディネーターの井上さん。『初めてのWatson APIの用例と実践プログラミング』『Watsonで体感する人工知能』などのWatson関連の著作をお持ちです。 約二時間の間に、MonacaとWatsonのコグニティブAPIを使って簡単に画像認識ができるスマホアプリを作る過程を体験できました。この記事では当日の様子をお伝えします。 ハンズオンの前にAIについておさらい AIというワードが一般化してきた昨今ですが、そもそもAIとはなんなのでしょうか？ 少しAIブームの変遷を振り返ってみます。 井上さんによると、AIブームの変遷には大きく分けると三度の波があったそうです。 今となっては本当に当たり前すぎることです
Monacaアプリで音声操作を可能にするdocomo発話理解APIの紹介
Monacaアプリで音声操作を可能にするdocomo発話理解APIの紹介 2017年9月11日 2017年9月28日 技術情報 docomo API, Monaca, web api, 音声 中津川篤司 SiriやGoogleアシスタントなど、ユーザからの音声による命令を理解してアクションを起こす技術に注目が集まっています。音声操作を行う際、音声をテキストに変換する作業が必要なのはもちろんですが、テキストからユーザの意図を読み解く技術も重要です。 そこで今回はNTT docomoから提供されている発話理解APIを紹介します。 このAPIを利用することで、話し言葉から文脈を理解して、ユーザの意図した通りに動作する柔軟な音声操作機能を実現できます。 ベースについて まずベースになるコードは以下の記事で解説した内容になります。 音声操作にも。MonacaアプリとGoogle Cloud Spee
MonacaでQRコードリーダを作ってみた – BarcodeScannerプラグイン編
こんにちは、浦本です。 Monacaチームではユーザ様のご要望に応じて日々、機能追加を行っています。 先週のデバッガ＆フレームワークの新バージョンリリースでは、 PhoneGapのプラグインであるBarcodeScannerプラグインも搭載しました。 そこで今回は、このプラグインを用いて前回の記事で作成したQRコードリーダアプリと同様のアプリを作成してみたいと思います。 IDEを開いた様子 今回作成するアプリのスクリーンショット アプリ作成手順 Monacaにログイン後、ダッシュボードから新規プロジェクトを作成してください。その際、テンプレートとして「最小限のプロジェクト」を選択してください。 こちらからzepto.min.jsを入手し、それを「www/js」フォルダに配置してください。 以下のHTML、JS、CSSファイルを記述すればアプリ完成です！ 【www/index.html】 メ
MonacaでQRコードリーダを作ってみた – JS編
こんにちは、浦本です。 昨日と今日で行われた ad:tech tokyo 2012 では、アシアルブースにてMonacaをアピールしてきました。 ブースにお立ち寄り頂いた方々、誠にありがとうございました！ イベントの模様は別途記事でご紹介できればと思います。 さて、今回はMonacaでQRコードリーダアプリを作ってみようと思います。 とはいってもQRコードを読み取るJSライブラリを利用するので簡単です。 今回作成するアプリは、まずPhoneGapを利用してカメラまたはアルバムから画像を取得し、その画像をJSライブラリに読み込ませてQRコードを解析するというものです。 JSなのでさほど速度は出ませんが、あくまでサンプルとして見て頂ければと思います。 ※MonacaではQRコード解析用のPhoneGapプラグインに対応予定ですので、今回の記事タイトルではあえて「JS編」と記載させて頂きました。
MonacaアプリでFaceBook認証を使ったログイン実装
可能です。 方法は私の知る限り2種類あります。 ひとつはfacebook SDK for javascriptを使用する方法です。 こちらに関しては私はやった事はありませんが、Monacaの会社の公式ブログで紹介されています。 http://blog.asial.co.jp/1432 もうひとつはアプリ内でinappbrowserを起動して、外部レンタルサーバー上で認証を行う方法です。 私の場合はPHPで認証を行いました。 具体的な方法としましては、inappbrowserを立ち上げる前にユニークなトークンを生成して、ajaxで外部サーバーのMySQLに保存します。 そのトークンをinappbrowserで開くURLのGET値につけます。 開いた外部サーバ上でPHPのFacebook認証を行い、認証が完了すれば取得したFacebookの情報とトークンをMySQLに保存します。 ここまでの処
MonacaアプリでFacebookログインを使ってみよう
認証システムは作るのはもちろん、維持運用するのも大変です。そこでFacebookやTwitterといったソーシャルサービスを使った認証システムが重宝されます。Monacaアプリにおいてもニーズの多いFacebookログインをデモコードを使って紹介します。 必要なもの Monacaのアカウント Facebookアプリ OpenFB 今回はオプションとしてjQueryも使っています。 Facebookアプリ まず最初にFacebookアプリを登録しましょう。Facebook Developersのサイトで新規アプリを作成します。ここで大事なのはアプリのApp IDになります。 そしてSettingsのAdvancedにおいて、次のように指定します。 Client OAuth Login : YES Web OAuth Login : YES Embedded Browser OAuth Log
プログラミング不要！スマホアプリが開発できるツール10選
更新日: 2022年5月16日公開日: 2015年3月18日プログラミング不要！スマホアプリが開発できるツール10選 アプリ開発と聞くとかなりハードルが高いですよね。しかし、アプリ開発をサポートしてくれるサイトを使うと、場合によっては自分でプログラミングコードを書くことなく、オリジナルアプリを開発することができます。 超簡単にスマホアプリが作れてしまうツール10選国産アプリ開発の「Monaca」 MONACA Monacaは、自分である程度プログラミングを入力してアプリを開発するサービスサイトになります。HTMLとPHP、CSSの基礎を押さえていれば、初心者でもスムーズにアプリを作っていけるサイトです。 Monacaの特徴としては、アプリ開発はクラウド（サーバー）上とローカル環境から選ぶことができます。またアプリ開発コースも全6コース設けられており、ハイブリッドアプリ開発コースやBUSIN
チュートリアル : チュートリアルの一覧 | ニフティクラウド mobile backend
位置情報に連動したプッシュ通知を送る(iOS) このチュートリアルでは、iOS8から追加されたLocation Notification機能と ニフティクラウドmobile backendのプッシュ通知・位置情報検索を利用して、 位置情報に連動したプッシュ通知を配信するO2Oアプリを実装していきます。 このプロジェクトは、iOS8で動作させることができます。 チュートリアルを見る ゲームにオンライン機能を追加する（Unity） このチュートリアルでは、ユニティ・テクノロジーズ・ジャパン合同会社の配布するサンプルプロジェクト「2D Shooting Game」をベースに、mobile backendを使ってゲームにオンライン機能を追加する方法を学びます。 チュートリアルを始める前に、必ず下記のリンクからサンプルプロジェクトをダウンロードしてください。ここで配布しているプロジェクトは、前述した
AngularJSの方法でMonacaアプリを作ってみよう（中編）
← 前回 連載 INDEX 次回 → 今回は、前回の内容を踏まえて、「路線毎のバス停の座標データ」ページで説明されているWeb APIを使ってバス停の座標データ（緯度と経度）を取得してみよう。 バス停の座標データを取得する 路線番号データの取得は前回のアプリ開発ですでに済んでいるので、以下では座標データの取得に注目できるように、路線番号は決め打ちにする。 要求のURLには「http://tutujibus.com/busstopLookup.php」とパラメーターのrosenidとcallbackを使用する。この要求に対して、応答は、busstop配列に、{"id":"バス停番号","name":"バス停の名前","latitude":緯度,"longitude":経度}というプロパティと値を持ったオブジェクトが、バス停の数分だけ入れられて返される。 プロジェクトの作成 プロジェクトは前と
AngularJSの方法でMonacaアプリを作ってみよう（前編）
実践的なMonacaアプリ開発の一例として、オープンデータのWebサービスを使ったアプリの作成方法を説明する。Monacaアプリ開発実践編の第1弾。 ← 前回 連載 INDEX 次回 → 連載最終回の今回（前編・中編・後編の3本）は、インターネット上で公開されている実際のデータを、AngularJSの方法でアプリに取り込み、画面に表示していく。 といっても特別に難しいわけではない。前回学んだAngularJSのデータ／コントローラー／表示とサービスを定型的な書き方で記述するだけだ。 オープンデータとWebサービス 皆さんは恐らくWebサービスというものをご存じだろう。その最たるものが「Google Maps API ウェブ サービス」で、Webページやモバイルアプリなどで幅広く活用されている。 Webサービスには、その時点で最新の情報が入手できるという側面がある。例えばlivedoor天気
Onsen UIの舞台裏で働くAngularJSの世界
AngularJS流のデータ／コントローラー／表示の実装方法と、AngularJSのディレクティブによるHTML要素の操作方法、データの追加、AngularJS機能のサービスについて解説する。 ← 前回 連載 INDEX 次回 → 前回は、Monacaで作成した“初めてのOnsen UIアプリ”のファイルの中身を調べ、それをAngularJS流に書き換えた。3回目の今回は、Onsen UIの舞台裏で働くAngularJSの世界に入っていく。 AngularJSはグーグル純正のJavaScriptフレームワークで、モデル、ビュー、コントローラー（MVC）というデザインパターンが採用されている。連載1回目で述べたように、Onsen UIを使ったMonacaアプリでJavaScriptをAngularJS流に記述できるようになると、AngularJSを直接扱わない標準的な方法よりも、アプリの“か
Monacaで作る、初めてのOnsen UIアプリ
← 前回 連載 INDEX 次回 → 連載2回目の今回は、前回作成した“初めてのOnsen UIアプリ”プロジェクトを開いて、そこに含まれるファイルの中身を見ていく。 「Onsen UI最小限のテンプレート」から作成したこのプロジェクトには、自動的に作成されるナビゲーションやボタン用のコンポーネントが含まれ、コードは通常のJavaScriptの書き方で書かれている。これをAngularJS流に書き換えていく。そして書き換えたアプリのアプリケーションファイルを作成（ビルド）して、デバイスに実際にインストールする。 Monacaにログインしていない場合には、トップページを開いて、［ログイン］ボタンからログインする。するとMonaca IDEのダッシュボードが開き、プロジェクトの一覧に“初めてのOnsen UIアプリ”が表示される。このプロジェクトを開くにはプロジェクト名の右にある［開く］ボタン
Monaca - 関連書籍
Monacaの書籍をご紹介します。 高校のプログラミング教育で使用されている書籍から、これからアプリを開発したい方向けの書籍までをご用意しております。
Monacaで作るHTML5/JavaScriptでのハイブリットモバイルアプリ（その1）
本連載では、業務アプリケーション開発を行う熱血若手エンジニアのために、面倒な作業が楽になる便利なツールをご紹介します。「定時になったらスマートに帰社してアフター5を存分に楽しみたい！」や「設計書やレビューの準備に煩わされるのは嫌だ、コーディングに集中したい！」などを実現してくれる便利なツールやソフトウエアを、サンプルコードを交えて説明します。 はじめに 普段、設計書をもとに業務アプリケーションを開発したり、単体テストや連結テストに追われて忙しい日々を過ごしたりしていると、たまには気分転換で、なにかおもしろいモバイルアプリを手軽に作りたいなということはありませんか？ しかし、いざ時間の取れる週末にアプリを作ろうと思ってみたものの、自宅のパソコンに開発環境を用意したり、開発に必要なライブラリなどをダウンロードしたり設定したりしていると、それだけであっという間に時間が過ぎてしまいます。また、An
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Monaca Docs
nifty.com [13]