著者アーカイブ 村上

村上 著者:村上

【Xcode】アプリをアップロードできないときの対処法

最近は遭遇率がほぼゼロなのですが、一時期、正規の方法でXcodeからApp Storeにアプリをアップデートできない時がありました。
で、その時の対処法についてまとめ。
ちなみに、主な原因はネットワーク接続エラーでした。
そのため、接続先を変更すれば改善されることもありましたが、どうしようもないときにこちらの方法を使いました。

なお、今回参考にさせていただいた記事はこちらから。

Xcodeからアップロードできないときは、Application Loaderを使おう – Qiita
https://qiita.com/_natsu_no_yuki_/items/68140e7c0e96afbb2e4b

 

さて、そのアップロード方法ですが、まず Archive を実行すると自動的に表示される下の画面から、アプリをエクスポートします。

なお、この画面は、Xcodeのメニューから Window > Organizer からも開くことができます。

エクスポートが完了したら、Xcode の メニューから Xcode > Open Developer Tool > Application Loader を選択します。

すると、下記のような画面が表示されるので、下の選択から、先程エクスポートしたアプリの iOS App ファイル(拡張子が .ipa)を選択します。

ファイルを選択後、アプリの情報が表示されたら、次へを押せば完了です。
これでアップロードできたので、あとは、アプリ情報が反映されるのを待つだけです。

 

以上、アプリがアップロードできないときの対処法でした。
当時、ひどいときは 2〜3回試しても失敗したので、そのときはこの方法を使っていました。
最近では、全くと言っていいほど遭遇しなくなり、ありがたいですが…いざというときのために覚えておきたいです。

村上 著者:村上

【PHP】画像URLから画像をBase64にエンコードする方法

昨日の記事に引き続き、本日もPHPについて。
今回は、画像URLを Base64 にエンコードする方法です。
…需要があるかは分かりません。

Webページの読み込み時に、画像の表示があまりに遅かったり、そもそも表示できないものがあったので、Base64に変換してしまえば何とかなるのでは?と試してみました。

 

コードはこちらから。

$image_url = [変換したい画像のURL]; 
$entry_image = "";  // Base64に変換後のデータ
if(!empty($image_url) && @file_get_contents($image_url, NULL, NULL, 0, 1)) {
    switch (true) {
        case preg_match('/(\.jpg)$|(\.jpeg)$|(\.JPEG)$|(\.JPG)$/', $image_url):
            $image_type = "image/jpeg";
            break;
        case preg_match('/(\.png)$|(\.PNG)$/', $image_url):
            $image_type = "image/png";
            break;
        case preg_match('/(\.gif)$|(\.GIF)$/', $image_url):
            $image_type = "image/gif";
            break;
        case preg_match('/(\.bmp)$|(\.BMP)$/', $image_url):
            $image_type = "image/bmp";
            break;
        default:
            $image_type = "";
            break;
    }
    if($image_type != ""){
        $img_base64 = base64_encode(file_get_contents($image_url));
        $entry_image = "data:".$image_type.";base64,".$img_base64;
    }
}

3行目で、file_get_contents 関数を使い、画像が実際に存在するかどうかを調べています。
ちなみに、戻り値を全て取得すると時間がかかるので、1文字だけ取得するようにして、高速化を図っています。
そして、Switch文で末尾を確認して、画像の拡張子が何かを判断しています。
22行目では、ファイルデータをBase64にエンコードしています。
エンコードには、PHPの関数の base64_encode を使用しています。
なお、最終的に変換したデータは $entry_image に格納され、もし変換できなかった場合は空文字が格納されます。

 

以上、画像URLから、画像を Base64 にエンコードする方法でした。
これを試したところ、実際画像の表示速度は速くなりましたね。
が、文字数としてはかなり増えたので、若干通信速度が遅くなりました…。
通信速度が画像の表示速度か…どちらを取るかはその時の状況によって対応してください。

村上 著者:村上

【PHP】Switch文の条件に正規表現を使う方法

今回は、Switch文の応用的な使い方についてです。
コード内で、Aの正規表現の条件に一致したら Aの処理、Bの正規表現の条件に一致したら Bの処理…というようなSwitch文を書きたかったので、今回の方法を試してみました。

参考にさせていただいた記事はこちら。

