Parse.comを使ったiOSデバイスへのプッシュ通知[ターゲッティング編]Parse.comを使ったiOSデバイスへのプッシュ通知[ターゲッティング編]

前回、Parseを使ったiOSデバイス向けのプッシュ通知を行う方法をご紹介しました。今回はプッシュ通知先の絞り込みについて、無料版でも利用可能なChannelというパラメータを使用した方法をご紹介します。 大まかには、以下のような流れで行います。 デバイスにChannelの情報をひもづける Channelを指定してプッシュ通知を送る デバイスにChannelの情報をひもづける 次のメソッドを使って、デバイス側からParse(サーバ)側にChannel情報を登録できます。 NSString *channelName = @"hogehoge";   //登録するChannel名[PFPush

Parse.comを使ったiOSデバイスへのプッシュ通知[導入編]Parse.comを使ったiOSデバイスへのプッシュ通知[導入編]

アプリのバックエンド機能を提供するBaaSサービスのParseを使ってプッシュ通知を行う方法をご紹介します。 Parseの詳細については公式ページまたは過去記事を参照してください。 無料版でも、ターゲットを絞り込んだ通知など多くのことが行えるので、3回に分けて紹介していきます。 今回はその第1回、プッシュ通知機能を実現するまでの導入手順についてです。 なお、ParseはiOS、Android、Windows Phoneなどさまざまなデバイスに通知を行うことができますが、この記事ではiOSを対象とします。 公式のドキュメント(Quick Start

Play Framework 2(JAVA) で FitbitデータをGoogle Chartsで表示するPlay Framework 2(JAVA) で FitbitデータをGoogle Chartsで表示する

前回の記事「Play Framework 2(JAVA) で Twitter OAuth 1.0」ではTwitter APIのOAuth認証を行い、受け取ったJSONデータをBootstrapを使ってタイムライン風に表示しました。今回は歩数や消費カロリーを記録する活動量計Fitbitで収集したデータをAPI経由で取得して、Google

Parse.comを使ったサーバサイド実装不要のフロントエンド開発[後編]Parse.comを使ったサーバサイド実装不要のフロントエンド開発[後編]

本記事はParse.comを使ったサーバサイド実装不要のフロントエンド開発[前編]の後編です。前編では、Parseの管理画面と、JavaScript SDKのうちBackbone.jsをベースとしている部分とCollectionの生成に必要となるデータの取得方法をご紹介しました。後編では引き続き、ParseのJavaScript SDKの機能として以下の3つをご紹介いたします。 Parse.User: アカウント管理 Parse.File: 画像をはじめとしたファイルのアップロード処理等 Parse.Promise: Defferedの仕組み Parse.GeoPoint: 位置情報 Parse.User

Parse.comを使ったサーバサイド実装不要のフロントエンド開発[前編]Parse.comを使ったサーバサイド実装不要のフロントエンド開発[前編]

ParseはBaaS(Backend as a Service)と呼ばれる、アプリに共通して必要となるバックエンドの機能を提供するクラウドサービスのひとつです。BaaSを利用することで、データの同期やユーザ管理、プッシュ配信、ソーシャル連携など、アプリごとに独自の開発を行うことなく効率よく開発を進めることができます。  Parseでは、iOS、Android、JavaScript、.NET、OS Xと様々なプラットフォーム向けのSDKが提供されています。今回はこのParseのJavaScript SDKを使ってみます。 新規アプリケーションの作成

Play Framework 2(JAVA) で Twitter OAuth 1.0Play Framework 2(JAVA) で Twitter OAuth 1.0

Play FrameworkはJavaとScalaに対応したWebアプリケーションフレームワークです。軽量でMVCでRESTfulで、、、といった概要については公式ドキュメントをご確認いただくとして、今回はPlay Framework 2.2.0(JAVA)で動作する「WS(WebService)とOAuthライブラリを利用してOAuth1.0認証を行う」「APIを叩いて取得したJSONをTwitter BootStrapを使って表示する」の2点についてまとめました。 WS(WebService)とOAuthライブラリを利用してOAuth1.0認証を行う WS(WebService)は非同期通信でPlayアプリから外部Webサービスを呼び出す際に利用するライブラリです。また、PlayframeworkはOAuth1.0のみをサポートしたOAuthライブラリが用意されており、今回は主にこの2つを使って実装します。 準備

ぐるぐる360°回転させる3つのjQuery Pluginぐるぐる360°回転させる3つのjQuery Plugin

商品画像をいろんな角度から見せたいけど、3DCGを使ってあらゆる角度を自由に見せるまでは必要はない、、、そんな時に使えるかも?なjQuery Pluginをご紹介します。これらのプラグインはぱらぱら漫画の要領で、複数の画像を高速に切り替えることで動いているような、回転しているような見せ方が可能になります。 SpriteSpin 最初にご紹介するのは3つの描画方法が用意されているプラグインSpriteSpinです。jQuery-1.4.2 以降に依存するプラグインで、MIT ライセンスのもとで公開されています。対応ブラウザは各種PC用ブラウザ(IE6以降)とモバイル用ブラウザがサポートされています。(非minifyのspritespin.js:26.5KB) <!-- 画像を表示するHTML

フォントの機能を使えるCSS3のFont feature settingsとはフォントの機能を使えるCSS3のFont feature settingsとは

CSS3でWebフォント機能が追加され、異なるデバイス上でも同じフォントの表示が可能になったことをご存じの方も多いと思います。CSS3のフォントに関する仕様ではその他にも様々な機能が追加されており、そのひとつが今回ご紹介するfont-feature-settingsプロパティです。 Webフォントで利用できるフォントフォーマットにはTTF(True Type Font)、OTF(Open Type Font)、EOT(Embedded OpenType)、SVG Font(Scalable

WebフォントをSVGからOTFに切り替えた際のハマりポイントあれこれWebフォントをSVGからOTFに切り替えた際のハマりポイントあれこれ

先日、1年ほど前に公開したスマートフォン向け秀英体見本帳を更新しました!スマートフォン向け秀英体見本帳は、モバイルブラウザを対象としたWebフォントを使った縦組み表現に挑戦したコンテンツです。スマートフォン向け秀英体見本帳はこちらから、推奨動作環境等はこちらをご覧ください。 更新、といっても、見た目はほとんど変わらないのですが、Webフォントのフォント形式をSVGから他の形式に切り替えました。SVGフォントの場合は不具合なく表示されていたものが、WOFFやTTF、OTFに切り替えた場合に表示の不具合が出たりして意外に大変でした。モバイルブラウザでのWebフォント表現のノウハウが少なく、問題が不明で未解決のものもありますが、今回ハマったポイントをご紹介します。 検証端末 今回の検証に用いた端末の端末名/OSバージョン/ブラウザは以下です。 AQUOS PHONE SERIE ISW16SH

position:fixedを実現するiScrollを使う際に覚えておきたいメソッドたちposition:fixedを実現するiScrollを使う際に覚えておきたいメソッドたち

ヘッダーやフッター等の要素を固定表示するのに利用されるposition:fixed。このposition:fixedがサポートされていない環境で、固定表示を実現する際によく使われるライブラリにiScrollがあります。要素を固定するというよりは、特定要素の範囲をスクロール可能にする、overflow:autoのようなイメージです。 複雑なレイアウトになると、iScrollでスクロールさせている要素の高さが動的に変化したり、スクロール領域が入れ子だったり・・・ユーザ操作に応じて追加の処理を行う必要があります。難しそうなレイアウトは設計の際に回避したいところですが、そういう実装が必要な場合に使えるiScrollのメソッドをまとめてみました。 iScrollの使い方 iScrollの使い方ですが、HTML要素に任意のIDを付け、JSで初期化を行います。下記の例ではid=”scroller”の要素がスクロール可能になります。例でリスト要素になっている部分は何でもかまいませんが、2つのwrapper(例ではIDがwrapperとscrollerのdiv要素)は必要です。また、一番外側の要素には高さを指定しておく必要があります。 ◆HTML <div id=”wrapper”><div id=”scroller”><ul><li></li>……</ul></div></div>