Facebook Twitter Google Maps RSS
formats

【第9回】jQueryで画像遅延読み込み ~LazyLoad~

Published on 2016年4月12日, by in 未分類.

みなさんこんにちは!最若手のリョータです!
桜の季節で春の陽気が気持ちいいですね!
過ごしやすい時期になってきたので色々なことにチャレンジしていきたいと思います!

さて、本題ですが、
今回業務で実際に必要となった、LazyLoad for Plugins jquery について解説してみたいと思います。
こちらのプラグインは、webページを表示する際にスクリーン上に見える画像のみを読み込み、
スクロールされると更に画像を読み込むといったものです。
主に多くの画像を閲覧する際のレスポンス改善に繋がると思います。
それでは説明をしていきます。

    使い方

まずは下記サイトからプラグインをダウンロードしてください。

プラグインはこちら

ダウンロードが出来ましたら、任意の階層に配置し、遅延読み込みをさせたいページで読み込んでください。

<script src="jquery.js"></script>
<script src="jquery.lazyload.js"></script>

ちなみにjqueryも必要なので、合わせて読み込んでください。

次はHTML側ですが、遅延読み込みをさせたいimgタグはsrcを指定するのではなく、
data-original属性に画像のパスを指定してください。
そしてクラス名には判別がつくようにlazyを追加してください。

<img data-original="画像パス" class="lazy">

これでHTML側の対応は完了となります。

続いてjquery側ですが、

$(function() {
    $('img.lazy').lazyload() ;
});

のように初期化の処理を入れるだけです!
これで動作としては完了となります。
ちなみにこのプラグインはオプションも充実しており、
上記の初期化の際に、lazyload()にオブジェクト形式で指定ができます。

・threshold
画面が何ピクセル近づけば表示するかを指定。
下記の場合は100pxとなります。

$(function() {
    $('img.lazy').lazyload({
        threshold : 100,
    }) ;
});

・event
読み込みのイベントを設定。
デフォルトではスクロールされるとイベントが発生しますが、
その他にマウスオーバー、クリックに変更することが出来ます。

$(function() {
    $('img.lazy').lazyload({
        event : mouseover,
    }) ;
});

・effect
fadeInを指定できます。

$(function() {
    $('img.lazy').lazyload({
        effect : fadeIn,
    }) ;
});

・effect_speed
上記のエフェクトにかける時間を指定します。
fast,slowまたはミリ秒単位で指定ができます。

$(function() {
    $('img.lazy').lazyload({
        effect_speed : fast,
    }) ;
});

・failure_limit
一度に表示判定を行う画像枚数の上限を指定できます。
デフォルトでは1度に1枚となっています。

$(function() {
    $('img.lazy').lazyload({
        failure_limit : 2,
    }) ;
});

これらのオプションで応用を効かせることもできそうですね。
簡単ではありますが、以上で説明は終了です!

まとめ


今回のものは特に難しいものでもないのですが、こうしたライブラリはとても汎用性を考えながら組まれているため、
とても参考になりました。私自身業務でjqueryで一機能作成などを担当する機会がありますので、
そういったものもライブラリ化するなど汎用性に富んだものを作っていきたいと感じました。

このシリーズも9回目となり、ひとまず残すところ3回となってきました。
こうして学習内容をアウトプットすることで自身の理解を整理することができ、
非常に有意義な取り組みだと感じています。
この調子で最後までやり遂げたいと思います!!

この記事が少しでもみなさまのお役に立てれば幸いです。

ではまた次回!!
 
弊社開発実績はこちら

formats

AWS Lambda で Promiseを使ってコールバック地獄から脱却する

こんにちは。陽気なシステム屋のうっちーです。

4月になり、弊社にも元気な新卒社員が多数入社してきました。元気な新入社員から刺激をもらいながら負けないように頑張っていかなければいけませんね。

現在弊社ではAmazon Web Servicesのマネージドサービスを活用し、サーバーレス・アーキテクチャでメルマガ配信システムを開発しています。
サーバーレス・アーキテクチャと言えば、S3や DynamoDB、API Gatewayあたりが大活躍するわけですが、ロジックの中心はやはり、AWS Lambdaということになります。

