著者:村上
【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はあまりヒットせず、苦労しました。
同じことでお悩みの方は、是非参考にしていただければと思います。
著者:村上
【Android Studio】Gradleのバージョンを確認＆アップデートする方法
今日、Cordovaアプリにプラグインを追加しようとした際、Gradleのバージョンが低すぎる！と怒られました。
で、更新方法がわからず調べたので、まとめです。
最初はアプリの build.gradle のどこかを更新するのかと思いましたが、どうやら違うみたいです。
今回参考にさせていただいたサイトはこちらから。
AndroidStudioのGradleのアップデートについて – Pelikan Philosophy
http://www.peliphilo.net/archives/685
バージョンの確認＆アップデート方法ですが、まず Android Studioのメニューバーにある File から Project Structure をクリックします。
そうすると、下の画像のようなウィンドウが表示されるので、左側のメニューから Project を選択します。
そうすると、ウィンドウ上部に、Gradle versionを入力する欄があるので、こちらに任意のバージョンを入力します。
入力出来たら、右下にある OK を押して、ウィンドウを閉じます。
あとは、Android Studio が入力されたバージョンを自動でインストールしてくれるので、それを待てば完了です！
もしかしたら、インストールに少し時間がかかるかもしれませんが、それ以外はとても簡単でした。
冒頭でも書きましたが、てっきり build.gradle に記述しているのではと思い込んでいたので、少し探してしまいました。
やはりわからないことは調べるに限りますね！
著者:村上
【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 でも良いとのこと。
対処法としては以上です！
予想以上に簡単でしたので、同じことでお悩みの方は、是非お試しください。
著者:村上
【MySQL】SELECT文で取得したデータを外部ファイルに書き込む方法
気付けばこの投稿が記念すべき100記事目でした。
いつも必死に書いていましたが、案外100記事ってあっという間ですね。
さて今回は、MySQLでSELECT文で取得したデータを ○○○.csv のような形式で、外部ファイルに書き込む方法です。
すぐやり方を忘れる or 定型文としてメモしてあるのをコピーして使っているだけなので、私のための備忘録としてまとめます。
select * from [テーブル名] INTO OUTFILE '[ファイル名]' FIELDS TERMINATED BY ',' OPTIONALLY ENCLOSED BY '"';
こちらを実行すると、指定したファイル名（例えば data.csv など）で新しくファイルが作られ、そこに抽出したデータが書き込まれます。
具体的には、まず「INTO OUTFILE [ファイル名]」でデータをファイルに書き込みます。
なお、既にあるファイル名を指定することはできません。
次に「FIELDS TERMINATED BY ‘,’」で、抽出したデータをカンマ区切りに変更します。
「OPTIONALLY ENCLOSED BY ‘”‘」では囲み文字を指定でき、抽出したデータを指定した文字で囲むことができます。
今回は、「”（ダブルコーテーション）」でデータを囲みます。
また、サンプルコードでは指定しておりませんが、改行コードを指定することもでき、「LINES TERMINATED BY ‘\r\n’」を使います。
が、エクセルなどで開くと、いい感じに整形してくれるので、あまりこのオプションを使うことは少なそう。
データベースのデータをCSVファイルとして抽出できると、あとから表でまとめるときにとても楽なので、このオプションはとても重宝しています。
が、初めて使ったときは変な風に指定してしまい、おかしな形式になってしまったので、慣れるまではサンプルコードをコピー＆ペーストした方が無難ですね。
著者:村上
【Xcode】実機でアプリを起動できない「Could not find Developer Disk Image」エラーの対処法
Xcodeでアプリを開発中に、実機でiOSアプリの動作確認をしようとしたときに遭遇した「Could not find Developer Disk Image」というエラーの対処法について。
こちらのエラーは、iOS端末をアップデートした際、そのバージョンに対応する Disk Image がXcodeになかったために発生するものです。
つまり、iOSのバージョンが新しく、かつXcodeのバージョンが古いときに発生します。
したがって、対処法としては、Xcodeをアップデートして、最新バージョンにするのが一番手っ取り早いです。
が、何らかの理由で、Xcodeを更新したくない場合の対処法についてはこちらから。
今回は、こちらのサイトを参考にさせていただきました。
【iOS】端末をアップデート後、Xcodeで実機に書き込めなくなった場合 – Qiita
https://qiita.com/Hakota/items/59b4247a203e2639f8c9
まず、下記のサイトから最新のXcodeをダウンロードしてきます。
https://developer.apple.com/downloads/index.action#
ここで注意することは、Beta版ではない最新バージョンのものをインストールすること。
なお、ダウンロード前に、既存のXcodeの名称を Xcode［バージョン］ などに変更しておきましょう。
そうすると、既存のバージョンのXcodeを残したままで、最新のXcodeをインストールできます。
ダウンロードできたら、最新のXcode と、すでにインストール済みのXcode があるかと思うので、それぞれのアイコン上で右クリックして、 パッケージの内容を表示します。
開けたら、下記の場所まで移動します。
Contents/Developer/Platforms/iPhoneOS.platform/DeviceSupport/
すると、下の画像のように、フォルダがずらっと並んでいるかと思います。
で、この一覧を確認すると、今まで使用していた Xcode のフォルダ一覧には、iOS端末のバージョン名のフォルダがないと思います。
なので、最新の Xcode の方から、不足しているフォルダをコピー＆ペーストしましょう。
あとは、ファイルを閉じて、Xcodeを再起動すれば完了です！
端末を接続し、実機でアプリを起動すれば、無事実行されるかと思います。
ということで、OSのバージョンをアップデートした実機で、iOSアプリを起動できないときの対処法でした。
私の環境ではこれで動いたので、同じことでお悩みの方は是非試してみてください。
著者:村上
【スマートウォッチ】体温で発電できる充電不要の「MATRIX PowerWatch」
気になるニュースを見つけたのでご紹介。
なんと、体温で発電して充電が不要なスマートウォッチ「MATRIX PowerWatch」が明日販売されます。
こちらのスマートウォッチを取り上げた記事はこちらから。
体温で発電、充電不要のスマートウォッチが明日発売。MATRIX PowerWatch日本上陸
https://japanese.engadget.com/2018/04/11/matrix-powerwatch/
「世の中はムダな熱であふれている」–体温で発電、充電不要な「MATRIX PowerWatch」
https://japan.cnet.com/article/35117601/
記事によると、なんでも身に着けた利用者の体温と外気温との温度差で発電しているのだとか。
全く発電できるイメージがわかないのですが…そんなことができるんですね。
私もスマートウォッチではありませんが、ドコモの「ムーヴバンド3」というヘルスバンドを愛用しています。
が、確かに充電が面倒だったりするんですよね。
スマートウォッチと比べると、はるかに消費電力が少ないので毎日充電するわけではないのですが、逆に忘れたころに充電が無くなるので、気が付けば充電が切れていた…ということもありました。
充電が少なくなると、バイブレーションで教えてくれるのですが…たまに気が付かないんですよね。
その点、この「MATRIX PowerWatch」は、そもそも充電の必要がないのが凄く良いですね。
スマートウォッチとしての機能は、
- 歩数計
- 消費カロリー計
- 睡眠量計
上記の3点ができるとのこと。
基本的な機能のみに絞られていて、使いやすそうです。
なお、最上位版では、スマートフォンと連携して、電話着信やメッセージの通知を受け取ることができるとのこと。
ディスプレイは白黒の電子ペーパーが使われており、消費電力を押さえているとのこと。
また、出荷時から日本語表示に対応しているとのことでした。
が、発電機能を備えているため、サイズは本体直径が46mm～60mmで、厚さは12.5mm～13.5mmと、結構大きめです。
華奢な女性が付けると、かなりゴツそうに見えるのではと思いますね。
お値段は3万2800円（税別）～4万2800円（税別）です。
なお、発売日はご覧の通りです。
- ベーシックモデル『PowerWatch Silver』…4月12日
- 中間モデル『PowerWatch Black Ops Pack』…4月12日
- 最上位モデル『PowerWatch X』…5月予定
気になったので取り上げはしましたが、買うかどうかというと正直買わないかな…。
見た目はすごく好みだし、機能面にもそこまで不満はないのですが、いかんせん大きすぎる気がします。
そもそも、スマートウォッチよりも、ヘルスバンドの方が私の需要にはあっているんですよね。
が、好みは人それぞれだと思いますので、気になった方は是非購入を検討してみてはいかがでしょうか？
著者:村上
【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 の追加・削除を行う方法でした。