著者:村上
【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 や Swift、Objective-C だと、思いのほかやり方がすぐ見つかるようでしたが、JavaScriptはあまりヒットせず、苦労しました。
同じことでお悩みの方は、是非参考にしていただければと思います。
著者: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”と呼ぶそうです。
それぞれの違いや、メリット／デメリットについては、上記の記事が非常に分かりやすいです。
html5によって、各ブラウザ間の動作はそこそこ統一されてきている印象はありますが、まだまだ完全な互換性があるとはいいがたく、依然としてWebプログラムのデバッグをするために、主要なブラウザで一通り動作確認をする必要があるのが現状です。
特に酷いのがビューの部分。ブラウザによって大分解釈が違うようで、Chromeは意図通りに動いても、SafariやIEだとめちゃくちゃに崩れている…なんてことも結構あり、油断できません。
正直HTML5の意味…とか思ってしまうけど、統一するのもなかなか一筋縄ではいかないのでしょう。
HTML5はまだ改善の途上ですし、今後に期待したいです。
とりあえず、せめてモダンなブラウザとの互換性がかなり微妙なIEがデファクトスタンダードな風潮だけは抜けてほしいなーと思いますね…
著者:村上
【CSS】:activeなどの疑似クラスがスマートフォンで効かない時の対処法
クリックした時や、要素の上にマウスを乗せたときのスタイルを指定できる疑似クラスはとても便利でよく使いますが、今回スマートフォンではスタイルが反映されないという現象に遭遇しました。
しばらくCSSの書き方が間違っているのかと悩みましたが、どうやら関係なかったみたいです。
で、対処法がこちら。
a:active, a:hover {
background-color: red;
}
<a href="[リンク先]" ontouchstart="">リンクはこちら</a>
疑似クラスを指定した要素、今回は、aタグに対して、ontouchstart属性 を追加するだけです。
これを追加することにより、:active と :hover が有効になります。
ちなみに、:active は要素がタップされたとき、ここで指定したスタイルが反映されますが、:hover は、マウスオーバー時ではなく、要素をタップ後、別の要素がタップされるまでの間、指定した要素が反映されます。
参考にさせていただいたサイトはこちらから。
:hoverに設定したCSSがスマホで反応しない時の対処｜ビギナーズハイ
http://beginners-high.com/css-hover/
なお、追加する属性は、ontouchstart 以外にも、ontouchend や ontouchmove でも良いとのこと。
対処法としては以上です！
予想以上に簡単でしたので、同じことでお悩みの方は、是非お試しください。
著者:村上
【CSS】要素の幅や高さを指定する単位vw、vhとは
昨日の私の記事の中で紹介したCSSプロパティに
height : 100vh;
上記のようなものがありました。
今回はこのプロパティについてです。
この vw や vh とは要素の幅や高さを指定する時に使用する単位です。
viewport width と viewport height の略です。
ビューポートとは何かについては下記のサイトが参考になります。
実践！スマホサイトのviewport設定 – 第1回 viewportとはなにか？｜CodeGrid
https://app.codegrid.net/entry/whats-viewport
ごく簡単に説明すると、ビューポートとは表示領域のことで、PCなどのデスクトップ環境では、ブラウザのウィンドウサイズにあたります。
そのため、例えば要素に
width: 100vw;
上記のように指定すると、このCSSを指定した要素の横幅は、ウィンドウの横幅100%となります。
ウィンドウ横幅 100%＝100vw なので、width: 10vw; と変更すると、要素の横幅はウィンドウ横幅 1/10、つまり10%になります。
高さを指定したいときは、viewport height を使い、例えば height: 100vh; と記述すると、要素の高さはウィンドウの100%になります。
今まで通り、width: 100%; を使ってもいいのですが、これは親要素に対してのパーセンテージになるため、仮に親要素の幅が ウィンドウの50%の幅だった場合は、width: 100%;を指定しても、ウィンドウの横幅 50% にしか広がりません。
その点、vw、vh を使えば、親要素の影響なく、ウィンドウの画面サイズを基準に、幅や高さを指定することができます。
私は主に、スマートフォンの画面デザインの時に、calc() と一緒に下記のように使うことが多かったです。
height: calc(100vh - 100px);
上記のように指定すると、このプロパティを指定した要素の高さは、ブラウザの画面の高さから 100px だけ引いた高さになります。
そのため、わざわざJavaScriptで画面の高さを取得して、そこから 100px 引いて、そしてCSSの高さを再指定して…ということをしなくて済むので、かなりコードがすっきりしました…！
以上、要素の高さや幅を指定するビューポートの単位 vw、vh についてでした。
なお、他にも vmax や vmin というものもあるそうですが…こちらは使ったことがないので、今回は割愛します。
興味のある方は、ご自分で調べてみてください。
著者:村上
【CSS】知らないプロパティがあるかも「「出会えたことに感謝したいCSSベスト3」まとめ」
今回の記事は、「#出会えたことに感謝したいCSSベスト3」というTwitterのタグをまとめたサイトについて。
見ているだけでも、私の知らないCSSプロパティばかりで、かなり参考になりそうだったので紹介します。
サイトへのリンクはこちらから。
「出会えたことに感謝したいCSSベスト3」まとめ（随時更新中）
https://togetter.com/li/1216261
流し読みしているだけでも、知らないプロパティがわんさか出てくるので、かなり勉強になります。
中でも良く挙げられているのが「display: flex;」というプロパティでした。
こちらはこのプロパティを指定した直下の要素が並列になるというものです。
使ったことはないのですが、調べた感じではとても便利そうでしたので、機会があったら是非使ってみたいですね。
あとは、以前紹介した calc プロパティも挙げられていました。
私もこれは凄く便利だと思うので、TOP3の中に入れると思います。
ちなみに、私が挙げるとしたらこんな感じ。
- calc
- height: 100vh;
- transform: translate(-50%, -50%);
calc が 1位なのは譲れませんね。
2位は、高さを画面の 100% にしてくれる vh という単位で、これにはかなり助けられました。
3位の transform: translate(-50%, -50%); は、要素を左右上下中央揃えにしたいときに重宝しています。
当たり前ですが、CSSのプロパティって知らないと使えないので、こんな風に色んな人が「これ良いよ！」と紹介してくれると、知らなかったプロパティに出会えて凄く参考になります。
調べるにも限度があるので…こういうまとめサイトも積極的に目を通してみようかと思います。
興味があれば是非見てみてください！
Webデザイナーさん以外の方でも参考になると思います。
著者:村上
【HTML】フォームデータの送信先を指定する「formaction」属性
デバックのためにコード見ていて、使ったことがない属性だったので、覚え書きとして。
HTML の Button要素である、「formaction」属性についてです。
なお、今回参考にさせていただいたサイトはこちら。
formaction属性 ≪ button要素 ≪ フォーム ≪ 要素 ≪ HTML5入門
http://html5.cyberlab.info/elements/forms/button-formaction.html
私がよく使うFormの書き方ですが、
<form action="データ送信先" method="post">
<input type="text" name="name">
<input type="email" name="email">
<input type="submit" name="submit" value="送信">
</form>
今まで、上記のように書いていました。
が、今回後輩君が書いたコードの中に、下記のような記述を発見。
<form action="[データ送信先URL]" method="post">
<input type="text" name="name">
<input type="email" name="email">
<button type="submit" formaction="[データ送信先]">送信</button>
</form>
butoon要素に、見慣れない formaction という属性があります。
この「formaction」ですが、HTML5で新たに追加されたもので、フォームデータの送信先URLを指定するときに使う属性とのこと。
で、注意したいのが、button要素の formaction属性 で定した送信先URLは、form要素の action属性 で指定した送信先URLよりも優先されること。
そのため、下記の場合は、botton要素 で指定した「送信先URL2」が優先されます。
<form action="[データ送信先URL1]" method="post">
<input type="text" name="name">
<input type="email" name="email">
<button type="submit" formaction="[データ送信先2]">送信</button>
</form>
私の場合、うっかり違うURLを指定してしまい、違う送信先に送られる！？ということをやらかしそうです。
それを回避するためには、冒頭で挙げた記述方法を使うのが良さそうですね。
ということで、見慣れない formaction属性 についてのまとめでした。
これ便利！使おう！というよりも、こんな属性あるよ！という意味合いの方が強いまとめでした。
著者:村上
【jQuery】指定した要素に class を追加・削除する方法
今日、後輩くんに質問されたので、自分の覚書としてもまとめ。
要素に指定したクラスを削除する方法です。
もちろん、削除だけでなく、追加もできます。
参考にしたサイトはこちら。
jQuery classの追加・削除 – Qiita
https://qiita.com/NobuyaIshikawa/items/300739f6da6a95e58306
使うメソッドは、addClass() と removeClass() です。
・addClass()
使い方は下記の通り。
<div id="content">クラスを追加する要素</div>
$("#content").addClass("add");
上記の jQuery を実行すると、id=”content” を指定したDIV要素に対して、class=”add” が追加されます。
・removeClass()
removeClass() の使い方は下記の通り。
<div id="content" class="remove">クラスを削除する要素</div>
$("#content").removeClass("remove");
こちらを実行すると、class=”remove” が DIV要素から削除されます。
・toggleClass()
こちらは今回調べて初めて知ったメソッドですが、要素に指定したクラスがあったらクラスを削除し、クラスがなかったらクラスを追加する、というものでした。
これなら、要素があるかどうかを調べる hasClass() を使って検索し、その結果で条件分岐…という処理を書かずにすみますね。
具体的には下記のとおりです。
if($("#content").hasClass("add")){ // add という class があるかを調べる
$("#content").removeClass("add"); // あったら削除
} else {
$("#content").addClass("add"); // なかったら追加
}
上記の処理が、下記の一行で済みます。
$("#content").toggleClass("add");
これは楽ですね！
見慣れないと、逆に何をしている処理なのかがわかりにくいので、コメントが必須かもしれませんが…コードの行数が少なくてすむ＆簡略できるのは嬉しいです。
ということで、jQuery で class の追加・削除を行う方法でした。
著者:村上
【CSS】アルファベットの大文字・小文字での表示を指定する方法
私の場合は、小文字が強制的に全て大文字になってしまったのがきっかけで調べたプロパティです。
使用するプロパティは「text-transform」です。
こちらは、アルファベットを大文字もしくは小文字で表示するかを指定できます。
指定できる値は下記のとおりです。
| 値 | 表示される文字の形式 |
| none | 初期値。大文字・小文字は記述した通りに表示されます |
| capitalize | 単語の先頭文字を大文字で表示します |
| lowercase | 全ての文字を小文字で表示します |
| uppercase | 全ての文字を大文字で表示します |
私は none を使いましたが、capitalize も便利そうですね。
が、たまに頭文字を大文字にしたくない時もあるので、そういうイレギュラーなときのことも考えると、none を使うのが無難かな。
で、今回すべての文字が大文字になった原因は、恐らく text-transform: uppercase; が body など結構上位の要素の方に指定されていたためだと思われるので、body で !important を使って強制的に上書きしました。
とりあえず、これで解決です。
以上、アルファベットの大文字・小文字での表示を指定する方法でした。
何故か小文字で書いたはずの英単語がすべて大文字になる！という場合は、こちらのプロパティが記述されていないか疑ってみてください。
著者:村上
【Xcode】Type ‘UISlider’ does not conform to protocol ‘ValidatableInterfaceElement’エラーへの対処法
久しぶりに遭遇したXcodeでのエラーです。
特に内容を変更した記憶のないアプリを開いてみたら、いきなりビルドエラーが発生しました。
エラー分は下記のとおりです。
Type 'UISlider' does not conform to protocol 'ValidatableInterfaceElement'
どうやら、CocoaPodでインストールした「Validator」というライブラリ内部でエラーが発生していたことまでは突き止めたのですが、その原因がわからず…検索してもヒットしない状況でした。
なお、Validator についてはこちらから。
GitHub – adamwaite/Validator
https://github.com/adamwaite/Validator
が、会社にあるもう一台のMacbookでは問題なく動いていたので、そこが謎でした。
で、色々見てみた結果、どうやらXCodeのバージョンが影響していたことが判明！
先日、Xcode をアップデートして 9.3 にしたのですが、これを 9.2 に戻したら問題なく動き、ビルドも完了しました。
……Xcodeは不用意にアップデートしてはだめですね…。
なお、Xcodeの以前のバージョンをインストールする方法は、下記の記事を参考にしました。
Xcodeの旧バージョンをインストールする方法 – Qiita
https://qiita.com/TsukasaHasegawa/items/0d7d5c2cf3a2b8ce8993
ただ、ダウンロードに凄く時間がかかったので、何か別の作業をしながらのんびり待つことをおすすめします。
ダウンロード時間が「残り約60分」の表示を見た時は、正直ため息を付きそうになりました…。
ということで、ビルドエラーの解消方法でした。
同僚に聞いたところ、Xcode のバージョンの違いのせいで発生するバグってあるようなので、バグの原因が分からないときに確認するようにしましょう。
著者:村上
【CSS】要素に指定したCSSスタイルを解除する方法
今回はCSSを解除する方法について。
複数のCSSファイルを適用しているサイトで、指定した要素に既に別のスタイルが指定されている場合があるかと思います。
で、その既に設定されているCSSスタイルを解除する方法です。
参考にさせていただいたサイトはこちらから。
CSSのスタイルを解除する – Qiita
https://qiita.com/kijitora-neko/items/155b1bc499a365ea1e3f
スタイル解除に使うのは、initial という値です。
これを、スタイルを解除したいプロパティの値に指定するだけ。
指定方法のサンプルは下記のような感じです。
div {
display: initial;
}
span {
text-align: initial;
}
解除方法はたったこれだけです。
ということで、CSSスタイルを解除する方法でした。
!important を使って上書きする方法はありますが、解除は知らなかったので、これはなかなか使えそうです。
が、Internet Explorer 10 では動作しないとのことなので、動作確認は念入りにしてください。
また、プロパティによっては初期値がある場合もあるので、その時は初期値を指定したほうがよさそうです。
状況に応じて、便利に使いましょう。