PHP switch文の応用的な使い方 – Qiita
https://qiita.com/tkykmw/items/ee0ab7bf502361f413d8

 

で、早速書き方はこちらから。

$image_url = [画像のURL];
switch (true) {
    case preg_match('/(\.jpg)$|(\.jpeg)$|(\.JPEG)$|(\.JPG)$/', $image_url):
        // jpeg画像の時の処理
        break;
    case preg_match('/(\.png)$|(\.PNG)$/', $image_url):
        // png画像の時の処理
        break;
    case preg_match('/(\.gif)$|(\.GIF)$/', $image_url):
        // gif画像の時の処理
        break;
    case preg_match('/(\.bmp)$|(\.BMP)$/', $image_url):
        // bmp画像の時の処理
        break;
}

今回のコードは、画像URLの末尾の拡張子を調べて、その拡張子ごとに処理を分けています。

ちなみに、この書き方は JavaScriptでも使えます。
なお、その場合は、case の後の条件で test() メソッドを使います。
正規表現自体はPHPとほぼ同じです。

 

以上、switch文の条件に正規表現を使用する方法でした。
switch文の引数に true を指定するやり方を知らなかったので、こんな書き方があるのかと少し驚きでした。
とても興味深かったです。
これで少し複雑な条件分岐が大分楽になりそうです。
同じことにお困りの方がいらっしゃいましたら、是非参考にしていただければと思います。

村上 著者:村上

【アプリ】生活音やメロディーを聞きながら眠れる「Relax Melodies」

今日は技術ネタではなく、最近よく使っている「Relax Melodies」というアプリについて。
こちらのアプリは、雨の音や滝の音、もしくはオルゴールの曲などを再生できるアプリです。

アプリのジャンルとしては、睡眠・ヨガにあたるみたいです。

アプリのインストールはこちらから。

Android:https://play.google.com/store/apps/details?id=ipnossoft.rma.free&hl=ja
iOS:https://itunes.apple.com/jp/app/relax-melodies-sleep-sounds/id314498713?mt=8

 

一部有料のものもありますが、50以上のサウンドが用意されており、それを好きな組み合わせ&お好みの音量でミックスして再生することができます。

また、気に入った組み合わせについては下の画像のように保存することもできます。

最近は、オルゴール調の「ブラームスの子守歌」が気に入っています。
単調なメロディーなので、聞いているとウトウトと眠くなってきます。

さらにタイマー機能も付いているので、設定しておけば、朝までずっと音楽が流れてしまうこともありません。

私の場合はいつも30分で設定しています。
よっぽどのことがない限りは、聞き終わる前に眠れます。

 

ということで、快適な入眠にぴったりなアプリ「Relax Melodies」の紹介でした。
静か過ぎると眠れない!という方や、リラックスできる音楽を聴きながら眠りたいという方は、ぜひ試してみてください。
しかし、不眠が続く場合は、アプリではなく、早急にお医者様へかかってください。

村上 著者:村上

【PHP】PDOでMySQLを使った際のエラー「Uncaught exception ‘PDOException’ with message ‘SQLSTATE[HY093]: Invalid parameter number: no parameters were bound’」

今回は、PDOを使ってMySQLでデータを取り出すときに遭遇したエラーについて。
コード自体は、既に動いているものをコピーして修正したものなので、動かなくて焦りました…。

エラー全文はこちら。

Fatal error: Uncaught exception ‘PDOException’ with message ‘SQLSTATE[HY093]: Invalid parameter number: no parameters were bound’ in [エラーが発生したファイル名]

 

で、調べたところ、SQL文の構文エラーがある場合や、パラメータの数が一致していない時に発生するエラーとのことです。
なお、今回参考にした記事はこちら。

PHP-PDOを使ったSQL文のエラー(HY093)|teratail
https://teratail.com/questions/3209

私の場合は、パラメータの数が一致していなかったために発生していました。
また、下記のサイトによると、「クエリのプレイスホルダとバインドするパラメータはきちんと数を合わせる必要がある」とのことでしたので、こちらが原因ですね。

PDO::bindParamの挙動を知る|Kwappa研究開発室
http://randd.kwappa.net/2008/05/29/25

恐らくコピーした時に、何かが抜けるかしたのかと思われます。

 

