著者:asaba
【javascript】比較関数について
そういえば、java以外でまともにソートのアルゴリズム作ったことないやということで今回はjavascriptで文字列または数値のソート方法を
自分用に書いていきたいと思います。まず、通常の文字列をソートするときはこんな感じでコードを書きます。（うろ覚えですが）
var str = ['c', 'java', 'php', 'ruby']; str.sort(); console.log(str);
↓実行例
短いですが、こんな短文で文字列ならば簡単にソートをすることができます。リストとかをアルファベット順に揃えて出したいという時に
使えるメソッドですね。では数値でも同じように検索できるのでは？と思うのですが、ただ数値を検索対象にしただけでは正常に働いては
くれないです。
var num = [6, 20, 50, 36, 5]; num.sort(); console.log(num);
↓実行例
これだと、sort関数がnum配列を文字列と認識してしまうため、一番前の数値の若い順にソートされてしまい数値の小さい順に並べたいと
いう意図には適いません。という訳で、正しい順番で数値をソートするには、この比較関数を使う必要があります。実装方法はシンプル
で、どのブラウザでも差異無く動かすことができます。比較方法は次の通りです。
function compareFunc(a, b) {
return a - b;
}
var num = [6, 20, 50, 36, 5];
num.sort(compareFunc);
console.log(num);
↓実行例
このメソッドでは、compareFunc内でreturnした引数の差の値で決めています。例えば、引数が6と20だった場合は差分が-14なので、負の
値とみなされここではソートされずに次の値を比較していく仕組みになっています。反対に正の値として判定された場合、ここでは6と5を
比較した場合はソートされ順番が入れ替わります。これを配列文繰り返すことにより正しい数値の順番にソートが出来るという訳です。
javaだとアルゴリズム書くのがめんどくさかったのですが、もしかしたら自分が知らないだけでこのsort関数みたいな簡単なメソッドが
用意されているのだろうか？だとしたら勉強不足です・・・
著者:asaba
【css】モバイル端末でみた時の文字サイズが違う
今回は、端末に対応していないサイトをスマホなどのモバイル端末で見るときの挙動とその解決法について書いていきます。
通常のwebサイト制作においては、text-sizeでinputなどの文字の大きさを決めていると思われます。
ですが、通常の状態のtext-sizeだと、下記で紹介する-webkit-text-size-adjustの効果によって縦にした時と横にした時とで文字サイズが異な
る時があり、このズレを放置することでページ全体のレイアウトが崩壊してユーザーを混乱させてしまう恐れがあります。
-webkit-text-size-adjustとは、ページに合わせたテキストの大きさを制御しているプロパティです。
通常、モバイル端末に対応していないwebサイトをスマホなどの端末で見ると、ブラウザはレイアウトを大きめの画面に合わせた状態
で表示させます。-webkit-text-size-adjustは、デフォルトの状態でauto（動いている）状態になっており、このままでは一部分の画面しか
表示してくれなかったりとユーザーにとってもものすごく見づらい画面になってしまいます。
ですが、この-webkit-text-size-adjustの値を100%にすることで使うことで上記の効果を無効化し、元の文字の大きさで表示させることが
できます。
めちゃくちゃシンプルですがこんな感じです。
</pre>
<style>
body{
-webkit-text-size-adjust
}
</style>
<pre>
端末で見られることを想定しているサイトの場合、主にbodyの中に入れてビューの変形を免れることができます。
noneでも設定できるかと思っていましたが、chromeやsafariで見ると文字の配置は変わっているのに
文字サイズだけが変わらず小さいままというとにかく扱いにくい状態になってしまうのでこれは非推奨でした。
著者:asaba
【javaScript】今更WebAudioAPIを試す
去年の話ですが、お遊びで動物の鳴き声を使った目覚ましアプリを作ろうとしたときにWeb Audio APIというプラグインを知りました。
javascriptにおける音声を再生または取り込むための機能は、フラッシュやhtml5対応の</audio>タグがその役割を担っています。
両方とも音声の再生をする分には困ることはないのですがこれらのオブジェクトはいかんせん制約が多く、現在の速さが求められる
アプリ開発とは相性が悪いです。なのでこれからはWeb Audio APIを使ってねという記事を目にしました。
Web Audio APIとは、webアプリケーション向けに開発された、音声ファイルの管理に特化したjavaScriptAPIです。
コード量も少ないので、複雑な処理でなければ初心者のかたでも扱うことができます。
ざっくりとですが、コンテキストで音声の再生を管理するコードがこちらです。
var context; window.addEventListener('load',init,false); function init(){ window.AudioContext = window.AudioContext || window.webkitAudioContext; context = new AudioContext(); } catch(e){ alert('web Audio API is not supported in this browser'); } } [/javascipt]
initで初期化させてスタンバイさせておけば、後はcontextで読み込んでくれるのでここだけ抑えておけば基本は大丈夫だと
思います。iphoneでは未検証なので断言はできないですが、他の従来のプラグインも素直に動いてくれているのでAPIサポート外
でもない限りこっちでも問題ないのではないでしょうか。
後はこれをreactとかのライブラリに入れるとちゃんと動くのかなとか考えることもありますが、現状javaScriptで音声を
扱いたいなと思ったらこのwebAudioAPIで間違いないと思うので、もしよろしければ参考に・・・
著者:asaba
【html-css】ヘッダーを固定する方法とオブジェクトの優先順位
今回は、ヘッダーの固定方法とz-indexの親子関係について説明していきたいと思います。
webプログラマーとしてコンテンツが長いページを作ることは当たり前のようにありますが、長いページを最後まで見終わった後にあれ？
戻るボタンどこだっけ？一番上か！！(涙)みたいな思いをユーザーの方々にさせたくないと思い載せてみました。
まず、ヘッダーの固定する方法からみていきましょう。とりあえず何の変哲もないサンプルから載せていきます。
</pre>
header {
width: 100%;
height: 60px;
text-align: center;
}
<pre>
これは、見た目は何もいじっていないプレーンの状態のヘッダーです。このままだと当然下にスクロールするとヘッダーも
一緒に下がってしまい、後で戻るボタンを探す羽目になりかなり煩わしい思いをします。
そこで、ヘッダーを固定するために次の属性を指定します。↓
</pre> position: fixed; z-index: 9999; <pre>
このように、上のposition: fixedを指定するだけでヘッダーを固定することができます。特殊なギミックを与えない場合は
これだけでも問題ないと思います。しかし、長いページの場合はスクロールすると、このままでは子のオブジェクトが親である
ヘッダーを覆ってしまい見た目もかなり悪目立ちしてしまいますね。
そこで下のz-indexの出番になります。このz-indexですが、今は9999と設定されてありますが、実はこの数値が大きければ大きいほど
親の優先順位が上がります。つまり、9999と設定しておくことによりこれから作る子オブジェクトよりは絶対に優先順位が
下がることはありません。
初学者のうちはデフォルトで9999でいいやみたいな感じで覚えていても問題ないですが、手の込んだサイトを作りたい時は
色々試してみて使い方をマスターしておく必要があるかもしれないですね。
ですが、見栄えのいいページを作る時はヘッダーのカスタマイズが必須になるのでざっと覚えるだけでもプラスになると思います。
著者:asaba
【html-css】複数のセレクトボックスを並列で表示させる
今回は、セレクトボックスを複数並べたいかつ横に揃えたい時にしたことを書いていきます。
セレクトボックス、決められた項目をプルダウンで表示させるアレのことです。よくアンケートフォームやアプリの会員登録画面で
見受けられますが、案件によってはこのオブジェクトを複数決められた位置に並べたいという時もあるのではないでしょうか。
現に今どきのフォームだと○○県○○市といった県と市を分けて表示するデザインが増えており、今はもうそんな感じのデザインが
主流なのかなと勝手に考えております。
自分も、今回の開発でセレクトボックスを複数出したかったので汚いながらも気合でやってみたのでもしこんなのでよければ参考に
してください。
まずは、htmlからです。reactで書いた誕生日のサンプルですね。
</pre>
<span className="birthday">
<p>生年月日</p>
<select value={this.state.member.year || ''} onChange={(e) => this.handleYearChange(e)} >
{ this.yearData.map( d => <option key={d.value} value={d.value}>{d.label}</option>)}
</select>
<label htmlFor="select-01">年</label>
<select value={this.state.member.month || ''} onChange={(e) => this.handleMonthChange(e)} >
{ this.monthData.map( d => <option key={d.value} value={d.value}>{d.label}</option>)}
</select>
<label htmlFor="select-01">月</label>
<select value={this.state.member.day || ''} onChange={(e) => this.handleDayChange(e)} >
{ this.dayData.map( d => <option key={d.value} value={d.value}>{d.label}</option>)}
</select>
<label htmlFor="select-01">日</label>
<span className="error">{this.state.error ? this.state.error.birthday : ''}</span>
</span>
<pre>
なんでdivじゃないのとツッコミを受けそうですが、divを使うと改行してしまい一行ずつセレクトボックスが表示されてしまうという
事態が起きるので、代用して改行をしないspanを使い並列に並べるという意図でございます。
続いてcssです。
</pre>
span.birthday {
width: 90px;
padding:0;
font-size:0px;
}
span.birthday select {
width:110px;
height: 50px;
margin:10px;
border:1px solid black;
display: inline-block;
text-align: center;
font-size:16px;
background-color:#fff;
}
<pre>
あまり深いことは書いていないのですが、span.birthdayでセレクトボックスを三つ並べられるようエリアを拡大していますね。
下のspan.birthday.selectでセレクトボックスそのものの大きさとセレクトボックスの外線、位置を決めています。
以上でセレクトボックスを横向きに表示するコーディングはおしまいです。実はこれもネットにも中々乗っておらず、一つ一つ
パーツを繋ぎ合わせてせこせこ書いていました。いびつですが、正しく動きますので、reactで同じようなコンポーネントを
作りたい、でもどこにも思ったことが書いていない！というかたはもしよろしければ参考にしてみてください。
著者:asaba
【atom】パッケージでテーマを変えてみた
一か月前からちょくちょくatomの記事を書いていますが、何せ便利な機能が多く嬉しさのあまり舞い上がっている所存ですので
許してください。
今回は、atomのテーマを変えてみようという記事です。
他のエディタと同様atomにもテーマがあります。テーマとは、開発画面などでエンジニアの方々が効率良く開発を進めるための
プラグインのようなものです。具体的に言うと、半角インテントの可視化や変数の配色などがあげられ、今回はatomテーマの中でも
比較的メジャーなmonokaiというテーマを使ってみたいと思います。
monokaiとは、Wimer Hazenbergが作成した軽量エディタ向けのパッケージで、atomのみならず様々なエディタで人気のパッケージです。
さっそくですがこのmonokaiのインストール方法とビフォーアフターを見ていきましょう。
まず、画面右上のfileからsettingタブを開きます。すると、このような画面になるので、一番下のinstallをクリックします。
右側にパッケージとテーマのそれぞれのボタンがあり、通常はパッケージボタンがデフォルトで設定されているのでこれを
右側のテーマに切り替えます。その後に検索欄でmonokaiと検索すると、恐らく一番上にmonokaiのパッケージが出てくると思います。
作者がkevinwickiという方になっているのが今回インストールするものです。
インストール後は、設定画面に戻りthemeをクリックします。右側のシンタックステーマというところに先ほどインストールした
monokaiがあるので設定しておきましょう。
設定して画面が変われば成功です。終わりにビフォーアフターを載せておきますね。こんな感じ↓
ビフォー
アフター
こんな感じ、です。まだまだ面白いパッケージがあるので、随時紹介していけたらなと思っています。
著者:asaba
【Atom】gitを開発画面でも使う
いつもどおりatomを使っていて下になにかごにょごにょ書いてあったので気になって調べてみたら、gitからクローンしてきたファイルの
場合は開発画面でもプルやフェッチができることが判りました。
atomはgitを作っている会社と同じなので当然と言えば当然ですが。
赤線で囲んであるところには、自分の今いるブランチとフェッチコマンドが用意されていますが、プラグインを使えばソースツリーなど
のツールに負けないくらいの環境になってくれると思います。
また、マウスを重ねると英語ですがきちんと説明してくれたりと気が利く仕様になっているのが分かります。
これだけでも有能なのですが、プラグインで日本語にカスタマイズしておくともっと便利になるかもしれないですね～。
自分のAtomはほとんどプラグインをつけていないすっぴんの状態ですが、それでも視覚的に使いやすいのでお気に入りのエディタ
として使わせてもらっております。
とはいえ自分はまだまだGUIがないと不安なので、しばらくはソースツリーに頼ることになりそうです・・・。
著者:asaba
【iphone】iphoneでイヤホンが片方からしか聞こえない時の解決法
イヤホンで音楽を聴いていて片方だけ聞こえにくいなとか経験したかたは少なくないと思います。
自分も同じような現象に悩まされていたのですが、つい最近解決することができたので記録しておきます。
そもそもイヤホンが不調になる原因としては、イヤホンの断線や接続先の汚れなど様々なものがあります。
自分はまずイヤホンの断線を疑ったのですが、音声が途切れたりすることは一切なく、安定して聞くことができたので
この線は消えました。接続先も手入れしたばかりで、しかもその時は両方聞こえていたのでこの線も自然ときえていきます。
やっぱり断線が原因なのかと思いながらもダメもとでアクセシビリティ内の音声調整をしてみたのですが
なんとこれでイヤホンの両側から聞こえるようになったのです。
方法としては、設定画面でアクセシビリティを選択して、下に進んでいくと音量調整のトグルがあるので、聞こえない方へ
トグルをスライドしてみてください。恐らくこれで解決すると思います。
聞こえたのはいいのですが、以前はこれをいじらなくても普通に聞けていたので、やっぱり原因はイヤホンの呼称なのかなー・・・と
思ってしまったりします。とりあえずiphoneに問題があるとは思いたくないです。
著者:asaba
【chrome・tips】好きな国の言語を翻訳する方法
chromeで検索していると、どうしても海外のサイトもヒットしますよね。何回も表示されるとその内容も気になるものです。
今回は、そのchromeの翻訳ツールの紹介と言語の追加の方法を綴っていきたいと思います。
それではざざっとはじめていきます。
まず、画面右側の縦三つの・・・タブを開いて設定を開きます。
一番下にある詳細設定を押すと、下に細かいメニューがずらっと出てきます。
そこから更に下にスクロールしていくと、言語メニューがあります。
開くと、デフォルトでアメリカ英語が用意されていますが
そこから言語を追加することで様々なページに対応することができます。
なお、主要な国の言語は全て網羅してあるので、気になる国のサイトがあった場合はぜひこれを活用して覗いてみましょう！
・・・はい、短いですがこれで今日のブログを終わります。
プログラマーは、国内のサイトでググって分からなくなった時は、英語や中国語のサイト果てはロシア語のサイトにまで飛んで
隅々まで情報を探さなければいけません。この言語追加機能の使い方を覚えていれば、海外のエンジニアがどうやった意図で
このコードを書いたとかこの国ではこんなツールが主流なのかなど、ネットを通して様々な思想やルールを見ることができるので、
将来的に自分の技術の向上にもなるのかなと感じました。
著者:asaba
【react】render内で’===’を使うとなぜか文字列に変換される
reactのrender内では三項演算子がうまく働かない時があるんですが原因はなんなのでしょうか。
例えば
</pre> const number = 1; const shelter = number === 1 ? 'number' : 'ather'; <pre>
三項演算子はこのように定義するのですが、ここでは通常ならばnumber変数の中身は1なので変数shelterには’number’が入ります。
ですが、これをrender()内で実行すると、なぜかatherさんが格納されてしまうという事態に！
render()はstateが呼ばれるたびに更新するので、その時に変数も更新されてundefinedになっているのではと思ったのですがどちらの変数に
もしっかりと1が入っている（どういうこと！？）しかも文字列ではなくて普通に数値なんですがそれは・・・。
だとしたらもう怪しいのはお前しかいない、===！とりあえず特定をしたくてこれと==を比較して使ってみたのですが
見事にそれぞれ文字列と数値を吐き出していました。
てな訳で原因が分かったところで結局=を一つ減らして再render()して力ずくで解決させてしまいました。
そもそも数値で定義しているのになぜ文字列に解釈されているのかが分からないのですが。reactには勝手に値を変換するプラグインとかも
入れていないしjavascriptに型推論なんて存在しないしデフォルトの状態でこれならもう’===’を使うのを躊躇してしまいますw
ここは素直に’==’を使いましょうということでしょうか・・・
とりあえずrender()内で値を扱う時は値の型に気を配ってコーディングしなさいという戒めだと思って肝に銘じておきます。