カテゴリーアーカイブ 言語

著者:杉浦

phpにおけるsort

phpのsort関数の説明です。
 phpの説明書:原文和訳
 phpに備え付けのソート関数はここにある以下の表の通りです。

ソート関数の特性
関数名 ソートの基準 キーと値の相関関係 ソート順 関連する関数
array_multisort() 連想配列の場合は維持し、数値添字配列の場合は維持しない 最初の配列、あるいはソートオプション array_walk()
asort() 維持する 昇順 arsort()
arsort() 維持する 降順 asort()
krsort() キー 維持する 降順 ksort()
ksort() キー 維持する 昇順 asort()
natcasesort() 維持する 大文字小文字を区別しない自然順 natsort()
natsort() 維持する 自然順 natcasesort()
rsort() 維持しない 降順 sort()
shuffle() 維持しない ランダム array_rand()
sort() 維持しない 昇順 rsort()
uasort() 維持する ユーザー定義 uksort()
uksort() キー 維持する ユーザー定義 uasort()
usort() 維持しない ユーザー定義 uasort()

 キーと値の相関関係はキーAなら値a、キーBならbといった関係のことです。マップ的に使っていて配列のキー名に意味があるなら相関関係を維持するべきで、配列のキー名が順番を表すただの数字の様なものなら維持は不要になるでしょう。
 自然順は1A,10A,100Aと並ぶことです。不自然な辞書順は’0’は’A’より小さいからと100A,10A,1Aと並べることです。詳しくはNatural Order String Comparisonを参照するとよいです。
 配列中配列などの複雑なソートをしたいときはユーザ定義ソートを使用することで解決でき安栖。任意の比較関数$value_compare_funcを定義してusort ( array &$array , callable $value_compare_func )と記述します。比較関数の定義にはstrcmp()の様な備え付けの比較関数を利用すると楽です。
 phpのソートはC言語の関数であるsort()を拡張したものです。phpのソースコード中のext/standard/array.cに上記の関数の中身が色々書いてあります。さらにarray.c中のzend_hash_sort()、Zend/zend_hash.h中のzend_hash_sort()内のzend_hash_sort_ex()、zend_hash.c中のzend_hash_sort_ex()と追っていくことができます。

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

浮動小数点数

 浮動小数点数は01のみで少数のような細かい数からn^mの様な巨大な数までを表現する方法です。浮動小数点は図の様に、仮数部^(符号ビット*指数部)で表されます。赤が仮数部、青が符号ビット、緑が指数部です。図はIEEE 754 形式の単精度でPC上でよく使われています。

 それなりの精度の仮数部と仮数部を拡縮する符号ビットと指数部によって広い範囲の値を表現できます。また、仮数部をhoge乗するという点からわかるように一定の相対誤差を保ちます(相対誤差:x%の誤差というように表せる誤差。大きな数ほど誤差が大きく、小さな数ほど誤差が小さい。)。この誤差は値の表現を省略する誤差であり、丸め誤差と呼ばれます。常に誤差があるというのが特徴で、丸め誤差が積み重なるような計算(値を表現してから加算することを繰り返すなど)をするプログラムを書くと大きな誤差が生まれて惨事になりやすいです。

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

【CSS】長い文章の文末を省略して末尾に「…」を表示させる方法

よく使うので、コピー&ペーストしやすいようにまとめ。
タイトル通り、改行されるような長い文章を自動で省略して、末尾に三点リーダーを追加する方法です。

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

CSSのみで文末をカットし、…を代入する方法|スターフィールド株式会社
https://sterfield.co.jp/designer/cssのみで文末をカットし、-を代入する方法/

 

早速紹介しますが、コードはこちら。