しかし、AWS Lambdaを Javascriptで書いた場合、ちょっと処理が多くなってくると非常にソースコードが見づらくなる悩みがありました。新卒社員にはとても見せられない代物になっていたわけです。
中でも AWS SDKの APIは非同期処理が頻出しますから、いわゆる「コールバック地獄」に陥ることが多かったと思います。

 

つい先日、AWS Lambdaで従来の Node.js 0.10に加え、Node.js 4.3.2が利用可能になりました。
Node.js v4では、ES6(ECMAScript 2015、ES2015)の Promise が使えるわけですから、この機会にゴミコードはサクッと書き直してしまいましょう。

 

これは弊社で実際に使用しているロジックの一部を書き直したものです。

設定テーブルの内容を読んでから実際のデータテーブルを読み、加工・集約処理を行ってから、テンプレートエンジン「EJS」を使ってメール本文を作成します。
宛先アドレスの一覧を取得する処理とテキストメール本文作成処理、HTMLメール作成処理は並列に動いて構わないので、Promise.all しています。
結果を Simple Email Service (SES) を使ってメール送信して、最後に結果を DynamoDB に書き込んでいます。

書き直す前のプログラムがどんなだったかと言うと、、、
恥ずかしいので見せられないですが、Promiseを使って書くと、処理の流れ・フローが非常に分かりやすいと思います。

各関数は

のように Promiseオブジェクトを作って返す構文で包みます。

 

一度、Promiseの味を知ってしまうと、もう Promiseなしでは Lambda Functionは書けないですね。

Node.js 0.10のサポートは今年の 10月までらしいので、過去に作ったFunctionも できるだけ(新卒に見つからないうちに)書き直して保守しやすくしておきたいと思います。

 

※アイエンターではクラウドネイティブで運用コストを劇的に抑えたシステム構築、ソリューション提案を行っています。お気軽にアイエンターへご相談ください!

 

formats

【第8回】Cordovaで端末の加速度センサーを使う

みなさんこんにちは!最若手のリョータです!
ここ数日一気に暖かくなりましたね!
普段生活する分には嬉しい限りなのですが、ウィンタースポーツをするのでかなり残念に思っています。。

さて、本題に入ります!
現在少しずつプライベートでアプリを作成しているのですが、
今のところ少し面白みの薄いものになっており、奮闘中です。。。
そこで、考え込んでいても進まないと思い、ものは試しに加速度センサーで傾きを取得して何かできるかな?ということで、
今回このテーマで実践しようと思いました!

    使い方

前回同様、Cordovaを使用していればプラグインのダウンロードは必要ありません。
今回は下記APIを使用して実装を進めていきます。

navigator.accelerometer.watchAcceleration(accelerometerSuccess,accelerometerError,[accelerometerOptions]);

それではソースを見ていきます。

Cordovaの読み込みが完了してから処理を行ってください。

function onSuccess(acceleration) {
    alert('X 軸における加速度: ' + acceleration.x + '\n' +
          'Y 軸における加速度: ' + acceleration.y + '\n' +
          'Z 軸における加速度: ' + acceleration.z + '\n' +
          'タイムスタンプ: '     + acceleration.timestamp + '\n');
};

function onError() {
    alert('エラーが発生しました。');
};

var options = { frequency: 3000 };  // 3秒ごとに更新

var watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options);

まずは最終行のnavigator.accelerometer.watchAcceleration(onSuccess, onError, options)でwatchAccelerationの参照を取得します。
引数は3つあり、
第一引数:成功時の処理
第二引数:失敗時の処理
第三引数:各種オプション設定
です。

成功時の引数に取得した各値が格納されています。
acceleration.x ・・・X軸方向の傾き。水平で0、-10~10の範囲で取得可能。
acceleration.y ・・・Y軸方向の傾き。水平で0、-10~10の範囲で取得可能。
acceleration.z ・・・Z軸方向の傾き。水平で0、-10~10の範囲で取得可能。
acceleration.timestamp ・・・取得した時刻のタイムスタンプを取得可能。
これらの4つで構成されています。

取得に失敗した場合はonError()に記述した処理が実行されます。
引数はありません。

オプションでは、取得間隔(ミリ秒)を設定しています。
設定可能範囲は40ms~1000msで設定できます。

