前の10件 | -
CloudPebbleでPebble Watchappの開発（Projectをビルド＆実行） [Pebble]
大分間隔が開いてしまいましたが、久しぶりにPebble用のWatchAppを開発するブログを続けていきます。
前回はProjectを作成するところまでだったので、
ビルドし、エミュレーターで実行するところまで書きます。
Projectが作成できたら、
左メニューの「SOURCE FILES」に自動で生成されている「hello_world.c」を開きます。
「hello_world.c」をクリックすると、メイン画面にソースコードが表示されます。
この状態で特に何もソースコードに追加しなくても、ビルドが可能です。
ビルドするには、左メニューの「COMPILATION」をクリックして、緑色の「RUN BUILD」ボタンをクリックします。
ソースコードがシンプルなので、一瞬「PENDING」というステータスになり、すぐにステータスが「SUCCEEDED」になります。
これでビルドは完了したので、次にエミューレーターを起動します。
エミューレーターを起動するには、「COMPILATION」のメイン画面の上の[EMULATOR | PHONE]のセレクトボタンの「EMULATOR」をクリックして選択します。
「EMULATOR」を選択すると下に、「APLITE」、「BASALT」、「CHALK」ボタンが表示されます。
これは、Pebbleのデバイスのアーキテクチャのコードネームを表しているようです。
「APLITE」は、Pebble Classic、Pebble Steelを、
「BASALT」は、Pebble Time、Pebble Time Steelを、
「CHALK」は、Pebble Time Roundを表しています。
Pebble Classic用に開発を進めていきますので、「APLITE」をクリックするとエミュレーターが起動します。
しばらくすると、Installed Successfully!というダイアログが表示されますので、
「DISSMISS」ボタンとクリックしてダイアログを閉じます。
左メニューの上にエミュレーターが表示され、ビルドしたWatchAppが起動しています。
エミュレーターは実機と同じ位置にクリックボタンの操作が使用可能です。
前回はProjectを作成するところまでだったので、
ビルドし、エミュレーターで実行するところまで書きます。
Projectが作成できたら、
左メニューの「SOURCE FILES」に自動で生成されている「hello_world.c」を開きます。
「hello_world.c」をクリックすると、メイン画面にソースコードが表示されます。
この状態で特に何もソースコードに追加しなくても、ビルドが可能です。
ビルドするには、左メニューの「COMPILATION」をクリックして、緑色の「RUN BUILD」ボタンをクリックします。
ソースコードがシンプルなので、一瞬「PENDING」というステータスになり、すぐにステータスが「SUCCEEDED」になります。
これでビルドは完了したので、次にエミューレーターを起動します。
エミューレーターを起動するには、「COMPILATION」のメイン画面の上の[EMULATOR | PHONE]のセレクトボタンの「EMULATOR」をクリックして選択します。
「EMULATOR」を選択すると下に、「APLITE」、「BASALT」、「CHALK」ボタンが表示されます。
これは、Pebbleのデバイスのアーキテクチャのコードネームを表しているようです。
「APLITE」は、Pebble Classic、Pebble Steelを、
「BASALT」は、Pebble Time、Pebble Time Steelを、
「CHALK」は、Pebble Time Roundを表しています。
Pebble Classic用に開発を進めていきますので、「APLITE」をクリックするとエミュレーターが起動します。
しばらくすると、Installed Successfully!というダイアログが表示されますので、
「DISSMISS」ボタンとクリックしてダイアログを閉じます。
左メニューの上にエミュレーターが表示され、ビルドしたWatchAppが起動しています。
エミュレーターは実機と同じ位置にクリックボタンの操作が使用可能です。
CloudPebbleで「CloudPebble.Analytics.AddEvent」が表示される場合の対応方法 [Pebble]
久しぶりにCloudPebbleを使ってみたところ、ソースコードを表示しようとすると、画面に赤く
Something went wrong: Cannot read property 'AddEvent' of undefined
というエラーが表示されてソースコードが表示できなくなっています。
ソースコードが表示されないがコンパイルができるので、そのままエミュレーターを起動させると、
Cannot read property 'addEvent' of undefined
というエラーでエミュレーターも動かせなくなっています。
addEventあたりが怪しいようです。
最初に確認したブラウザーがOS X El CapitanのChromeだったので、Safariでやってみると、
やはり同じエラーが表示されます。
Firefoxで試したら、エラーが出ずにソードコードは表示でき、エミュレータも起動できます。
何かあるなと思い、ネットでエラー名をキーワードに検索してみたのですが、原因が見つかりませんでした。
近々新しいPebble OSが4にアップデートするので、CloudPebbleも何か変更されたのが原因かなと思い、ChromeとSafariのバージョンを確認してみると最新なので、CloudPebbleはFirefoxのみの対応
になったのかと思いました。ChromeかSafariに対応するまでは、しばらくはFirefoxで開発しようと思いました。
でもなんか納得いかないので、会社のEl CapitanのChromeで実行するとエラーが表示されず問題なく動きます。
Safariも大丈夫です。家のEl Capitanのバージョンと同じですし、ブラウザーのバージョンも同じなので、プラグイン等に関係がありそうだな気がします。
家のChromeのインストールしているプラグインを見てみると、怪しいのはAdBlockくらいしかないので、試しに「このページは実行しない」を選択したところ、
ソースコードを表示する時に出ていた
Cannot read property 'addEvent' of undefined
が消えました！
エミュレーターもエラーが出なくなりちゃんと実行できるようになりました！
AdBlockがCloudPebble.Analytics.addEventをブロックしていたようです。
SafariでもAbBlockをオフにするとエラー表示が消えます。
やはりAdBlockが原因だったようです。
CloudPebbleは広告がないので、AdBlockを使っている場合は、
CloudPebbleで
「このドメイン上のページで稼働させない」
を選択することをお勧めします。
Something went wrong: Cannot read property 'AddEvent' of undefined
というエラーが表示されてソースコードが表示できなくなっています。
ソースコードが表示されないがコンパイルができるので、そのままエミュレーターを起動させると、
Cannot read property 'addEvent' of undefined
というエラーでエミュレーターも動かせなくなっています。
addEventあたりが怪しいようです。
最初に確認したブラウザーがOS X El CapitanのChromeだったので、Safariでやってみると、
やはり同じエラーが表示されます。
Firefoxで試したら、エラーが出ずにソードコードは表示でき、エミュレータも起動できます。
何かあるなと思い、ネットでエラー名をキーワードに検索してみたのですが、原因が見つかりませんでした。
近々新しいPebble OSが4にアップデートするので、CloudPebbleも何か変更されたのが原因かなと思い、ChromeとSafariのバージョンを確認してみると最新なので、CloudPebbleはFirefoxのみの対応
になったのかと思いました。ChromeかSafariに対応するまでは、しばらくはFirefoxで開発しようと思いました。
でもなんか納得いかないので、会社のEl CapitanのChromeで実行するとエラーが表示されず問題なく動きます。
Safariも大丈夫です。家のEl Capitanのバージョンと同じですし、ブラウザーのバージョンも同じなので、プラグイン等に関係がありそうだな気がします。
家のChromeのインストールしているプラグインを見てみると、怪しいのはAdBlockくらいしかないので、試しに「このページは実行しない」を選択したところ、
ソースコードを表示する時に出ていた
Cannot read property 'addEvent' of undefined
が消えました！
エミュレーターもエラーが出なくなりちゃんと実行できるようになりました！
AdBlockがCloudPebble.Analytics.addEventをブロックしていたようです。
SafariでもAbBlockをオフにするとエラー表示が消えます。
やはりAdBlockが原因だったようです。
CloudPebbleは広告がないので、AdBlockを使っている場合は、
CloudPebbleで
「このドメイン上のページで稼働させない」
を選択することをお勧めします。
CloudPebbleでPebble Watchappの開発（Projectを作成） [Pebble]
Createボタンを押すと、以下の設定を求められます。
・Project Name
・Project Type
・SDK Version
・Template
Project Nameは、適当なプロジェクト名を入力します。今回はMyProjectにします。
Project Typeは、今回はPebble本体のアプリを作成しますので、Pebble C SDKを選択します。
SDK Versionは、SDK 3にしておきましょう。
Templateは、とりあえず今回はHelloWorldを選択しておきます。
入力、選択したら、「Create」ボタンを押します。
しばらくすると、プロジェクトデータがCloudPebble内で自動生成され、以下の画面が表示されます。
・Project Name
・Project Type
・SDK Version
・Template
Project Nameは、適当なプロジェクト名を入力します。今回はMyProjectにします。
Project Typeは、今回はPebble本体のアプリを作成しますので、Pebble C SDKを選択します。
SDK Versionは、SDK 3にしておきましょう。
Templateは、とりあえず今回はHelloWorldを選択しておきます。
入力、選択したら、「Create」ボタンを押します。
しばらくすると、プロジェクトデータがCloudPebble内で自動生成され、以下の画面が表示されます。
CloudPebbleでPebble Watchappの開発 [Pebble]
CloudPebbleは、ブラウザー上での開発環境なので、ChromeやFirefox、Safariで
https://cloudpebble.net/ サイトを開きます。
「GET STARTED」ボタンをクリックして、スタートしましょう。
ログインの方法のボタンがいくつか出てきますが、Pebbleユーザーならば、
「LOG IN WITH YOUR PEBBLE ACOUNT」をクリックして、Pebbleのユーザーアカウントでログイン可能です。
ログインが成功すると、プロジェクトの管理画面となります。
早速「Create」ボタンをクリックして、新しいプロジェクトをCreateします。
https://cloudpebble.net/ サイトを開きます。
「GET STARTED」ボタンをクリックして、スタートしましょう。
ログインの方法のボタンがいくつか出てきますが、Pebbleユーザーならば、
「LOG IN WITH YOUR PEBBLE ACOUNT」をクリックして、Pebbleのユーザーアカウントでログイン可能です。
ログインが成功すると、プロジェクトの管理画面となります。
早速「Create」ボタンをクリックして、新しいプロジェクトをCreateします。
PebbleOSでの文字列の扱い方 [Pebble]
Pebble側のOSはPebbleOSと呼ばれていますが、WatchappもWatchfaceもC言語で開発します。
PebbleOSのC言語での文字列の扱い方は、内部コードはUTF-8となっていますが、マルチバイト文字の扱いが原始的です。
文字列リテラルには、"ABCあいう漢字" というように漢字は使用できます。
しかし、strcmp()等の文字列処理関数は、シングルバイト文字のみでの対応となっているので、
UTF-8について詳しく知る必要があるようです。
char str = "あいう";
int length =0;
length = strlen(str);
実行結果のlengthの値は、9になります。
ひらがなは、UTF-8では３バイトになっているようです。
UTF-8の「あ」を調べてみると...
「あ」 のUTF-8のバイト列は、E3 81 82 と３バイトになっています。
「い」は、E3 81 84
「う」は、E3 81 86
文字列"あいう"は、終端文字（0x00）を含めると、
E3 81 82 E3 81 84 E3 81 86 00
の10バイトをメモリー上に格納されることになります。
なので、和文や絵文字、ギリシア文字等ASCII文字以外を扱う場合は、
strlen()で文字数を求めることはできないです。
PebbleOSのC言語での文字列の扱い方は、内部コードはUTF-8となっていますが、マルチバイト文字の扱いが原始的です。
文字列リテラルには、"ABCあいう漢字" というように漢字は使用できます。
しかし、strcmp()等の文字列処理関数は、シングルバイト文字のみでの対応となっているので、
UTF-8について詳しく知る必要があるようです。
char str = "あいう";
int length =0;
length = strlen(str);
実行結果のlengthの値は、9になります。
ひらがなは、UTF-8では３バイトになっているようです。
UTF-8の「あ」を調べてみると...
「あ」 のUTF-8のバイト列は、E3 81 82 と３バイトになっています。
「い」は、E3 81 84
「う」は、E3 81 86
文字列"あいう"は、終端文字（0x00）を含めると、
E3 81 82 E3 81 84 E3 81 86 00
の10バイトをメモリー上に格納されることになります。
なので、和文や絵文字、ギリシア文字等ASCII文字以外を扱う場合は、
strlen()で文字数を求めることはできないです。
PebbleのWatchappの仕組み [Pebble]
Pebble watchでは、大きく３種類のアプリケーションを開発することができます。
・Watchface
・Watchapp
・Background App
Watchfaceは、時計表示に特化したアプリケーションでPebbleの4つのボタンのイベントの取得できない制限以外はWatchappとほぼ同じように開発できます。
時計機能以外にペアリングしているスマートフォンとの通信もできるので、現在地の天気情報の表示やニュースの表示等も可能となります。
Watchappは、Watchfaceと違い４つのボタンのイベントの取得が可能なので、ボタンクリックベースのUIでのアプリケーションの開発が可能です。
Background Appは、UIを持たないアプリケーションでWatchfaceやWatchappが動作中でも起動可能となっています。サイトへのポーリング等に利用できそうです。
Watchappは、Pebble watch内で動作し、スマートフォンとの通信は、Pebble社製のスマートフォンアプリのPebble Timeアプリ内にJavaScriptで動作させるアプリケーションとのデータのやり取りで行われる仕組みになっています。
Pebble側のアプリケーションは、Pebble SDKあるいはCloudPebbleを使ってC言語で開発します。
スマートフォン側は、JavaScriptで開発します。
デバイス： Pebble <--> スマートフォン
アプリ： Watchapp Pebble Time
開発言語： C言語 JavaScritp
・Watchface
・Watchapp
・Background App
Watchfaceは、時計表示に特化したアプリケーションでPebbleの4つのボタンのイベントの取得できない制限以外はWatchappとほぼ同じように開発できます。
時計機能以外にペアリングしているスマートフォンとの通信もできるので、現在地の天気情報の表示やニュースの表示等も可能となります。
Watchappは、Watchfaceと違い４つのボタンのイベントの取得が可能なので、ボタンクリックベースのUIでのアプリケーションの開発が可能です。
Background Appは、UIを持たないアプリケーションでWatchfaceやWatchappが動作中でも起動可能となっています。サイトへのポーリング等に利用できそうです。
Watchappは、Pebble watch内で動作し、スマートフォンとの通信は、Pebble社製のスマートフォンアプリのPebble Timeアプリ内にJavaScriptで動作させるアプリケーションとのデータのやり取りで行われる仕組みになっています。
Pebble側のアプリケーションは、Pebble SDKあるいはCloudPebbleを使ってC言語で開発します。
スマートフォン側は、JavaScriptで開発します。
デバイス： Pebble <--> スマートフォン
アプリ： Watchapp Pebble Time
開発言語： C言語 JavaScritp
PebbleのWatchappの開発 [Pebble]
Pebble watchのアプリの開発について自分の備忘録としてのんびり書いて行きます。
昨年の年末の12月30日にPebble社のオフィシャルサイト（https://www.getpebble.com/）からオンラインでPebble Classicを注文して、今年の1月17日に手元に届いて、すぐにWatchappの開発を始めています。
開発環境は、PebbleのDevelopサイトからPebble SDKをPCにインストールしてコマンドベースで開発する方法と、クラウドベースのIDEであるCloudPebbleで開発する方法があります。
おすすめは、PCすらも必要せずブラウザーだけで開発できてしまうCloudPebbleでの開発環境です。
CloudPebbleは、ブラウザベースのIDEですのでiPhoneのSafari上で開発できちゃいます。
<https://cloudpebble.net/>
CloudPebbleを使うには、まずユーザー登録が必要です。
ユーザー登録は、PebbleのユーザーIDとパスワードがそのまま使えるので、
Pebbleユーザーは、すぐに開発ができることになります。
昨年の年末の12月30日にPebble社のオフィシャルサイト（https://www.getpebble.com/）からオンラインでPebble Classicを注文して、今年の1月17日に手元に届いて、すぐにWatchappの開発を始めています。
開発環境は、PebbleのDevelopサイトからPebble SDKをPCにインストールしてコマンドベースで開発する方法と、クラウドベースのIDEであるCloudPebbleで開発する方法があります。
おすすめは、PCすらも必要せずブラウザーだけで開発できてしまうCloudPebbleでの開発環境です。
CloudPebbleは、ブラウザベースのIDEですのでiPhoneのSafari上で開発できちゃいます。
<https://cloudpebble.net/>
CloudPebbleを使うには、まずユーザー登録が必要です。
ユーザー登録は、PebbleのユーザーIDとパスワードがそのまま使えるので、
Pebbleユーザーは、すぐに開発ができることになります。
Swiftで簡単なiOSブラウザアプリを製作（その２） [Swift]
ベースとなるプロジェクトができたので、ビルドして実行してみます。
その前にiPhone 5sで表示する前提なので、active schemeをiPhone 5sに設定します。
active schemeを設定するには、Xcodeの画面上部のツールバーのiPhone 6のアイコンをiPhone 5sのアイコンに変更します。
次にビルド＆実行するのでツールバーの左側の再生ボタンを押します。
ビルドが始まり、エラーもなくビルドが成功し、しばらくするとiOSシミュレータが起動します。
iOSシミュレータが起動するとビルドしたSimpleBrowserが起動します。
スプラッシュ画面が表示された後、真っ新で何もない画面が表示されます。
この画面からブラウザの基本的な機能を追加していきます。
その前にiPhone 5sで表示する前提なので、active schemeをiPhone 5sに設定します。
active schemeを設定するには、Xcodeの画面上部のツールバーのiPhone 6のアイコンをiPhone 5sのアイコンに変更します。
次にビルド＆実行するのでツールバーの左側の再生ボタンを押します。
ビルドが始まり、エラーもなくビルドが成功し、しばらくするとiOSシミュレータが起動します。
iOSシミュレータが起動するとビルドしたSimpleBrowserが起動します。
スプラッシュ画面が表示された後、真っ新で何もない画面が表示されます。
この画面からブラウザの基本的な機能を追加していきます。
Swiftで簡単なiOSブラウザアプリを製作（その１） [Swift]
Swift言語が発表されてからもうすぐ１年になり、iOS8もリリースされiOSアプリをSwiftで製作されてきているようです。
たくさんのSwift解説書が出版されてきているので、Swiftで簡単なiOSブラウザアプリを作成してみたいと思います。
iOSアプリを製作するには、Macと統合開発環境のXcodeが必要です。
Xcodeは、Mac版のみしかないので、できるだけ新しいMacを使用すると快適です。
Swiftは、Xcode v6.0から使えるようになったのでやはり最新版をApple Developer Programに開発者登録して入手します。
Xcodeが入手できたら、インストールし、Xcodeを起動します。
まずは、iOS ApplicationのSingle View Applicationのプロジェクトを作成します。
Fileメニュー > New > Project...
iOSのApplicationのSingle View Applicationを選択してNextボタンをクリックします。
Product NameをSimpleBrowserにして、
Organization Nameは自分のユーザ名、Organization Identifierはドメイン名の逆にした文字列を適当に入力します。
LanguageはSwiftにし、DeviceはとりあえずiPhoneにしておきます。
Use Core Dataはとりあえずチェックを外しておきます。
次にプロジェクトファイルを保存する場所をXcodeがきいてくるので、適当な場所を指定します。
たくさんのSwift解説書が出版されてきているので、Swiftで簡単なiOSブラウザアプリを作成してみたいと思います。
iOSアプリを製作するには、Macと統合開発環境のXcodeが必要です。
Xcodeは、Mac版のみしかないので、できるだけ新しいMacを使用すると快適です。
Swiftは、Xcode v6.0から使えるようになったのでやはり最新版をApple Developer Programに開発者登録して入手します。
Xcodeが入手できたら、インストールし、Xcodeを起動します。
まずは、iOS ApplicationのSingle View Applicationのプロジェクトを作成します。
Fileメニュー > New > Project...
iOSのApplicationのSingle View Applicationを選択してNextボタンをクリックします。
Product NameをSimpleBrowserにして、
Organization Nameは自分のユーザ名、Organization Identifierはドメイン名の逆にした文字列を適当に入力します。
LanguageはSwiftにし、DeviceはとりあえずiPhoneにしておきます。
Use Core Dataはとりあえずチェックを外しておきます。
次にプロジェクトファイルを保存する場所をXcodeがきいてくるので、適当な場所を指定します。
vimでä、ö、ø、åのようにアクセント付き文字やリガチャを入力する方法 [vi]
vimでラテンアルファベットのアクセント記号付き文字やリガチャ（合字）を入力するには、<Ctrl>+<K>（ContrlキーとKキーと同時に押す）を入力した後に関連する２文字を入力します。
例えば、äは、
<Ctrl>+<K> a "
とします。
" a の順番でもäが入力できます。
ä: a", "a, a:, :a
ö: o", "o
ø: o/, /o
å: aa, a@, @a
この機能は、digraphs機能です。
digraph機能は、ラテンアルファベット以外でも入力できます。
paは「ぱ」、puは「ぷ」と平仮名も入力できます。
コマンドモードで「:」を押した後にdigraphsを入力すると定義されているdigraphs機能の入力順の一覧が表示され、確認できます。
また、:digraphs {1番目の文字}{2番目の文字} {入力したい文字の10進数の文字コード}
で定義を変更できます。
:digraphs oo 228
これで、<Ctrl>+<K>ooでäが入力されます。
例えば、äは、
<Ctrl>+<K> a "
とします。
" a の順番でもäが入力できます。
ä: a", "a, a:, :a
ö: o", "o
ø: o/, /o
å: aa, a@, @a
この機能は、digraphs機能です。
digraph機能は、ラテンアルファベット以外でも入力できます。
paは「ぱ」、puは「ぷ」と平仮名も入力できます。
コマンドモードで「:」を押した後にdigraphsを入力すると定義されているdigraphs機能の入力順の一覧が表示され、確認できます。
また、:digraphs {1番目の文字}{2番目の文字} {入力したい文字の10進数の文字コード}
で定義を変更できます。
:digraphs oo 228
これで、<Ctrl>+<K>ooでäが入力されます。
前の10件 | -