#text_area {
    width: 400px;
}
.text {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
<div id="text_area">
    <p class="text">春はあけぼの。やうやう白くなりゆく山際、少し明かりて、紫だちたる雲の細くたなびきたる。</p>
</div>

text_area ID で、テキストの表示幅を指定しています。ここで指定した横幅を超えた分の文章が省略され、末尾に「…(三点リーダー)」が表示されます。

そして、text Class で指定されている text-overflow で、文字が指定した範囲から超えた場合の表示方法を指定しています。
今回は、ellipsis が指定されているので、範囲からはみ出た文章は切り取られ、切り取られた部分に省略記号「…」が表示されます。

white-space は、半角スペース・タブ・改行の表示の仕方を指定する際に使用するプロパティです。
今回指定した nowrap では、連続する半角スペース・タブ・改行を、1つの半角スペースとして表示する、という指定になっています。
これだけ見ると、もしかしてこのプロパティを省略されても表示されるのでは?と思ったのですが、この white-space プロパティがないと、文章の省略は無効化されました。
どれも必須の項目のようなので、自己判断で省略したりしないように注意してください。

ちなみに、今回の方法では、省略後の文章は1行で表示されます。
確か複数行の方法もあったように思いますが…気になる方は、調べてみてください。
機会があったら、このブログでも紹介するかもしれません。

 

以上、長い文章を省略して、末尾に三点リーダーを追加する方法でした。
スマートフォンなど、表示できる範囲が少ないときなどにおすすめのCSSですね。
もしくは PCでも、表示項目が多い表などでも活用できそうです。
お好みや要望に応じて使ってみてください。

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

オーダーとプログラムの高速化

 この記事はボトルネックになりやすいループする処理を省略するか高速化すればプログラムは大きく高速化しやすいということを仰々しく述べる記事です。
 プログラムの計算量はオーダーと呼ばれる単位で表されることがままあります。オーダーとはアルゴリズムの最大次数を表したものです。ざっくばらんに言えば、巨大なデータを扱ったときの計算量の増え方を表したものです。オーダーはO(n)、O(n^2)、O(logn)などと記述します。

int a = 1;
for(int i = 0; i < n; i++)
	a++;

ならばnが十分に大きい時、n回の計算をするのでO(n)と表します。

int a = 1;
for(int i = 0; i < n; i++)
	for(int j = 0; j < n; j++)
		a++;

ならばnが十分に大きい時、n^2回の計算をするのでO(n^2)と表します。下図はよくあるオーダーの値の変化の比較です。
 定数オーダーO(1)の計算量が小さいこと、乗数が絡んだオーダーが極端に大きくなることがわかります。先ほど挙げた様にプログラムのループ部分はO(n)となり、二重ループ部分はO(n^2)となります。仮にnが十分に大きいとした場合、計算時間のを大半を占めるのはO(n)以上の部分であり、ループ部分はそのO(n)以上の部分になります。つまりnが十分に大きい場合、ループ部分が計算時間の大半を占めやすいといえます。ここからプログラムの大きな高速化は計算時間の大半を占めるであろうループの様な何度も呼ばれる部分を高速化、あるいは省略することで実現しやすいといえます。
 速度を要求されるプログラムを作る場合、ループ内のコーディングには工夫を凝らすべきであり、そもそもループ中の処理を減らした方がよいです。また、一見ループでなくとも呼びだした先がボトルネックとなっている場合もあります。SQLや関数などはよく見えないところで行動していたりします。関数単位、行単位の呼び出し回数、実行時間を調べることがボトルネックがどのタイミングにあるかの把握になり、どこがボトルネックであるかを知ることにつながりやすいです。ループ内のコーディングに凝らす工夫としては、諸所の小技をググったりするとよいと思います。大体、目的に適したシンプルな関数なり記述なりが高速化につながっています。

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

【CSS】枠線の色を透明にする方法

使いどころがあるかは正直謎ですが…自分の書いたであろうCSSを見返していたら、気になる記述があったのでまとめ。
CSSで指定したボーダー(枠線)の色を透明にする方法です。
…実質 border: none; の記述と変わらないのでは…?

 

コードはこちら。

<div class="border">枠線を透明に</div>
.border {
    border: 1px solid transparent;
}

透明を指定しているのは、transparent というボーダー色の値です。
通常であれば、ここには #000 などの色コードなどを指定しますが、transparent を指定すると線が透明(非表示)になります。
が、コードを見ると、線自体はあります。

感覚としては、visibility: hidden と似たような感じで使う、と覚えるとわかりやすいかも。
この時は枠線を表示して、この時は非表示に!でも他のスタイルに影響が出るのを防ぐために、表示はしないけど残したい!というときに使うのがよさそうです。
CSS初心者の時は、ボーダーの幅で若干横幅のサイズが合わなくて苦労したことがあるので…それの予防に使えそうです。

 

以上、枠線を透明にする方法でした。
ちなみに、transparent は、「向こう側が見えるほど透き通った、透明な」という意味があるとのこと。
そのまんまの意味ですが、とっさに出てこなさそう…!

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

【PHP】配列で重複した値を削除する方法

たまにしか使わないから毎回忘れる配列の値が重複したときの削除方法について。
今回使用するのは、array_unique という関数です。
PHPのマニュアルページはこちらから。

PHP: array_unique – Manual
http://php.net/manual/ja/function.array-unique.php

 

こちらの関数は、重複を削除したい配列を引数として渡せば、重複を削除した後の配列を戻り値として返してくれます。
サンプルコードは下記のとおりです。

$array = array(1, 3, 5, 1, 2, 4, 3);
// 重複削除
$unique = array_unique($array);

// 実行結果:array(1, 3, 5, 2, 4)

ただし、この関数では、重複削除後もキーは保持されます。
なので、詳細に書くと結果が下記のようになっていることに注意してください。

$array = array(0 => 1,
               1 => 3,
               2 => 5,
               3 => 1,
               4 => 2,
               5 => 4,
               6 => 3);
// 重複削除
$unique = array_unique($array);

// 実行結果:array(0 => 1,
//                1 => 3,
//                2 => 5,
//                4 => 2,
//                5 => 4);

結果を単に foreach かなにかで処理するだけなら問題ないかと思いますが、キーをセットに扱う処理を行う場合などは、このままでは使えません。
その場合は、PHPの関数の array_values を使います。
こちらを使うと、数字が飛び飛びになったキーの番号を振り直すことができます。
使用方法はこちら。

$array = array(0 => 1,
               1 => 3,
               2 => 5,
               3 => 1,
               4 => 2,
               5 => 4,
               6 => 3);
// 重複削除
$unique = array_unique($array);
// キーの振り直し
$result = array_values($unique);

// 実行結果:array(0 => 1,
//                1 => 3,
//                2 => 5,
//                3 => 2,
//                4 => 4);

これでキーの番号が飛び飛びになる問題も解決できます。

 

ということで、配列のデータ重複を解消する方法でした。
意外と使う機会がある関数なので、覚えておいて損はないはず。
ついでに、下の方で紹介した配列のキーの振り直し方法についてもセットで覚えておくといいでしょう。

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

jQueryのajax通信の処理状態に関するイベント

javasriptのライブラリjQueryにおいて非同期通信であるajax処理を行う際、通信の処理状態に関するイベントの備忘録です。非同期処理は隙あらば他の仕事をやりだしたりなんだりで滅茶苦茶になりやすいためタイミングの監視が重要になります。いずれも

$(document).ajaxHogehoge(function() {
    //処理内容
});

で処理を記述できます。この様に記述された処理はajaxによる通信が起きた場合、どのajax通信でも呼び出されます。また、これとは別にDeferredとして.done(),.complete()などをajax()につなげることで、特定の通信に限った処理ができます。いつでも呼び出される.ajaxHogehoge()は以下の通りです。

.ajaxStart() 他のajax通信が行われていない状態でajax通信が呼び出された時、つまりajax通信の一番最初に実行されます。
.ajaxSend() ajax通信が送信される前に実行されます。通信のたびに実行されます。
.ajaxSuccess() ajax通信が成功するたびに実行されます。
.ajaxError() ajax通信が失敗するたびに実行されます。
.ajaxComplete() 成功失敗関わらず、ajax通信が完了するたびに実行されます。
.ajaxStop() 他のajax通信が行われていない状態でajax通信が完了した時、つまりajax通信の一番最後に実行されます。
  • この記事いいね! (0)
村上 著者:村上

【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がデファクトスタンダードな風潮だけは抜けてほしいなーと思いますね…

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

【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 以外にも、ontouchendontouchmove でも良いとのこと。

 

対処法としては以上です!
予想以上に簡単でしたので、同じことでお悩みの方は、是非お試しください。

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