取得を停止したい場合は、navigator.accelerometer.clearWatch()の第一引数にwatchAccelerationの戻り値である参照を渡せば停止します。
取得していた参照(上記ソースのwatchID)はNULL等、削除したほうが無難です。

これで一定時間間隔の傾きを取得することが出来ました!!

簡単ではありますが、以上で説明は終了です!

まとめ


今回、面白みを出そうと取り組んだ内容ですが、実際に触ってみて色々難しい点も見えました。
やはりハイブリッドアプリなので、ネイティブの機能を動かすと間にJavaScriptを通すためタイムラグが有りました。
ユーザーが傾けて何かを操作する場合、その動作にもたついているとストレスに繋がるのでは、と思いました。
また、この記事を書きながら思ったことなのですが、前回の記事を見ていただくと分かるように、
実装方法が統一されていて、こういったことが使いやすさに繋がっているのかなと思いました。
普段の実装方法にも気を配りながら様々なことに挑戦していきたいと思いました。

この記事が少しでもみなさまのお役に立てれば幸いです。

ではまた次回!!
 
弊社開発実績はこちら

formats

【第7回】 Cordovaで方位を取得!

みなさんこんにちは!
寒暖の差が激しい日々が続いておりますが、いかがお過ごしでしょうか。
体調を崩さないように頑張って行きましょう!

さて、今月3日は節分の日でしたね。
その節分の日に何気なくAppStoreの無料ランキングを確認していたのですが、
今年の恵方を教えてくれるアプリが複数上位にランクインしていました(笑)
なるほど、季節に合わせるとこのようなことも起こるのか、と関心したのに合わせ、
方角であればCordovaでも出来たような。。。と思い、今回挑戦してみることにしました!!

    使い方

Cordovaを使用していればプラグインのダウンロードは必要ありません。
下記APIを使用して実装を進めていきます。

navigator.compasss.watchHeading()

まずは全体のソースです。
Cordovaの読み込みが完了してから処理を行ってください。

function onSuccess(heading) {
    console.log('方位: ' + heading.magneticHeading);
};

function onError(compassError) {
        alert('コンパスのエラーが発生しました: ' + compassError.code);
};

var options = { frequency: 3000 };  // 3秒ごとに更新

var watchID = navigator.compass.watchHeading(onSuccess, onError, options);

まずは最終行のnavigator.compass.watchHeading(onSuccess, onError, options)で現在の参照を取得します。
引数は3つあり、
第一引数:成功時の処理
第二引数:失敗時の処理
第三引数:各種オプション設定
です。

成功時の引数に取得した方位が格納されています。(heading.magneticHeading)
失敗時には引数にエラーコード等が格納されています。
オプションでは、取得間隔(ミリ秒)を設定しています。

取得を停止したい場合は、navigator.compass.clearWatch()の第一引数にwatchHeadingの戻り値である参照を渡せば停止します。

取得される方位は0.0 ~ 359.9のような数値なので、4分割、8分割、、、等切り分けると
南南東、などの表示をすることも出来ますね。
応用の幅は結構広がりそうです。

簡単ではありますが、以上で説明は終了です!

まとめ


今回の動機は自分自身の新しい発見も多く、普段から意識すれば至る所にヒントはあるんだなと思いました。
改めていろんな場所に意識を配りながら新しいことに挑戦していきたいと思います!!

この記事が少しでもみなさまのお役に立てれば幸いです。

ではまた次回!!
 
弊社開発実績はこちら

formats

AWS LambdaとAPI Gatewayを使ってサーバーレスでプッシュ通知を送る

こんにちは。陽気なシステム屋のうっちーです。

前回 の続きです。サーバーレスで Web Pushを実現するために APIを 3つ作成しましたので、その実装の中身を解説していきます。

1つ目の APIは GCM (Google Cloud Messaging) の registration Idを受け取って DynamoDBに登録する機能を担います。

AWS Lambdaで書くと

こんな感じでしょうか。この程度であればLambdaなんて使わずに、API Gateway の 「AWS Service Proxy」機能でもまかなえるかもしれません。

 

次に、プッシュ通知送信を受け付ける機能を実装します。これは、通知に表示する内容を DynamoDBに更新する機能と、送信対象の GCM registrationIdの一覧を DynamoDBから取り出し、ループして実際にプッシュ通知を送る機能に分かれています。

