カテゴリーアーカイブ JavaScript

村上 著者:村上

【JavaScript】App Storeに公開済みのアプリのバージョンを取得する方法

タイトル通り、ストアに公開済みのiOSアプリのバージョンを取得する方法です。
Cordovaアプリを開発していて、アプリに新しいアップデートがあれば通知する、という機能を実装するための処理で使用しています。
プラグインが見つかればよかったのですが…見つからなかったので、JavaScriptでゴリゴリ書きました。

今回参考にさせていただいたサイトはこちら。

[iOS] iTunes Search API を利用してアプリの情報を取得する|Developers.IO
https://dev.classmethod.jp/smartphone/get-app-info-using-itunes-search-api/

[JS] iTunes APIをJavaScriptから利用して、iTunesで配信中の楽曲を視聴する – Yoheim.NET
https://www.yoheim.net/blog.php?q=20130702

上の記事で、iTunes Search API の URL の指定方法を。下の記事では、その URL を Ajax で使う方法を参考にしました。
特に、Ajax の指定が間違っていたせいで、URLがあっているのに取得できない!という現象に悩まされました…。

 

先にコードをご紹介。

$.ajax({
    url: 'https://itunes.apple.com/lookup?id=[アプリのID]&country=JP',
    method: 'GET',
    dataType: 'jsonp',
    success: function(data) {
        // 取得成功
        var version = data.results[0].version; // アプリのバージョン
    }, error: function(xhr, type){
        // エラー時の処理
    }
});

URLには、GETの書き方で、アプリのIDと国を指定します。
ポイントとしては、Typeを GET で指定することと、dataType を JSONP という指定にするという点ですね。
最初、単に JSON としてしまったせいで、エラーが発生していました。
成功すれば、変数 data でアプリの情報を取得できるので、そこから必要な情報を取得すればOKです。

 

以上、ストアのアプリのバージョンを確認する方法でした。
Android SwiftObjective-C だと、思いのほかやり方がすぐ見つかるようでしたが、JavaScriptはあまりヒットせず、苦労しました。
同じことでお悩みの方は、是非参考にしていただければと思います。

  • この記事いいね! (0)
takahashi 著者:takahashi

IEで使えない”Object.assign”を補完するPolyfillなjsライブラリ”object-assign.js”

会社で構築していたプログラムのデバッグをしていたところ、IEで動作しないファンクションを発見してしまいました…

Object.assign() – MDN Web Docs
この関数は

一つ以上の ソース オブジェクトから、直接所有で (own) 列挙可能な (enumerable) すべてのプロパティの値を、ターゲット オブジェクトへコピーします。

という機能を持っているのですが、この関数がInternet Explorerで対応していなくて、プログラムがIEで動かない状況が発生してました。

IEで対応していない、といわれるとかなり焦ってしまいますが、よく使われている関数については、大抵の場合代替えとなる関数を誰かが公開していることが多いです。
今回の Object.assign() については、こちらのサイトでPolyfillなライブラリが公開されていました。

spiralx/object-assign.js – Gist

今回は、このGistのコードを使わせていただきました。

使い方は簡単。
Object.assign()を使用しているページで、一緒にobject-assign.jsを読み込むだけ。
“assign”という名前で使えるようにしてくれているので、コード内で記述したファンクションを書き換える必要がないのは非常にありがたいです。

今回のように、新しいブラウザでしか対応していない関数をほぼ同じ機能を持つ同じ名前の自作関数として定義してしまうことで、使えるようにしてしまう手法のことを”Polifill”と呼ぶそうです。

反対に、その関数でやりたかったことを別の関数で代替えすることを”Ponyfill”と呼ぶそうです。

PolyfillとPonyfill – Qiita

それぞれの違いや、メリット/デメリットについては、上記の記事が非常に分かりやすいです。

html5によって、各ブラウザ間の動作はそこそこ統一されてきている印象はありますが、まだまだ完全な互換性があるとはいいがたく、依然としてWebプログラムのデバッグをするために、主要なブラウザで一通り動作確認をする必要があるのが現状です。

