著者アーカイブ asaba

asaba 著者:asaba

glitchを使ってみた

少し前は、試しコードを書く時はsandBoxを使っていたのですが、javaScriptの開発の幅を広げたいなと思ったのでglitchというエディタを使ってみました。glitch・・・日本語では裏技とかチートとかに該当する言葉でしょうか。

使用感に関してはほんとにチート使ってるのかみたいな感覚になるくらい快適だったので推していきたいと思います。このglitchというエディタの特徴は数えればいくつもあるのですが、まず目につくのはオンラインエディタなのですぐに開発に取り掛かれる点ですね。面倒なインストールもいらないので、自分のpcに余計なファイルを入れる必要は一切ありません。そしてサーバーサイド側のコードとフロント側のコードを同じ画面で作ることができる点も良いなと思いました。二つのコードを見比べながらコーディングすることで、リファクタリングを効率よくとり行うことができます。また、gitかfacebookのアカウントがあれば、エディタの色を変えたり作ったファイルを保存してgitにインポートまたはエクスポートすることもできるので、個人的にはgitに登録してからglitchを使うことをおすすめします。そしてなによりフロントエンドエンジニアにとってうれしいのが、webサーバーを自分で建てなくても自動でssl化してくれるところだと思います。今流行りのpwaもこのエディタで取り掛かればwebサーバーの準備にもたつくことなくすぐに試すことができるのでおすすめです。gitでも一応疑似的にssl化できるのですが、めんどうな上にわかりにくかったのでここでは説明しません。今は日本語対応はできていませんが、簡単な英語ばかりなのでここに関しても慣れてしまえば問題なさそうです。

 

asaba 著者:asaba

【javaScript】備忘録:onloadの使い方

javascriptのフレームワークを触っていると、どうしてもプレーンなjavaScriptの組み方がいい加減になってしまうので、これではまずいと

思い備忘録で残しておくことにしました。本題ですが、onloadメソッドについての使い方を備忘録として残します。onloadと聞くとカメラ

などのapiで呼び出されるコールバックのイメージが強いですが、従来だとbodyタグに挟んで使うこともできますよということを今更思い出しました。

具体的に説明すると、タイマーなどの時間を利用するコンテンツを作る場合は、ブラウザを表示したら一秒一秒をその時にメソッドを使っ

て呼び出しても良いのですが、bodyタグに挟んでおくと疑似的なメソッドの役割をしてくれるようになり、余計なメソッド定義をするこ

とがなくなるのでコードがみやすくなったりメンテナンスが少し楽になるなどの恩恵を受けることができます。他にも、ブラウザで

setTimeOutと組み合わせてローディング機能を作れたりとバリアフリーなアプリを作りたいなと思った時にも役に立つので覚えておくと

捗るかと思います。

が最近だとvue.jsとかreactなどのフレームワークが普及しているので、大規模な開発だとあまりお目にかかることはないかもしれません。

</pre>
<script type="text/javascript">
<!--

var start = new Date();

var hour = 0;
var min = 0;
var sec = 0;
var now = 0;
var datet = 0;

function timer(){

now = new Date();

datet = parseInt((now.getTime() - start.getTime()) / 1000);

hour = parseInt(datet / 3600);
min = parseInt((datet / 60) % 60);
sec = datet % 60;

if(hour < 10) { hour = "0" + hour; }
if(min < 10) { min = "0" + min; }
if(sec < 10) { sec = "0" + sec; }

document.form1.field1.value = hour;
document.form1.field2.value = min;
document.form1.field3.value = sec;

setTimeout("timer()", 1000);

}

// -->
</script>

<body onLoad="timer()">
<pre>
asaba 著者:asaba

【cordova】No resource identifier found for attribute ‘appComponentFactory’ in package ‘android’の解決法

最近はnpmをいじる機会がなかったのですが、新たにマージしたブランチで開発にかかろうと思ったときにこの「No resource identifier

found for attribute ‘appComponentFactory’ in package ‘android’」というエラーに遭遇。調べてみると、プラグインと今使っているエンド

ポイントのバージョンが合っていないと起きるエラーみたいです。

ここで真っ先に疑われるであろうコルドバプラットフォームの中のマニフェストに書いてあるandroidSDKのバージョンを下げてみても