Web Pushで単に通知を送るだけでなくデータ(ペイロード)付きで送れるようにするには、送る内容の暗号化(Web Push Encryption)が必要ということらしいのですが、この部分の仕様がまだ策定中らしく GCMでは対応していません。仕方がないので、送りたい内容を DynamoDBに書いておいて、通知を受けた側(Service Worker)で読み出すようにしました。

※ という仕様で実装したら、GCMは「トピック メッセージング」という機能を実装したようです。

https://developers.google.com/cloud-messaging/topic-messaging

上記の例では DynamoDBから取り出した registrationId に対して、一件ずつ curlコマンドを使って GCMにリクエストを投げています。
ここは複数の registrationId に対してまとめてリクエストを投げるように修正した方が良いかもしれません。

また、Node.js の v0.11では同期的にコマンドを実行する execSyncと呼ばれるメソッドがcoreモジュールから提供されているそうなのですが、AWS Lambdaは現状、Node.jsの v0.10.36ランタイムサポートとなっています。仕方がないので、 http://yosuke-furukawa.hatenablog.com/entry/2014/07/26/145814 の方が作られている execsyncs というモジュールを npm install して使用しました。

 

最後に、DynamoDBから通知に表示するメッセージを取り出す APIを実装します。

これも簡単ですね。AWS Service Proxyでも可能かもしれません。

 

このように、AWS LambdaやAPI Gatewayの機能を活用することによって、必要な機能を部品化し、それらをマッシュアップして一つのサービス(Micro Service)を組み立てることができます。

実際には、Lambda Functionから DynamoDBにアクセスするには、必要なテーブルに必要な権限でのみアクセスできるように適切な IAM Roleを作って割り当てる必要がありますし、APIはIPアドレス制限や CORS、OAuth2認証(Cognito Identity)等を使って保護する必要もあります。しかし、使い道によっては非常に簡単にアイデアを実装できる時代になったと言えるのではないでしょうか。

 

※アイエンターではAmazon Web Services(AWS)を用いたサイト構築、ソリューション提案の実績が多数あります。様々なサービスに対する豊富な知見をもとに最適なご提案を行うことが可能です。お気軽にアイエンターへご相談ください!

formats

PepperからWebブラウザへプッシュ通知を送る

こんにちは。陽気なシステム屋のうっちーです。

あけましておめでとうございます。ご挨拶がすっかり遅くなってしまいましたが 2016年はどんな一年になるのでしょうか。個人的にはProgressive Web Appsが一般化するかもしれないなーなどと思っています。

弊社ではこのところPepperのアプリなんかも作っておりまして、先日チームのメンバーから「来訪されたお客様が受付のPepperに触ったら社員へプッシュ通知を飛ばしたい。」と相談を受けました。というわけで、Webプッシュをやってみましょう。

・Chrome Dev Summit 2015 で振り返る プログレッシブ ウェブ アプリ

http://googledevjp.blogspot.jp/2016/01/chrome-dev-summit-2015.html

以下の CodeLabsに沿ってやっていきます。このハンズオンは GCM (Google Cloud Messaging) を使用していますね。

https://developers.google.com/web/fundamentals/getting-started/push-notifications/

まずは、通知先を登録する Webページを作成します。このページは localhostか HTTPSでホスティングする必要があるので、S3と CloudFrontを使いました。AWS Certificate Manager (ACM) を使うと、サクッと独自ドメインで SSLを使用することができます。

「許可」を押下すると、pushManagerが GCMの registrationIdを受け取ります。

プッシュ通知を送信する際に送信先を識別する必要がありますので、この registrationIdをどこかに保存しておきます。
今回は、Amazon API Gatewayを使って DynamoDBに保存しておきますね。

次に送信側を作成します。

と言っても、送信ロジックは全て API化しちゃいます。Pepperから送信できる必要がありますから。

これで、事前に登録された registrationIdの端末たちに通知が送信されます。

最後に、通知を受けて内容を表示するロジックを書きます。これは Service Workerのイベントハンドラに書きます。
表示する内容を APIで取得するようにします。