特に酷いのがビューの部分。ブラウザによって大分解釈が違うようで、Chromeは意図通りに動いても、SafariやIEだとめちゃくちゃに崩れている…なんてことも結構あり、油断できません。

正直HTML5の意味…とか思ってしまうけど、統一するのもなかなか一筋縄ではいかないのでしょう。
HTML5はまだ改善の途上ですし、今後に期待したいです。

とりあえず、せめてモダンなブラウザとの互換性がかなり微妙なIEがデファクトスタンダードな風潮だけは抜けてほしいなーと思いますね…

  • この記事いいね! (0)
村上 著者:村上

【JavaScript】クライアント側にデータを無期限に保存できる「LocalStorage」

クライアント(ブラウザ)側にデータを保存する方法としては、Cookie がよく使われているかと思います。
が、個人的に使い勝手が良いと思っているのが、「Local Storage」です。

Local Storage も Cookie と同じように、ブラウザにデータを保存できます。
データの保存・取得・削除・全クリアなどの操作は、JavaScriptで行います。
Cookie と LocalStorage の違いをまとめた表はこちら。

別ウィンドウでのデータ共有 データの有効期限 データ量の上限 サーバーへのデータ送信
Cookie できる 指定期限まで有効 4KB サーバーへアクセスするたびに毎回自動送信
LocalStrage できる 永続的に有効 5MB 必要時のみスクリプトやフォームなどで送信

なお、こちらの表は、下記のサイトから転載させて頂いております。

Web Storage ‐ HTML5のAPI、および、関連仕様
http://www.htmq.com/webstorage/

 

具体的な使い方は、下記のとおりです。
 

・データの保存、上書き

window.localStorage.setItem('nickname', 'murakami');
localStorage.nickname = 'murakami';

上記のどちらでもOKです。
個人的には、上の書き方の方が好みなので、こちらを使っています。
なお、1つめの記述方法ですが、window は省略可能です。
 

・データの取得

var name;
name = window.localStorage.getItem('nickname');
name = localStorage.nickname;

取得するための記述はこんな感じ。
なお、こちらの書き方についても、window は省略できます。
 

・データの削除

window.localStorage.removeItem('nickname');  // 'nickname'の値を削除
window.localStorage.clear();  // 全削除(初期化)

最後はデータの削除ですが、アイテム名を指定して、その値のみを削除する方法と、全データを削除する方法があります。
無いとは思いますが…書き間違えにご注意ください。
なお、例にもれず、こちらも window を省略可です。

 

個人的には、Cookie よりも直感的に操作出来るし、意図的にデータを消さない限りデータが半永久的に残るので使いやすいです。
Cookieで苦しめられた記憶のある方は、こちらの Local Storage の導入を検討してみてはいかがでしょうか。

  • この記事いいね! (1)
村上 著者:村上

【JavaScript】クリックイベント等で取得したオブジェクトの中身

JavaScrip の クリックイベント等で、よく下記のようなコードを書くかと思います。

$("#button").on("click",function(event){
    // クリック時に実行したい処理
});

で、この時に取得できるオブジェクトから取得できる値の中で、使用頻度の高そうなものをまとめてみました。
今までは、イベントをキャンセルする event.preventDefault(); くらいしか使ったことがなかったんですよね。

 

・DOM要素の取得

var dom = event.target;

クリックしたDOM要素を取得できます。
が、これはこのまま使うよりも、後述する、ID・class名の取得と一緒に使う事の方が多そうですね。
 

・クリックした座標の取得

// x座標
var x = event.x;
// y座標
var y = event.y;

こちらはクリックした位置を取得できます。
click イベント以外にも、mousemove イベントや touchmove イベントでももちろん使えます。
 

・ID、class名の取得

// ID名取得
var id = event.target.id;
// class名取得
var class = event.target.className;

先述した、DOM要素の取得で取得できた要素の ID名、class名を取得できます。
 

・要素の幅と高さ

var width = event.target.offsetWidth;
var height = event.target.offsetHeight;