ということで、PDOを使用した時に発生したエラーの対処法でした。
今回のエラーについては、とりあえずコードを良く読み返して、パラメータに数を確認することが解決への近道ですね。
エラーに遭遇した時はとにかく焦ってしまうものですが、あわてず騒がず落ち着いて、最初から確認し直すことを心掛けたいです。

村上 著者:村上

【CSS】要素のタッチやクリックを無効にするpointer-eventsプロパティ

/タイトル通り、今回は要素に対するタッチやクリックを無効化する方法について。
button要素であれば、下記のように disabled を指定すれば、クリックができなくなりますが、それをdiv要素などで行う場合です。

<button type="submit" disabled>無効化されたボタン</button>

 

使うプロパティは「pointer-events」です。
こちらのプロパティは、初期値は auto が指定されています。
この値に、none を指定することで、要素に対するクリック・タップを無効化することができます。

サンプルはこんな感じ。

<div>
    <p>無効化された要素</p>
</div>
div {
    pointer-events: none;
}
$("div").on("click", function(){
    alert("div click!");
});

こちらを実行すると、div要素をクリックしてもアラートが表示されません。
ちなみに、スマートフォンでも動作します。

 

ということで、div要素などのクリック・タップを無効化する方法でした。
なかなか、butto要素以外でクリック・タップをすることはないかもしれませんが…知っていれば便利です。
是非参考にしてください。

村上 著者:村上

【CSS】要素の幅や高さを指定する単位vmin、vmaxとは

今回は、以前 vw、vhを紹介した記事では割愛した vmaxvmin について。
実際に使う機会があったのでまとめました。

ちなみに、以前の記事はこちらから。

【CSS】要素の幅や高さを指定する単位vw、vhとは
https://cpoint-lab.co.jp/article/201804/【css】要素の幅や高さを指定する単位vw、vhとは/

 

さて、具体的に説明すると下記のとおりです。

vmin (viewport minimum) ウィンドウの幅と高さのうち、値が小さい方に対する割合
vmax (viewport max) ウィンドウの幅と高さのうち、値が大きい方に対する割合

具体的には下記のように記述します。

div {
    width: 30vmax;
    height: 30vmax;
}

上記のように指定すると、PCなどの横長のブラウザで見た場合、ウィンドウの縦横の長い方の長さに合わせて、DIV要素のサイズが変化します。
なお、今回は 30vmax なので、ウィンドウサイズの長い方の長さの 30% のサイズで表示されます。

これを使えば、例えばスマートフォンで、正方形の要素を2つ並べたい!というときに使えます。
意外と高さの指定って難しいので、今後重宝しそうです。

 

ということで、要素の幅・高さを指定する単位 vmin、vmax の使い方でした。
是非ご参考にしてください。

村上 著者:村上

【Xcode】ビルド時の「[プロジェクト名] has conflicting provisioning settings.」エラーの対処法

今回はXcodeでアプリをビルドしようとしたときに遭遇したエラーについて。
長文エラーって、英語が苦手な身からしては読む気すら失せるので、それだけで億劫かつ憂鬱になります。

エラー全文はこちらから。

[プロジェクト名] has conflicting provisioning settings. [プロジェクト名] is automatically signed for development, but a conflicting code signing identity iPhone Distribution has been manually specified. Set the code signing identity value to “iPhone Developer” in the build settings editor, or switch to manual signing in the project editor.

ざっくり翻訳したところ、プロビジョニング設定が競合していることが問題とのことでした。
本来であれば、自動的に署名が行われている箇所に、手動で異なる設定が指定されているのだとか。
が、このあたりの設定を変更した記憶がないので、心当たりがありません…。

今回参考にさせていただいた記事はこちら。

iOS – iOSアプリ申請時のArchiveでconflicting provisioning settingsエラーが出る(56698)|Teratail
https://teratail.com/questions/56698

 

肝心な対処法ですが…「Automactically manage signing」のチェックを一度外し、再度チェックするだけ。
下の画像の下あたりにあるチェックボックスがそれです。

あとは、通常通りビルドを行ったところ、なんの問題もなくビルドが完了し、実機・Simulator のどちらでもアプリを実行することができました。
エラー文が長いので、最初に遭遇した時は身構えましたが、対処方法としてはなんてことはなかったですね。
チェックの解除・設定をおこなうと、プロビジョニングの設定がリセットされるので、今回のエラーが解消されるとのことでした。