ついでに、ユーザーが通知をクリックしたら、アイエンターのホームページを表示するように設定します。

では、実際にプッシュ通知を送ってみます。


以下のように表示されます。

Amazon API Gatewayを使用して、サーバーレスで Webプッシュ通知を実現することができました。
なお、このプッシュ通知は Androidの Chromeでも受信することができます。

API実装の中身については次回以降に解説しますね。

※アイエンターではAmazon Web Services(AWS)を用いたサイト構築、ソリューション提案の実績が多数あります。様々なサービスに対する豊富な知見をもとに最適なご提案を行うことが可能です。お気軽にアイエンターへご相談ください!

formats

【第6回】複数行の三点リーダーに対応するjQueryプラグイン 〜jQuery.ellipsis〜

みなさんこんにちは!
そして、新年明けましておめでとうございます!
今年も引き続き記事を更新していこうと思います。

では早速ですが今月も便利なプラグインをご紹介したいと思います!

実は業務で文章がはみ出る場合に、省略を表す「…」三点リーダーを表示させたいという要望がありました。
初めてやる作業ではあったのですが、良く見る機能なだけに簡単に実現できるんだろうなとたかをくくっていました。。
ですが、いざ調べてみると意外に奥が深く、様々な実現方法がありました。
なかでも簡単だなと感じたのは、CSSで
text-overflow: ellipsis;
を指定するだけで表示領域からはみ出た場合は三点リーダーを表示してくれるものでした。
ですが、一つ問題があり、改行をさせないスタイル指定も必要なため複数行には対応していませんでした。。。

そこで今回ご紹介するプラグインの出番です!

    使い方

まずはjQueryとこのプラグイン(リンク)を読み込みます。
そして、三点リーダーをつけたいものに

    $(".foo").ellipsis();

このように初期化をします。
この時点で各種オプション指定も可能で、

    $(".foo").ellipsis({
        lines: 3,             
        ellipClass: 'ellip', 
        responsive: true      
    });

行数やクラス名の変更、レスポンシブ対応の有無など簡単に変更が可能です。

CSSの指定ですが、先ほどクラス名を変更したので、そのクラス名で指定してみます。

.ellip {
  display: block;
  height: 100%;
}

.ellip-line {
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  max-width: 100%;
}

.ellip,
.ellip-line {
  position: relative;
  overflow: hidden;
}

このように一行の場合は”-line”を指定クラス名の後につけると動作します。

簡単ではありますが、以上で説明は終了です!

まとめ


今回はプラグインのソースコードが250行ほどしかなく、一見簡単なのかなと思いましたが、
想像以上に内容が濃く、コードを短く書く方法など自分なりに参考になった部分がありました。
三点リーダーの複数行対応はCSSのみでもできたりするみたいなのですが、
今回はそのなかでも簡単な方法としてプラグインをご紹介させていただきました。

この記事が少しでもみなさまのお役に立てれば幸いです。

ではまた次回!!
 
弊社開発実績はこちら

formats

【第5回】モバイルライクなUIを簡単に! ~ Onsen UI ~

Published on 2015年12月7日, by in 未分類.

みなさんこんにちは!
今月もCordova関連の情報をお届けしたいと思います!

Cordovaは今までに何度かお伝えしたように、HTML5、CSS3、JavaScriptで作るハイブリットアプリのフレームワークです。
Cordovaを使用するにあたって、もう一つ大事になってくるのがUIだと思います。
ネイティブアプリのようなUIにできれば差を埋めることができると思うのですが、
はじめから作るとなるとかなり大変な作業です・・・。
ですが、便利なことにモバイルUIに特化したOnsenUIというものがあります!
今回はこのOnsenUIについてご紹介したいと思います。

    OnsenUIとは

OnsenUIはJavaScriptのフレームワークである、AngularJSとCSSを用いて各パーツが構成されているフレームワークです。
ダウンロードページからダウンロードし、HTMLのヘッダ部分で読みこめばすぐに使用することができます。

例:

先ほどOnsenUIはAngularJSで作られていると言いましたが、OnsenUIを使用するのはJavaScriptでも可能なので、
新しく学習コストや時間がかかる等の懸念点はなくなるのではないかと思います。

Link:OnsenUI公式ページ

使い方