ダメでした。他のブランチでは動いていたので同じバージョンに直せばまた動いてくれると感じたのですがただの思い込みでした・・・。

どのサイトを探しても具体的な対処法が書いていなかったのですが、githubにてcordova-android-support-gradle-releaseを使えば

治るよという情報を発見したので試してみました。すると、今まで悩んでいたことがむなしく思えたほどあっさりと解決。

 

</pre>
cordova plugin add cordova-android-support-gradle-release --variable ANDROID_SUPPORT_VERSION=27.+
<pre>

なんでもこのプラグインは、異なるバージョンのサポートライブラリを含めることによって引き起こされるビルド失敗を防ぐことができるみたいです。

具体的に言うと、既存のプラグインを現行のgradleのバージョンに合わせてくれるので、このプラグインは古すぎるからダウングレードし

ようとかいうハイブリッドアプリを作る時のあるあるエラーを解消することができるのです。実機のapiが低かったりしたときはこのプラ

グインを使って調整をしてみてください。

修正方法はこれだけですが、いちいちプラットフォームを入れ直したりバージョンを上げ下げする必要がなくなるのはありがたいですね。

 

cordova plugin add cordova-android-support-gradle-release –variable ANDROID_SUPPORT_VERSION=27.+で解決

 

参考にさせていただいたサイト

https://github.com/android/android-ktx/issues/551

asaba 著者: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 著者: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 著者: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 著者: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 著者: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 著者:asaba

【atom】パッケージでテーマを変えてみた

一か月前からちょくちょくatomの記事を書いていますが、何せ便利な機能が多く嬉しさのあまり舞い上がっている所存ですので

許してください。

今回は、atomのテーマを変えてみようという記事です。

他のエディタと同様atomにもテーマがあります。テーマとは、開発画面などでエンジニアの方々が効率良く開発を進めるための

プラグインのようなものです。具体的に言うと、半角インテントの可視化や変数の配色などがあげられ、今回はatomテーマの中でも

比較的メジャーなmonokaiというテーマを使ってみたいと思います。

monokaiとは、Wimer Hazenbergが作成した軽量エディタ向けのパッケージで、atomのみならず様々なエディタで人気のパッケージです。

さっそくですがこのmonokaiのインストール方法とビフォーアフターを見ていきましょう。

まず、画面右上のfileからsettingタブを開きます。すると、このような画面になるので、一番下のinstallをクリックします。

右側にパッケージとテーマのそれぞれのボタンがあり、通常はパッケージボタンがデフォルトで設定されているのでこれを

右側のテーマに切り替えます。その後に検索欄でmonokaiと検索すると、恐らく一番上にmonokaiのパッケージが出てくると思います。

作者がkevinwickiという方になっているのが今回インストールするものです。

インストール後は、設定画面に戻りthemeをクリックします。右側のシンタックステーマというところに先ほどインストールした

monokaiがあるので設定しておきましょう。

設定して画面が変われば成功です。終わりにビフォーアフターを載せておきますね。こんな感じ↓

ビフォー

アフター

こんな感じ、です。まだまだ面白いパッケージがあるので、随時紹介していけたらなと思っています。

asaba 著者:asaba

【Atom】gitを開発画面でも使う

いつもどおりatomを使っていて下になにかごにょごにょ書いてあったので気になって調べてみたら、gitからクローンしてきたファイルの

場合は開発画面でもプルやフェッチができることが判りました。

atomはgitを作っている会社と同じなので当然と言えば当然ですが。

赤線で囲んであるところには、自分の今いるブランチとフェッチコマンドが用意されていますが、プラグインを使えばソースツリーなど

のツールに負けないくらいの環境になってくれると思います。

また、マウスを重ねると英語ですがきちんと説明してくれたりと気が利く仕様になっているのが分かります。

これだけでも有能なのですが、プラグインで日本語にカスタマイズしておくともっと便利になるかもしれないですね~。

自分のAtomはほとんどプラグインをつけていないすっぴんの状態ですが、それでも視覚的に使いやすいのでお気に入りのエディタ

として使わせてもらっております。

とはいえ自分はまだまだGUIがないと不安なので、しばらくはソースツリーに頼ることになりそうです・・・。