target で取得できた要素の幅と高さを取得する方法です。
単に width、height と記述しただけでは取得できないので、そこは要注意ですね
 

・要素のスタイル

var eventType = event.target.style;

要素のスタイルを取得できます。
これは .css() メソッドと一緒に使うことが多そうかな?
 

・イベントタイプの取得

var eventType = event.type;

イベントの種類を取得する方法です。
これも便利そうですね。

個人的には、要素名を取得するメソッドがあるとよかったのですが、無さそうだったので…今回はclass名の取得で対処しました。
まあ、でもclass名でも問題はなかったです。
…良く思うのですが、一度アルゴリズムでハマって考え込んでしまうと、「このやり方でなければいけない」と思い込んでしまうので、柔軟な発想って重要だなとつくづく思います。

 

以上、クリックイベント等で取得したオブジェクトから取得できる値の一覧でした。
他にも、要素の親要素・子要素を取得する方法もありましたが、今回は割愛します。
詳しくは、今回参考にさせていただいた下記のサイトをご覧ください。

【JavaScript】クリックイベントで取得したオブジェクトの使い方 まとめ|Web制作会社スタイル
http://www.hp-stylelink.com/news/2014/04/20140422.php

  • この記事いいね! (0)
村上 著者:村上

【JavaScript】角度の調節も可能な吹き出し型ツールチップ「grumble.js」

チュートリアルなどで、ページの説明をするときなどにちょうど良さそうなツールチップ「grumble.js」のご紹介。
実装がとても簡単なのに、かなり良い感じの見た目なので、おすすめです。

GitHubページとデモページはこちらから

https://github.com/jamescryer/grumble.js
Examples and documentation on grumble.js

 

インストール等準備については割愛します。
で、一番シンプルなコードは下記のとおり。

$('#start').click(function(e){
    e.preventDefault();

    $('#grumble').grumble({
        text: 'ボタンです',  // 吹き出し内に表示したいテキスト
        angle: 200,  // 吹き出しの角度
        distance: 3,  // 要素との距離
        showAfter: 1000,  // 何秒後に表示
        hideAfter: 2000  // 何秒後に非表示
    });
});

HTMLは下記のように記述しました。

<button id="start">grumble.js START</button>
<button id="grumble">ボタン</button>

「grumble.js START」と書かれたボタンをクリックすると、1秒後に「ボタンです」と書かれた吹き出しが表示され、表示された2秒後に自動的に消えます。

 

なお、吹き出しの大きさは、指定したテキストの長さによって自動的に変更されます。
また、特に指定しなくてもフェードイン・フェードアウトで表示されますので、それもなかなかいい感じです。

主には上のコードで事足りますが、それ以外に使えるオプションは下記のとおり。

type: 'alt-'
hideAfter: false
hasHideButton: true

1つ目は、指定すると、吹き出しが青色になります。
なお、吹き出しの色はオレンジと青の2色が用意されているようです。

2つめは、上でもご紹介した、吹き出しを非表示にする秒数を指定する hideAfter です。
こちらに、数値ではなく false を指定すると、吹き出しをクリックしたときに消えるようになります。

3つめは吹き出しを消すボタンが表示されるオプションです。
吹き出しの右下に、小さく四角いボタンが表示されます。
こちらは、hideAfter に false を指定した時に一緒に使うようですね。
ただ、個人的にはボタンのデザインがちょっと微妙かなと感じるので、あまり使うことはなさそう…。
CSSで無理くりデザイン変更しちゃえばOKかな?

 

と、いうことで、吹き出し型ツールチップ「grumble.js」のご紹介でした。
コードもシンプルで、動きも軽快なので、使い勝手は良さそうです。
簡単なチュートリアルを実装したいときなどに使ってみてはいかがでしょうか?

  • この記事いいね! (0)
村上 著者:村上

【JavaScript】aタグでの画面遷移をキャンセルする方法

久しぶり?なJavaScriptについての私用備忘録。
今回は、HTMLのaタグをクリックした際に、画面遷移をさせない方法についてです。

例えば、下記のように指定していた場合に使えます。

<a href="#">リンク1です</a>