これに関しては公式ドキュメントを見ていただけるとすぐに分かるのですが、

引用元:OnsenUI公式ページ
このようにのような予め用意されているタグを使用し、クラスを設定、modifier属性を設定すると、
簡単に見やすく、使いやすいUIにすることができます。

これらの他にも様々なパーツが用意されているので、ぜひ公式ドキュメントを参考にしてみてください!

では、続いて私自身が少し戸惑った部分の話をしたいと思います!

 

つまづいた点

OnsenUIはページ遷移等も制御でき、OnsenUIのルートのタグとして”ons-navigator”というものがあります。
これはその名の通りページのナビゲーションを制御できるものなのですが、
私がOnsenUIを触りだしてすぐのころ、ページを増やすとそのページが動かないといった初歩的なミスを繰り返していました。
原因はons-navigatorの子要素であるons-pageを書き忘れていたり、navigatorの外に書いてしまったりという簡単なミスでした。
まだまだ私が未熟だったということもありますが、しっかりと構成を理解したうえで取り組むと、そのようなミスは起きないだろうと思います。
また、都度ドキュメントを確認しながら実装を行い、手馴れてきた頃に応用的な利用方法を行うとなお良いと思います!

もう一つ、AndroidとiOSのOSの違いで微妙にデザインがずれたり、Android限定・iOS限定などのものもあるので、
そこも注意して実装していかないといけないと思います。

まとめ


今回はOnsenUIの内容が濃く、かなり前半しか紹介できませんでしたが、いかがでしょうか。
このような便利なUIフレームワークもあるよという紹介にはなったかなと思います。
あまり内部的な話ができていないので、また次回以降詳しく説明しようかな?と考えています。
実際に私も業務でこのフレームワークの存在を知り、いまでは自作のアプリでも取り込んでいるので、
かなり使いやすく、綺麗なものができるフレームワークだと思います。
気になった方はぜひ一度試してみてはいかがでしょうか!

この記事が少しでもみなさまのお役に立てれば幸いです。

ではまた次回!!
 
弊社開発実績はこちら

formats

【第4回】JavaScriptで3D Touch を使う方法!


みなさんこんにちは!
今回で第4回目となるライブラリの解説、なのですが。
今回は例外として個人的に気になった技術を紹介いたします!

さて、突然ですがみなさんはiPhone6s触ってみましたか?
私はiPhone5sから機種変更しました!なかでも意外と3D Touch機能を使っています。
キーボードを軽く押し込むだけでカーソルを移動できたりと、慣れると便利な機能です。

そこで私は個人アプリに利用したいと思い、JavaScriptで使用できるのか調べてみたところ、、、
ありました!!かなり早く対応するんですね〜。
では実際に試してみましょう!

タッチの強さを取得する

どれほど押し込まれているかの取得はタッチイベントのForceに0~1の値で格納されており、その値を取得できます。
この値を使って様々な処理に応用できますね。

Cordovaでの扱い方

さて、個人的にここからが本題なのですがもしかするとCordovaにもプラグインがあるのでは?!と思いみてみると、、、
やっぱりありました。
私がみるのが遅すぎたのかもしれません(笑)

そのプラグインがこちら(クリック)です!!

これを使うとホーム画面に設置されるアイコンにクイックアクションを設定できたりPeekやPopといったアクションも登録できるみたいですね。
少しソースコードとともに使い方を見てみようと思います。

まずはいつも通りプラグインをダウンロードします。

$ cordova plugin add cordova-plugin-3dtouch

これで下準備は完了です。
次に処理を書いていくのですが、すべてdeviceReadyイベントが発火された後に処理を記述します。

まずはじめに、3D Touchが有効な端末かどうかを判定します。

ThreeDeeTouch.isAvailable(function (avail) {
    // ‘avail’ is a boolean
    alert(“avail? “+ avail)
});

この関数のavailにtrue/falseの値が入っており、使用できるかどうかの判定で使います。

続いてクイックアクションの設定方法ですが、クイックアクション(当記事トップ画像のもの)のアイコンを、
・Apple提供のもの
・個人オリジナルのもの
の二種類を設定できます。