以前も書いた気がしますが、とりあえず原因がわからないエラーに遭遇したら、丸々コピーして検索しましょう。

村上 著者:村上

【CSS】複数行の長い文章の文末を省略する方法

以前紹介した、長い文章の文末を省略して末尾に「…」を表示させる方法の複数行対応バージョンです。
前回のやり方では、一行のみの表示しかできないので、複数行で文末を表示させたいときはこちらの方法をお試しください。
ただし、ChromeSafari 限定ですので、その点はご注意ください。

今回参考にさせていただいた記事はこちら。

【複数行にも対応】長過ぎる文字列を省略して末尾を三点リーダー(…)にする方法いろいろ – PSYENCE:MEDIA
https://tech.recruit-mp.co.jp/front-end/tips-ellipsis/

ちなみに、以前投稿したCSSで文末を省略する方法はこちら。

【CSS】長い文章の文末を省略して末尾に「…」を表示させる方法
https://cpoint-lab.co.jp/article/201805/【css】長い文章の文末を省略して末尾に「」を

 

コードはこちら。

<p>春はあけぼの。やうやう白くなりゆく山際、少し明かりて、紫だちたる雲の細くたなびきたる。</p>
#text{
    width: 300px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

overflow: hidden; を使うところは、前回と同じです。
-webkit-line-clamp を使うことで、指定した行に三点リーダー(クランプ)を追加することができます。
こちらのプロパティの値は、三点リーダを追加したい行数を指定します。
display: -webkit-box; は、-webkit-line-clamp と併用することにより、-webkit-line-clamp で指定した行数までを表示するようにしてくれます。

 

以上、複数行の行末尾を省略する方法でした。
上で紹介したサイトでは、ChromeSafari 以外のブラウザでも同じことを行う方法もありますので、IEでもこの表示にしたいときは参考にしてみてはいかがでしょうか。
ちなみに、少しトリッキーな方法とのことです。

村上 著者:村上

【jQuery】FastClickライブラリを特定の要素のみ無効にする方法【iOS】

Cordova開発をしているとお世話になるライブラリが、この「FastClick」だと思います。
これを使うことで、モバイルでアプリを実行したときのクリックの反応速度がかなり改善されます。
が、ものによっては、この FastClick ライブラリと競合を起こすライブラリもあるようで、今日、まさにその現象に遭遇しました。

 

競合を起こしたライブラリは、OpenstreetMap を使用した地図を表示できる「MapBox」です。
地図の表示の全てに影響するわけではなく、地図に表示したマップピンをクリックして、吹き出しを表示するロジックに影響が出ており、iOS でのみ吹き出しが表示できない状態でした。
クリックの動作をする箇所でのエラーだったので、最初は Click イベントを取得できていないことを疑いましたが、エラーログを見たところ、FastClick との競合が原因でした。

 

解決方法ですが、こちらのサイトを参考にしました。

JS/jQueryでFastClick.jsを使ってスマホのclickイベントの300ms遅延をなくす|ITハット
http://ithat.me/2016/11/06/js-jquery-smartphone-click-event-300ms-delay-fastclick

サンプルに書くほどでもないのですが…対策方法は、FastClick を無効化したい aタグなどの要素に、needsclick というクラスを追加するだけです。

<a class="needsclick">FastClickを無効にしたい要素</a>

特定の要素のみに FastClick を適用する方法もありますが、現在開発中のシステムでは、無効化したい要素がここのみだったので、この方法を採用しました。
ちなみに、特定の要素のみに適用する方法は下記の通りです。

<div>
    <div class="fastclick">
        <!-- FastClickを適用する要素 -->
    </div>
    <div>
        <!-- FastClickを適用しない要素 -->
    </div>
</div>
$(function(){
    FastClick.attach($('.fastclick')[0]);
});

全てに FastClick を適用するときには、下記のように記述します。

$(function(){
    FastClick.attach(document.body);
});

対策としては以上です。

 

ということで、FastClick を一部無効化する方法でした。
ライブラリの競合はやはり厄介ですね。
最悪、FastClick を無効化しなければいけないのでは…と思ったので、解決策があって良かったです。