普通に実行すると、URLの最後に # が付いてしまいますが、画面遷移を無効にすることで、URLの最後に # が付くことを防ぐことができます。

 

で、この実装方法ですが、preventDefault というメソッドを使います。
具体例は下記のとおり。

// 本サイトのトップページへのリンクです
<a href="https://cpoint-lab.co.jp/" id="link">https://cpoint-lab.co.jp/</a>
// リンクの要素を取得
var element = document.getElementById("link");
element.addEventListener("click", function(e){
    // リンクがクリックされたときの処理
    e.preventDefault();  // 画面遷移を無効化
}, false);

コード自体は、実にシンプルです。
リンクがクリックされたときに、デフォルトのイベント=画面が遷移するのを抑止しています。

なお、jQuery の場合は、下記のように記述します。

$("#link").on('click', function(e){
    e.preventDefault();  // 画面遷移を無効化
});

クリックを検知している箇所の記述が違うだけですが、こんな感じ。

他にも、stopPropagation というメソッドや return false で遷移を無効化している例もありましたが、個人的にはこれが一番わかりやすかったので、こちらを使用しています。

 

以上、aタグでの画面遷移をキャンセルする方法でした。
なお、フォームの送信をキャンセルするのにも使えます。
画面遷移は使用頻度低そうですが、フォームの送信キャンセルは ajax とかでよく使われるので、覚えておいて損はないはず。
似たようなことでお困りの方は、是非ご参考にしていただければ幸いです。

  • この記事いいね! (0)
村上 著者:村上

【JavaScript】要素に指定したCSSスタイルを取得する方法

CSSの変更や追加だったら、

// IDがcontentの要素の横幅を100pxに変更
$("#content").css('width', '100px');

上記のような記述が有効ですが、単にCSSの取得だけをしたかったので、方法をまとめ。

なお、今回参考にしたサイトはこちらです。

styleタグのCSSや外部CSSの値を取得 – 三等兵
http://d.hatena.ne.jp/sandai/20100616/p1

 

結果だけ先に載せると、下記のように記述すると、各スタイルが取得できます。

// ID が contentの要素のCSSを取得
var element = document.getElementById('content');
var style = element.currentStyle || document.defaultView.getComputedStyle(element, '');

あとは、取得したいプロパティを指定すれば、そのプロパティの値を取得できるので、if 文の条件式に入れるなりして使用できます。

if(style.display == 'none'){
    // displayプロパティの値が none の時のみ実行する処理
}

 

上で紹介したサイトによると、.style は 要素に対して style 属性で指定したスタイルしか取得できないとのこと。
サンプルはこんな感じ。

<div id="content" style="width:100px"></div>
var element = document.getElementById('content');
console.log(element.style.display);

そのため、上記のコードでは、width は取得できますが、display は取得できないとのこと。
なので、読み取り専用の getComputedStyle() メソッドを使って、スタイルを取得しています。
また、currentStyle はIEの独自規格で、getComputedStyle() が使えないIEで実行したときのための記述です。
もしIEでは絶対に使わないとのことでしたら、currentStyleは省略してもよさそうですね。

 

ということで、JavaScriptでCSSで指定したスタイルを取得する方法でした。
私は、指定した要素の表示・非表示に応じて、とある処理を実行するかどうかを変更したかったので、今回こちらの処理を使いました。
が、普通にCSSの変更だけなら、今回の記事の一番最初に書いた処理でOKなので、あまり使用頻度は高くなさそうですね。

  • この記事いいね! (0)
村上 著者:村上

【JavaScript】フォームの送信ボタンの2重クリックを防止する方法

最近このフォームの2重送信に悩まされているので、とりあえず思いついた対処をメモ。
しかし、まだ解決には至っていません…何故効かないのか…。

 

■ ボタンを無効化する(disabled)

送信ボタンを押した後、JavaScriptで、そのボタンを押せなくする方法です。
これが一番わかりやすいかな?
サンプルコードは下記のとおりです。

<form>
    <input id="submit" type="submit" value="送信" />