一つ注意点としては、当たり前ではありますが独自の画像を使用する際は、ファイル名は一意であることを確認してください。
また、これらのクイックアクションはxmlで静的にも設定できるみたいですね。
その辺りはリンク先を見ていただくと詳しい情報がありますので、よければご覧ください。

もう一つ機能を紹介いたします。
新しい機能として、リンク先を押し込むと内容を閲覧できるPeekや、
さらに押し込むとそのページに遷移が可能なPopの実装方法も見ていきたいと思います。

リンクを開く機能を有効にするためには、
ThreeDeeTouch.enableLinkPreview();
を記述します。
また、この機能を無効にする場合は、
ThreeDeeTouch.disableLinkPreview();
を呼び出します。

なのですが、これだけだとよくわかりませんね。。。
この辺りは、また次回実際に実装してみた際に追記できればと思います。

さて、ここまで解説をいたしましたが、いかがでしょうか。
私はさらに使いこなせるように実際に機能としてアプリに盛り込んでみようかなと思っています。

この記事が少しでもみなさまのお役に立てれば幸いです。

ではまた次回!!
 
弊社開発実績はこちら

formats

【第3回】おしゃれなグラフを手軽に作成! -jqPlot-

Published on 2015年10月6日, by in 未分類.


こんにちは!

陽気なシステム屋のりょーたです!

今月で3回目です!
今回はビジュアル面も素晴らしいグラフを作成するライブラリ、
jqPlotをご紹介します。
 

jqPlotの読み込み

まず、導入方法ですが特に変わったことはなく、ダウンロードしたファイルを配置しHTMLでインポートします。
因みにjQueryがないと動作しないので事前に入れておいてください。
 
Link:jqPlotはこちらのDownloadから
 
いつも通りではありますが、これで準備完了です!!
さて、続いて基本的な使い方を説明しようかと思いましたが、
公式ドキュメントに詳しく書かれているので、今回は実際の使用で躓いた部分について話そうかと思います。
 
Link:公式ドキュメント
 

応用編!!

さて、今回私が実装したかった機能として、
『〇〇以上は*色にしたい。xx以下は~~』
などといった値によって背景を色分けするといったものでした。

よく目にするので、そういったオプションも用意されているだろうと高をくくっていましたが、
探しても探してもなかなか見つからない…。
公式ドキュメントはもちろんのこと、似たような機能を実装された例も探してみましたがありませんでした…。
少し諦めかけながら、あまり期待せず使えそうなメソッドがあるかソースコードを覗いていたら、なんとか見つけました!!!!!

その名もrectangleです!
使用方法は、グラフの初期設定時にオプションとして、
 

$(document).ready(function(){
  var plot1 = $.jqplot ('chart1', [[30,-10,90,20,50,130,80,120,50]], {
      canvasOverlay: {
        show: true,
        objects: [
          { rectangle: { ymax: 0, xminOffset: "0px", xmaxOffset: "0px", yminOffset: "0px", ymaxOffset: "0px",
                    color: "rgba(0, 0, 200, 0.3)", showTooltip: true, tooltipFormatString: "Too Cold" } },
          { rectangle: { ymin: 100, xminOffset: "0px", xmaxOffset: "0px", yminOffset: "0px", ymaxOffset: "0px",
                    color: "rgba(200, 0, 0, 0.3)", showTooltip: true, tooltipFormatString: "Too Warm" } }
        ]
      } 
  });
});

 
のようにrectangleオブジェクトを生成してやるだけです。
すぐに実装できますね。

余談ではありますが、見つけてから検索するとすぐにドキュメントが出てきました。。。
 
Link:発見した公式ドキュメント
 
この短形を描画するメソッドを用いて、描画した短形の透明度を薄く設定し擬似的に背景色が変わっているように見せることができました。
少し強引ではありますが、これで目的の機能を実装することができました。

 

まとめ

今回はグラフ実装に関する応用的な話を致しました。
なんといっても今回の収穫は検索方法はとても重要だということですね。。。
改めて実感しました。頑張ろう。。。
とはいっても、ソースから目的のものを探すといったこともかなり為になったと思います!
このように詰まる部分もありますが、地道に頑張っていこうと思います。

この記事が少しでもみなさまのお役に立てれば幸いです。

ではまた次回!!
 
弊社開発実績はこちら