20191023のiOSに関する記事は8件です。

Cocos2d-x 3.17.2をiOS, Androidでコンパイルできないんですけど

現在(2019/10/23)の最新版v3.17.2でCocos2d-xで久々にiOSとAndroidでHello worldをコンパイルした。
プロジェクトデフォルトのHello worldのコンパイルをするのにググったり苦労したのでヒントなど。

iOS

xcode 11でコンパイルするとエラーになる。

error : Argument value 10880 is outside the valid range [0, 255] btVector3.h

btVector3.hの

#define BT_SHUFFLE(x,y,z,w) ((w)<<6 | (z)<<4 | (y)<<2 | (x))

#define BT_SHUFFLE(x, y, z, w) (((w) << 6 | (z) << 4 | (y) << 2 | (x)) & 0xff)

に置き換える

https://stackoverflow.com/questions/58064487/xcode-11-cocos2dx-compilation-problem-argument-value-10880-is-outside-the-vali

Android

NDK

NDKは、cocos2d-x 3.17.1時点で16なので、Android NDK 16bを選んだ。

https://discuss.cocos2d-x.org/t/which-ndk-to-use-on-3-17-1/45584
We still used NDK16.

ダウンロードはこちらから
https://developer.android.com/ndk/downloads/older_releases.html?hl=ja

Android Studio

そして、Android Studio 3.5が最新であるがコンパイルができない。

Caused by: org.gradle.internal.UncheckedException: Build command failed.