</form>
var postingFlg = false;
$("#submit").on("click",function(){
    document.getElementById("submit").disabled = true;
    $.ajax({
        type: "POST",
        url: "送信先URL",
        data: "送信するデータ",
        success: function(msg){
            document.getElementById("submit").disabled = false;
        });
    }
});

ボタンが押されたら、ボタンを「disable = true」にし、送信などの処理が終わったら「disable = false」にして、再びボタンを有効化します。
そうすることで、処理中はボタンを押しても処理が走らないようにすることができます。
これは直感的で使いやすい印象ですね。

 

■ フラグを立てる

上のと少し似ていますが、こちらはフラグとなる変数を宣言し、その内容を見るパターン。
サンプルはこんな感じ。

<form>
    <input id="submit" type="submit" value="送信" />
</form>
var postingFlg = false;
$("#submit").on("click",function(){
    if(!postingFlg){
        postingFlag = true;
        $.ajax({
            type: "POST",
            url: "送信先URL",
            data: "送信するデータ",
            success: function(msg){
                postingFlg = false;
            }
        });
    }
});

送信の処理は、postingFlg の値が false の時のみ実行するようにしておきます。
そしてボタンが押されたら、postingFlg の値を true にし、処理が終わったら、postingFlg を false に戻します。

 

とりあえず試したのは上記の2つです。

個人的な好みは、1つ目のボタンの無効化ですね。
そもそもボタンを押せなくなるので、ユーザ側にもわかりやすいかと思います。
が、このあたりは、状況に応じて使い分けてください。
そして、もっといい方法があれば、是非お教えいただきたい…!
どうぞよろしくお願い致します。

  • この記事いいね! (0)
村上 著者:村上

【JavaScript】配列←→JSON文字列に変換する方法

今回はJSONの取扱いについて。
JSONから配列へ、もしくはその逆をやることがあるので、まとめてみます。

 

■ JSON → 配列

JSON文字列を配列にするときには、JSON.parse() を使います。
使用例は下記のとおりです。

var json_text = '{ "a" : 100, "b" : 200, "c" : 300 }';
var arr = JSON.parse(json_text);

 

■ 配列 → JSON

先程とは逆に、配列をJSON文字列に変換したいときは JSON.stringify() を使います。

var arr = ["a","b","c"];
var json_text = JSON.stringify(json_text);

 

パッと見ただけでは、何かが変わったようには見えないのですが、確かに配列←→JSON文字列に変換できていました。
JavaScriptでは、Ajaxの処理をするときに、渡すデータが JSON だったり、もしくは結果が JSON で返ってきたりするというシチュエーションが多いかな?
意外と使用頻度は高そうですが、特にスペルミスで、再検索したりするので、この機会に備忘録を兼ねてまとめてみました。
私は特に stringify のつづりを間違えます…。iが抜けるとか。

もしJSONを扱うときがあったら、ご活用いただければと思います。

  • この記事いいね! (0)
村上 著者:村上

【JavaScript】テキストボックスに当てられたフォーカスを外す方法

今回はタイトル通り、Webサイトなどでテキストボックスに当てられたフォーカスを解除する方法です。
パソコンでは特に問題ないのですが、スマートフォン、特にAndroidでフォーカスが外れなかったために、ソフトフェアキーボードが消えず、ちょっと面倒な目にあったんですよね…。

で、肝心の方法ですが、フォーカスを外したいタイミングで下の3行を実行するだけ。

// 現在アクティブな要素を取得する
var active_element = document.activeElement;
// フォーカスを外す
if(active_element){
  active_element.blur();
}

いたってシンプル&簡単です!

 

ただ、この処理は要素からフォーカスを外すだけなので、逆に指定した要素にフォーカスを当てたい場合は下記のように記述します。

var element = document.getElementById("フォーカスを当てたい要素のID"); 
element.focus(); // カーソルを合わせる

 

ということで、要素からフォーカスを外す方法でした。
そこまで使用頻度は高くなさそうですが、覚えておけば便利かも?
もし、使う場面があれば、是非ご活用ください。

  • この記事いいね! (0)