make: *** No rule to make target `cocos2djs'.  Stop.

Android Studio 3.2を使うとコンパイルできる。
https://teratail.com/questions/178744
のコメント欄より)

ダウンロードはこちらから
https://developer.android.com/studio/archive.html

とりあえずは動かせた。

cmake推奨となっているようでAndroid Studioの最新版でコンパイルしたい場合はビルドツールをndk-buildからcmakeに変更するといいのかもしれない。
https://qiita.com/ugonight_nanase/items/0cab13437dfa2ae003bd

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

react-native-sqlite-2@3.0.1 リリースしました

原文: Announcing react-native-sqlite-2@3.0.1! - DEV Community ?‍??‍?

InkdropというアプリをReact Nativeで作っていて、PouchDBを動かすためにWebSQL互換のライブラリが必要だったのでreact-native-sqlite-2を作りました。

なんで?

すでにreact-native-sqlite-storageというSQLiteを扱うためのライブラリが存在しますが、拙作の方には少しアドバンテージがあります:

本ライブラリはこれらの問題を解決します。

What's new in 3.x

Androidにとって大きな改善点があります!

より新しいSQLite3をAndroidで

最新のAndroid OSのバージョンであっても、標準で搭載されているSQLiteのバージョンはいくつか古いものです。
iOSの方が新しいものが使えるのに。
React Native SQLite 2はこのアップデートによってsqlite-androidを使うようになり、SQLiteの新機能が使えるようになりました:

これでiOSでは出来たのにAndroidでは実装できないという悩みが減ります。
自分はFTS5が使いたかった。これはビルドフラグが単純に付いてないだけだったけど。

以降は使い方です。

Getting started

Add react-native-sqlite-2 to your dependencies:

$ npm install react-native-sqlite-2 --save

Link native dependencies

From react-native 0.60 autolinking will take care of the link step but don't forget to run pod install.

$ react-native link react-native-sqlite-2

iOS

If using cocoapods in the ios/ directory run

$ pod install

Android

Please make sure AndroidX is enabled in your project by editting android/gradle.properties and adding 2 lines:

android.useAndroidX=true
android.enableJetifier=true

Usage

import SQLite from "react-native-sqlite-2";

const db = SQLite.openDatabase("test.db", "1.0", "", 1);
db.transaction(function(txn) {
  txn.executeSql("DROP TABLE IF EXISTS Users", []);
  txn.executeSql(
    "CREATE TABLE IF NOT EXISTS Users(user_id INTEGER PRIMARY KEY NOT NULL, name VARCHAR(30))",
    []
  );
  txn.executeSql("INSERT INTO Users (name) VALUES (:name)", ["nora"]);
  txn.executeSql("INSERT INTO Users (name) VALUES (:name)", ["takuya"]);
  txn.executeSql("SELECT * FROM `users`", [], function(tx, res) {
    for (let i = 0; i < res.rows.length; ++i) {
      console.log("item:", res.rows.item(i));
    }
  });
});

There is a test app in the test directory.

Using with PouchDB

It can be used with pouchdb-adapter-react-native-sqlite.

import PouchDB from "pouchdb-react-native";
import SQLite from "react-native-sqlite-2";
import SQLiteAdapterFactory from "pouchdb-adapter-react-native-sqlite";

const SQLiteAdapter = SQLiteAdapterFactory(SQLite);
PouchDB.plugin(SQLiteAdapter);
var db = new PouchDB("mydb", { adapter: "react-native-sqlite" });

Further informations

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

OpenCV + iOS (Swift) + CvVideoCamera: サンプル

はじめに

OpenCV を Swfit で書いたアプリに組み込んで、カメラで撮影した画像をリアルタイムに画像処理して表示するサンプルアプリを作ってみました。

背景

OpenCV を iOS で使うには、 OpenCV から公式配布されている opencv2.framework をプロジェクトに組み込めば容易に使えます。

しかし、 OpenCV は C++ のライブラリなので、 iOS で使うには Objective-C++ を書かなければいけません!

もっぱら最近の iOS アプリは、 Swift で書かれていると思います。
Swift から Objective-C++ を使うにはブリッジファイルを用意する必要があります。

ソースコード

GitHub で公開しています。
https://github.com/kulikala/ios-opencv-skeleton

ローカルにクローンして使ってください。

git clone git@github.com:kulikala/ios-opencv-skeleton.git
cd ios-opencv-skeleton

CocoaPods

OpenCV のフレームワークを Xcode プロジェクトに取り込む方法として、 Carthage や SwiftPM などがありますが、オールドクラシックに Podfile を使う方法にしています。

pod install

開くときには、 CocoaPods が作成する OpenCVSkeleton.xcworkspace を開いてください。

open OpenCVSkeleton.xcworkspace
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

7月17日は世界絵文字デーらしい。ジョブズも関係している!?

7/17にチャットワークでリアクション機能がリリースされましたが、
(この機能便利ですね)
これは同日の「世界絵文字デー」にあわせたリリースだそうです。

世界絵文字デーとは

日本で人気が出た「絵文字」は世界中で使われる共通語となり、すっかり定着しています。
「世界絵文字デー」は、絵文字文化を世界に広める趣旨で創設された絵文字の記念日で、毎年7月17日に、世界中で絵文字に関するイベントなどがおこなわれているそうです。

なぜ7.17なのか

World Emoji Dayとも言うそうですがなぜ7月17日になったのかというと
由来は「iOSの「カレンダー」絵文字の日付が7月17日だから」だそうです。

ほほぅ、

改めてiPhone確認してみると確かにそうでした。

普段気にしていないと全然気づかないものですね。

となると、なぜiOSの絵文字が7.17なのかと気になりました。

7.17はスティーブ・ジョブズが関係していた

2002年、Appleはニューヨークで開催されたMacworld Expoで、Mac向けのカレンダーアプリ「iCal」をリリースしました。
その日付こそ、2002年7月17日だったそうです。
そしてこのプレゼンはスティーブ・ジョブズでした。

世界絵文字デーというもの自体を初めて知りましたが、こんなところまでスティーブ・ジョブズが関係しているとは驚きました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Firebase App Distribution からのテストアプリのインストール【iOS編】

Firebase でテストアプリを配信できるようになりました。

こちらの記事のiOS版です。

手順

概要

基本的な流れは Android の方と同様ですが、プロファイルのインストールが加わることと、App Distribution というアプリが必ずインストールされるところが異なります。

  • Firebase から招待メールが届く
  • 招待メールの URL を開く
  • 招待されたメールアドレスでログインし、Firebase App Distribution のプロファイルをインストールする
  • iPhone のホームに「App Distribution」というアプリがインストールされているので開く
  • テストアプリをインストールする

以下、画面ショットで詳細に説明していきましょう。
(個人情報のマスクがテキトーなのはやはりご愛嬌ということで)

詳細手順

まず届いたメールを確認します。

すみませんがこの画像は都合によりスマホではなくPCで表示させています。
スマホでこのメールを開いた人は、"Accept invitation" をタップしましょう。
(要はスマホでこのリンクを開ければOKです)

shot0.png

ここからはスマホの画面ショットです。
Google でのログインを要求されるので、テスターとして登録したいGoogleアカウントで登録しましょう。
今後、ここでログインしたGoogleアカウントがテスターとして管理されます。

shot1.png

既にiPhoneにGoogleアカウントが登録されていればそれを選択、なければ作成しましょう。

shot2.png

「Firebaseがこのデバイスに関する情報を収集することを許可します」という旨の英文が表示されますので、チェックを入れて"Accept invitation"をタップしましょう。

shot4.png

デバイスを登録する画面が表示されます。”Register device"をタップしましょう。

shot6.png

デバイスの登録は3つのステップに分かれています。まずはステップ1、プロファイルをダウンロードしましょう。
"Download profile"をタップしてください。

shot7.png

ブラウザでダウンロードされたファイルを開くとプロファイルのインストール画面になります。
右上の方にある「インストール」をタップしましょう。

shot10.png

インストールが完了したら、右上にある「完了」をタップ。

shot11.png

すると、ホーム画面に「App Distribution」という新しいアプリが追加されています。
これを起動しましょう。

shot12.png

すると、今Googleアカウントに対して配信されているテストアプリの一覧が表示されています。
テストしたいアプリをタップしましょう。

shot13.png

”Download latest"をタップすると、テストアプリのダウンロードが始まります。

shot14.png

”インストール”をタップして、アプリをインストールします。

shot15.png

テストアプリのインストールが完了しました!早速起動しましょう。

shot18.png

起動できました!
これでアプリのテストを始められます!

shot19.png

関連記事

Firebase App Distribution からのテストアプリのインストール【Android編】

Firebase App Distribution と Fabric Beta のテスター管理の違いについて

終わり

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Sansan Builders Box 2019でEightのアーキテクチャの話をします

logo.png

アマゾネスでございます。
本日Sansan Builders Box 2019 というイベントで、私が開発に関わっているしているEight iOSのアーキテクチャについてお話します。
今回は25分も持ち時間があるので、ゆったりお楽しみいただけれなと思います。

スケジュール

時間 : 2019/10/23 15:10〜
場所 : 表参道ヒルズ スペースオー / Track Box

タイトル

Eight iOSを支えるアーキテクチャ Vol.2

目次

第0部 私とEightについて
・自己紹介
・Eightについて
・最近私が実装している機能

第1部 アーキテクチャについてのお話
・アーキテクチャとは
・アーキテクチャのいいところ

第2部 Eightのアーキテクチャについて紹介します
・EightがMVVMを採用している理由
・MVVMについて
・EightのMVVMの実装がどうなっているのか

第3部 まとめ

アマゾネスから一言

MVVMアーキテクチャのお話しをします。

実は、Eightに入る前は全然アーキテクチャの知識があまりなくて、ここ最近からちゃんと向き合ったという感じです。これまで培ってきた知識を、私の言葉で説明できるようにがんばります。

前半は「アーキテクチャ」とは一体どんなものなのかという説明をして、後半で実際Eightでどういう形で実装されているのか説明します。Eight特有の捉え方もあるかと思いますが、参考になればと思います。

また、本日のイベントはエンジニアでない方も多くいらっしゃるときいているので、できるだけ抽象度をあげて資料を作成しています。いろんな人が「ほ〜ん」ってなれるといいなぁと思っています。

同じチームのカッパさんが今年の6月にお話しした Eight iOSを支えるアーキテクチャ Vol.1の資料 はコード量も多く、今回私が話す内容よりも具体的にかかれていますので、エンジニアのみなさんはそちらもご覧いただければと思います。

今日もやっっばいぐらいドキドキしてますが、がんばって話しますので何卒よろしくお願いします。

screen_shot_2019-01-31_at_1.25.03_pm.png

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

CarPlay徹底活用で、未来を体験しよう!(カローラ・ツーリングでGo!!)

0.最近のクルマのコネクティビティ動向

トヨタ自動車では2019/9/17発売の新型カローラ、カローラ・ツーリング、モデルチェンジしたカローラ・スポーツ、カムリ、CH-Rと、次々とディスプレイ・オーディオの搭載が始まりました。ついにトヨタもApple CarPlay、Google Autoとも連携開始です(※1:要:オプション ) 日産自動車、マツダ、本田技研工業、各社さんも同様にCarPlay/Google Autoにすでに対応されているようです。なので、これで各社さんのコネクティビティ環境が出揃ったと言えます。

(トヨタさんのホームページより、iOS CarPlayの画面が見える!)
DA

私事ではありますが、先日、カローラ・ツーリングが納車されました。(写真はトヨタさん、カローラ・ツーリング製品ページより)
カローラツーリング

なので、うれしくて、毎日のようにディスプレイオーディオを触っています。本稿では、そのときに見つけた、CarPlayのディープな使い方を紹介したいと思います。Apple CarPlay/Google Autoはクルマの未来を拓いていく機能だと確信しています。CarPlayを活用して未来を体験してみましょう!

1.こんなことができます!

1.1. 難易度レベル1: クルマに話しかけてメモ

クルマを運転している最中はメモを取ることはできません。ですので、思いついたことはメモを取ってもらいましょう。

1.2.難易度レベル2:クルマに話しかけてメッセージを送信

「これから帰るよ~」などのメッセージを、車を運転しながら送信することができます。

メッセージ

1.3.難易度レベル3: クルマに話しかけて、おうちの家電を操作

おうちの家電をクルマから操作することが可能です。外出先から帰宅前にエアコンを前もってかけておくなどは酷暑の日には嬉しい限りです。クルマからエアコンを動かしてみましょう。

エアコン

2.タネ明かし。どう実現するのか。

さて、このトリックのタネ、どうやって実現したか、わかりましたか?早速タネ明かしをしましょう。今回のトリックのキモはCarPlayからSiriを経由し、iOSのショートカット・アプリを利用することにあります。iOSショートカット・アプリで作成したショートカットはSiriから起動でき、さらにWeb APIを呼び出すことができます。Siriから受けた命令を様々なWebサービスへ伝える事ができるのです。そのWebサービスに後述のIFTTTを使うと、更に様々なサービスへと連携を拡げることができます。

CarPlay_system.png

2.1.難易度レベル1: クルマに話しかけてメモ

実はこのケース、トリックは不要です。練習問題と思ってください。単にSiriにメモさせているだけです。IFTTTの必要もありません。ハンドルのトークボタンを押して、「メモして」と言ってみましょう。

「メモして」

2.2. 難易度レベル2: クルマに話しかけてメッセージを送信

ここからはWebサービスと連携を行うケースの説明となります。今回登場するIFTTTとiOSショートカットは使い方に癖があり、ちょっと取っつきにくいかもしれません。ただ仕組みさえ知ってしまえば、実はとても簡単なんです。なので、極力、画面キャプチャを使って丁寧に説明してみます。おかげで、ちょっと長くなっちゃいましたが、きちんと辿ればできるはずです。ぜひ、お試しください。

まずIFTTTサービスから説明していきます。IFTTTはIf This Then Thatの略で、つまり、「こんなこと」が起きたら「それ」をするというサービスです。非常に単純な仕組みですが、IFTTTでは「こんなこと」や「それ」を、さまざまなサービスの中から自由に組み合わせられます。この組み合わせの力が非常に強力で、この組み合わせの力こそ、IFTTTの特徴といえます。

以下ではメッセージをSlackに送信する例を作ってみます。Slack以外とサービスを組み合わせることも簡単です。今回の例をあなたの連携してみたいサービスで参考にしてみてください。

2.2.1.クルマからメッセージを受け取り、Slackへメッセージを送るIFTTT連携の作成

少し順番が逆になってしまうのですが、最初に後段の動作から作っていきます。クルマからメッセージがやってくることが前提で、そのメッセージをWebhookで受け取り、Slackへ投稿するIFTTTを作ります。(この順で作るのは、後でデバッグを容易にするためです。)

まずはIFTTTにサインアップしましょう。

IFTTT_signup.png

次にCreateをして、IF This Then Thatを作ってみましょう。

IFTTT_create.png

最初のThisにはWebhooksを指定します。

IFTTT_this.png

IFTTT_webhooks.png

Webhooksサービスにconnectします。

IFTTT_connect.png

Webhooksのvalue1パラメータにJSONでメッセージを付けてAPIを呼び出します。

IFTTT_receive_web_request.png

IFTTT_trigger.png

次にThatですが、Slackへ接続します。

IFTTT_that.png

IFTTTから接続を行うため、Slackアカウントの認証などや連携の許可が必要です。それらが終わるとメッセージの投稿が選択できるようになります。

IFTTT_slack_post.png

Action Fieldsですが、タイトルはカラでメッセージをAdd ingredient からValue1を選んでおきましょう。Value1はWebhooksをAPIを呼び出すときに付与されるパラメータ(つまりはクルマからもらうメッセージ)のことを意味します。

IFTTT_action_fields.png

connectedの表示がされましたね。

IFTTT_connected.png

ここまでの動作が正しいかWebhooksの動作を確認してみましょう。Slackに通知されていればOKです。Webhooks Serviceを開き、右上のドキュメントを開きます。そうすると、以下が表示されます。そこへ、今回作成したイベントやvalue1に値を埋めてTest Itボタンを押してみましょう。

IFTTT_check_webhooks.png

正しくイベントとパラメータ値が設定できていれば、Slackに通知がやってきますね。もし通知までできていれば、ここまでは完璧です。(以降作業を進めますが、ここから作業がうまくいかない場合は、ここ以降の作業がまずいわけです。)

slack_test.png

2.2.2. クルマの中でメッセージを聞いて、IFTTTに送るiOSショートカットの作成

メッセージがIFTTTまで届けば万全に動いてくれる仕組みはできました。次はクルマの側からIFTTTまでメッセージを送る仕掛けを作りましょう。iOS側から行うのは「1、ユーザーからのSiriの発話でメッセージをもらう。2、そのメッセージをvalue1キーの値に含めたJSONをつくる。3、そのJSONをパラメータにつけてIFTTTのAPIへリクエストをする」です。これらはiOSショートカットで実現できます。

IFTTTに続き、iOSショートカット・アプリの操作も独特で慣れるまで少しかかりますが、ショートカットの作成も頑張って説明してみますね。画面キャプチャに従って試してみてください。まずは右上のプラスマークから新しいショートカットを作ってみましょう。

create_shortcut.png

下図の右上の赤い部分で、ショートカットの名前を変更します。この変更した名前が、Siriショートカットになります。つまり、Siriに変更した名前を呼びかけると、このショートカットが実行されます。(今回は「メッセージを送って」としました。)次は具体的な処理の流れを作っていきます。下の検索欄から実行するアイテムを検索して足していきます。中央のブロックは、上から下へと、アイテムを足して出来た処理の流れを表しています。ちょっと操作していくとわかりますので、まずは試してみてください。

shortcut_message_get.png

準備したテキストを読み上げ、それに対する回答をもらう、これらの操作で送りたいメッセージをSiri経由で取得することができました。

続いて取得できたメッセージを添えて、IFTTTのAPIへアクセスする部分を作ります。先ほどWebhooksで作成したIFTTTのイベントのURLをテキストに設定します。それから、テキスト値を変数へ設定し、変数の値(IFTTTのAPI)へアクセスします。

shortcut_web_reqeuest.png

APIへのアクセスは単にWebコンテンツを表示するのと異なり、メッセージのデータを送る必要があるので、HTTPアクセスは通常のGETではなくPOSTメソッドを使う必要があります。なので、APIアクセスのところは詳細を以下のように設定してください。これでvalue1に送信するメッセージを添えて、IFTTTにアクセスすることができます。

shortcut_web_reqeuest_detail.png

最後に完了を通知します。テキストを準備して読み上げます。

shortcut_read_aloud.png

これでクルマから話しかけるだけでメッセージをSlackに送ることができます!

2.3. 難易度レベル3: クルマに話しかけて、おうちの家電を操作

おうち家電も仕掛けは同様です。IFTTTまで連携を作り、その後、家電リモコンのサービスへアクセスします。私はLive Smart社のリモコン(LS mini)を使っています。

ls_mini.jpg

LSサービスでは機器に設定してあるルールをIFTTT上から操作できるようになっていますので、Thatを設定するときに所定のルールを選択します。(図はエアコンをOFFにする方のルールです)

ls_rule.png

この設定でうちの中の家電が操作できるようになります。

3.CarPlayの時代到来!! スマホアプリはCarPlayやSiriショートカットに対応しよう!!

冒頭に述べた通り、CarPlayはクルマ側の環境も整いつつあるだけでなく、iOS13でもCarPlayは過去最大のアップデートがされています。CarPlay は(たぶん、Google Autoも)大きくクルマの世界を拡張していくことは間違いありません。私はCarPlayのカギは、単にCarPlay対応アプリを作るだけではなく、本稿のようなSiriショートカットの使い方もポイントの一つだと考えています。

本稿で見たようにiOSのショートカット機能を使えば、SiriとWebサービスとが連携できます。ただ、この方法はiOSショートカットをユーザー自身に作ってもらわなくてはなりません。本稿でも説明に非常に手間がかかりました。よほどのマニアでないと難しいでしょう。一方でSiriショートカット自身を組み込んだアプリは、誰もが話しかけるだけで、クルマから簡単に操作ができます。ですので、アプリにSiriショートカットを埋め込む方法はおすすめです。

クルマの世界を拓くアプリを、今やあなたが開発できる環境になっています。もっと楽しいカーライフを一緒に作っていきましょう!

ふー、ギリギリだけど東京モーターショー前に投稿出来てよかった。。。

(※1)Apple CarPlay/Android Auto使用にはカローラ、カローラ・ツーリングの標準搭載のSmartDeviceLinkではなく、TV視聴とのセットオプションが必要です。CarPlayをすると、テレビも付いてくるお得なセットですよ。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

VRMとAR Quick Lookで遊ぼう

最近Twitterで知人がVRMモデルをusdzに変換して遊んでるのを見かけたので自分もやってみた。
会社で遊んでた際に、ふと「あれ?これ遊びたい人多いと思うけど手順が結構プログラマ向けだな?」と思ったのでわかりやすい記事を書いてみようと思ったので実行(ΦωΦ)

準備するもの

Mac
対応してるiPhone or iPad
VRMデータ
AppleID
usdz変換ツール
usdzをアップする場所

VRMの準備

VRoidHubで持ってきたらいいんでない?(ΦωΦ)
https://hub.vroid.com/

usdz変換ツール

↓ここからDLできるよ入るときAppleID必要だよ(ΦωΦ)
usdz変換ツール

スクリーンショット 2019-10-23 0.05.27.png

0.61のバージョンをDLして来たら適当に解凍しておきましょう。

VRMモデルを.glbに変換

VRMモデルデータの.vrmを名前変更で.glbに変更してください(ΦωΦ)
スクリーンショット 2019-10-23 0.11.09.png

こんな感じね。

そしたらルートの直下にでも置いてください。
ルートがわからないとな?(ΦωΦ)
他のQiitaの記事で「Macの使い方」とか探して勉強して行きましょう(’ΦωΦ)

usdz変換ツールを使ってusdzに変換

さて、先程ダウンロードして適当なところに解答した変換ツールの中に「USD.command」というのがありますね(ΦωΦ)
スクリーンショット 2019-10-23 0.17.23.png
これを起動します。
スクリーンショット 2019-10-23 0.20.46.png

こんな感じのが出てくるので
ここで先程の.glbファイルを変換します。
usdzconvert ****.glb って入れて
スクリーンショット 2019-10-23 0.24.22.png

スクリーンショット 2019-10-23 0.25.30.png
Output file と出てきて
ちゃんと.usdzになったファイルが出てこればOK!(ΦωΦ)

あと、このファイルを自分のサイトに入れるなり
AWSのS3にいれておくなりして手元のiPhoneのSafariから見に行けば〜
AR.jpg

上手にできました〜(ΦωΦ)

興味出た人はfixOpacityでアルファ周り処理したりとか
アニメーションが入った.glb作って見たりとかしてみてく遊んでみてください。

ではでは(ΦωΦ)

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む