月別アーカイブ 2月 2019

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で同じようなコンポーネントを

作りたい、でもどこにも思ったことが書いていない!というかたはもしよろしければ参考にしてみてください。

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

【Cordova】iOS端末でのバウンススクロールを無効化する方法

Cordova アプリを iPhone の実機で動作確認したとき、何も設定していないと、端までスクロールした際にびよーんと伸びる、という現象が起こるかと思います。
今回はこの現象を無効化する方法について。
ちなみに、これのことを「バウンススクロール」もしくは「オーバースクロール」と呼びます。

 

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

Cordova iOS アプリで画面外にまでオーバースクロール (バウンド) しないようにする – Corredor
http://neos21.hatenablog.com/entry/2017/06/21/080000

早速、結論の実装方法を紹介すると、comfig.xml に下記を追加するだけです。

<preference name="DisallowOverscroll" value="true" />

こちらを追加してアプリを実行すると、画面端までいくとそれ以上スクロールしなくなります。
この設定を追加すれば、例えば Twitter のように、「タイムラインの一番上まで行ったときに、さらにスクロールすると再読み込みを行う」などの、スクロールがトリガーとなった処理を行いたいときに、挙動がおかしくなることを防ぐことができます。

 

ちなみに、今回のバウンススクロール禁止を検索していた時、下記の CSS プロパティにもヒットしました。

body {
   overscroll-behavior: none;
}

こちらは、Google Chrome などのブラウザでは正常に動作しましたが、Cordovaアプリでは特に効果はないようでした。
他にも、height: 100%;overflow: hidden; を使って、スクロール自体を発生させない&無効にするという方法もありましたが、他の要素がスクロールできなくなるなど影響があったので、こちらは採用しませんでした。
何より、comfig.xml に一行追加するだけ!という手軽さなら、こちらを採用しない手はないかと。

 

以上、CordovaアプリをiOSで実行した時のバウンススクロールを無効化する方法でした。
一気にアプリらしくなるので、是非、導入をご検討ください。

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

Vue.jsでVue.js向けに開発されていないライブラリを用いる

 Vue.jsはwebページを部品化してコーディングすることを目的としたJavaScriptのフレームワークです。単一コンポーネントの仕組みを用いたVue.jsのコード例の多くは(少なくとも私の読んだコードでは)次の様になっています。

// コンポーネント定義用Vue.jsコード
<template>
  // Vue.jsと連携するHTMLコード
</template>

<script>
export default {
  name: 'hoge',
  // prop:{}とかdeta(){return {hogehoge}}とかmethods:{}とかVue.jsと連携するためのプロパティ
};
</script>

<style scoped>
  // このコンポーネント内でのみ適用されるcss
</style>
// コンポーネント読み込み用JavaScriptコード
window.$ = window.jQuery = require('jquery');
// 色々グローバルで使うライブラリ

window.Vue = require('vue');

Vue.component('hoge', require('./hoge.vue').default);

const app = new Vue({
  el: '#app',
});

 自分はVue.jsで使うことを前提にしていないライブラリはJavaScript側2、3行目の様に色々読み込むものだと思っていました。一方でこのようなやり方はグローバル汚染がひどく、重要なごく一部のライブラリ以外を読み込んだ場合あっという間にバグが生まれるとも思っていました。実際はそのようなことをせずともよく、次の様に記述することで管理しやすくライブラリを用いることができました。

<template>
  // Vue.jsと連携するHTMLコード
</template>

<script>
import 'fuga';
import foo from 'foo';

// Vue.jsに依らない静的処理
const bar = foo.bar();

export default {
  name: 'hoge',
  // importしたライブラリや変数barを用いたVue.jsと連携するコード
};
</script>

<style scoped>
  // このコンポーネント内でのみ適用されるcss
</style>

 <script>タグの先頭に記述するだけです。<script>タグの内部ならばVue.jsがいい感じにスコープを作ってくれるのでグローバル汚染を気にせず好き勝手できます。
 <script>export default {で始めて、}</script>で終わらなければならないという風に思い込んでいましたがVue.jsにその様な縛りはなく、実際はかなり自由に記述できました。

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

ついに来るか”フルAR”!? 最近のMicrosoftとAppleのARへの取り組みが気になる。

先日、いろいろ調べていたらこちらの記事を見つけました。

Microsoftが発表間近の第2世代のMRヘッドセット「HoloLens」ティザー動画を公開、新チップ搭載か? – Gigazine

MicrosoftがWindows10の登場とほぼ同時期に発表し、話題にもなったAR機器である”Hololens”ですが、なんとその後継機種が発表間近なのでは、という情報が上がってきているようです。

最近になって、ゲーム機やスマートフォンで利用できる”手軽なAR”を搭載したアプリなどは増えていますが、自分たちが”AR”と聞いてイメージするようなもの(たとえばアニメ「電脳コイル」の”電脳メガネ”のような)、いわゆる”フルAR”に近いものとしては、製品化された中では恐らくHololensが唯一なのではないかと思います。

そんなHololensの後継機種が出るとしたら…わくわくが止まりませんね。

一方、AppleもiPhoneの販売台数低下に伴い、今後AR方面に力を入れていくのではないか、という見方も出ているようです。

Apple、ARヘッドセットを2020年出荷を目標に研究中 – TeckCrunch

もし世界でトップクラスのIT企業であるこの2社が、ARのためにしのぎを削るほど力を入れ始めたら、(2社にとってはとんでもない戦争になりそうですが)一気にフルAR実現に近づくことになるかもしれませんね…!

今後の展開に要注目です。

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

【JavaScript】「The body of a for-in should be wrapped in an if statement to filter unwanted properties from the prototype」エラーの対処法

長いタイトルですみません…。
現在開発中のシステムで導入している ESLint という検証ツールで、タイトルにあるエラーが発生したので、対処法をまとめ。
エラー文は「The body of a for-in should be wrapped in an if statement to filter unwanted properties from the prototype.」というもので、翻訳したところ「for-inの本体は、プロトタイプから不要なプロパティをフィルタリングするためにif文でラップする必要があります。」とのことでした。
…いまいち意味が分からない…。

 

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

JSLintオプション考察「unfiltered for in」|もっこりJavaScript|ANALOGIC(アナロジック)
http://analogic.jp/jslint-options-forin/

上の記事によると、for-in ループを使用したときに列挙されるプロパティには、実際のデータ以外にも、プロトタイプ連鎖から来たプロパティも含まれるとのことでした。
そのため、取得したデータがオブジェクト自身が持つプロパティなのか、プロトタイプ連鎖から来たプロパティなのかを判断する必要があります。
で、それは hasOwnProperty() を使うことで判断できるとのこと。

使い方は下記のとおりです。

const list = ['A', 'B', 'C', 'D', 'E'];
for (data in list) {
    if (list.hasOwnProperty(data)) {
        // 実行したい処理
    }
}

3行目で、データの判別を行っています。
こちらを追加したところ、エラーが解消され、問題なく実行できました。

 

以上、JavaScript の for-in 文で発生したエラーの対処方法でした。
なおこの後、実装しているコードでは for-in よりも forEach の方が向いているとわかり、上記は使用しないように修正しました…。
が、うっかりと再発させそうなエラーだったので、備忘録としてまとめました。
もし、同じことでお困りの方は参考にしていただければと思います。

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

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

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

許してください。

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

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

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

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

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

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

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

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

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

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

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

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

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

ビフォー

アフター

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

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

HTMLの検証を行ってくれるwebサービスNu Html Checker

Ready to check – Nu Html Checker
 Nu Html CheckerはHTMLのバリデーターです。HTMLソースを読ませるとそれがW3C準拠なのかを始めとして様々な警告をしてくれます。読ませ方は様々です。上記リンクからはwebページのアドレス、HTMLファイル、HTMLソースコードそのものを読み込むことでHTMLバリデーションを実行するページへ飛べます。
 バリデーションの結果よく報告されるのは既に非推奨、不要な属性である、そこにそのタグを置くべきでない(label中にdivなど)の様なものから文法エラーまで多岐に渡ります。いくつかのページで試しましたが、エラーが一斉なかったのはNu Html Checkerのみでした。
 Ready to check – Nu Html Checker中のAbout this checkerにはより詳細な使い方が載っています。主にローカルで動かす手法とブックマークレットで動かす手法の二種類です。ブラウザのセキュリティ機能で動かない時がままありますが、HTMLが動的に生成される場合でも簡単に対応できるブックマークレットは特に便利です。

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

サイバーセキュリティの安全性ランキングで日本が首位

日本がサイバーセキュリティの安全性ランキングで首位、英比較サイトが算出

最も安全な国は日本で、以下、フランス、カナダ、デンマーク、米国が続く。最も危険な上位5カ国はアルジェリア、インドネシア、ベトナム、タンザニア、ウズベキスタンだった。

https://www.atmarkit.co.jp/ait/articles/1902/08/news062.html

算出の仕方が日本に良かったのだとは思いますが、結構ITに強い国が危険と判断されているところもあって、気になります。

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

sendmail.cf の CACertPath CACertFile ServerCertFile

sendmail の maillog を見ていると verify=FAIL と出る場合がありますが、これは検証スルーすれば通信自体には、なんら問題はありません。

でも気持ちわるい。なので解消のため少し調べました。もともと関係性がいまいちわからなかったのでね、いい機会です。検証してみました。

最近の SSL/TLS 証明書は中間証明書が必ず存在するので、中間証明書を何処にセットするのか悩むところです。

他のサイトで fullcahin.pem や chain.pem と使い分けて CACertFile にセットしていたり、 ServerCertFile へ、順番としてはサーバ証明書、次に中間証明書と、chain 的にセットしていたのですが、外部からサーバに対して通信すると first どうのこうのと、SSL検証がエラーとなるのです。手元の環境ではうまくいかないのです。

  • CACertFile: サーバ証明書発行機関から、サーバ証明書とセットで発行される中間証明書を単体で保存
  • ServerCertFile: SSL 発行機関から発行された、サーバ証明書のみを保存
  • CACertPath: このディレクトリへ、ca-root-nss.crt や、Mozilla 関連サイトなどで公開している ROOT 証明書(リスト)を保存(ファイル名はわかりやすければ何でも良し)し、中身を hash 値化したシンボリックリンクを作成

いろいろ調査した結果この方法でうまく verify=OK となる様になりました。

「サーバ→外部」「外部→サーバ」ともに通信が行える様になり、「サーバ→外部」は verify=OK と変化します。

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

MacBookのbootcampでキーボードが光らなくなった時に確認したいこと

自分の持っているMacbookAirにはbootcampが設定してあるのですが、bootcampで設定したWindowsを起動すると、キーボードのバックライトが光らない現象に悩まされていました。

自動で光らないのなら手動で指定すればいいか…と思ったのですが、

ホットキーでいくら輝度を上げようとしても

禁止マークがでて変更できません。
もしかして設定…?と思って”Boot Camp コントロールパネル”を開いてみたりもしたのですが、

赤枠部分を変更しても設定が反映されず、BootCampコントロールパネルを開きなおすと元の設定に戻ってしまいます。

もしかしてBootCampのドライバが壊れているのでは…と思い、ドライバをダウンロードして適用してみますが、これも意味なし。

もしかして元々のバグなのではとあきらめかけていた時、あることに気づきました。

部屋の明るさを暗くしたとき、ふとWindowsで起動中のMacを見ると…

光ってる!!!

この状態で先程動作しなかった輝度調節キーも

効くようになっていました!

試しに部屋の電気を明るくすると、自動でキーボードのバックライトが消え、輝度調節も再び不可能になっていました。

どうやら、部屋の明るさを自動で検知して、部屋が暗いときにのみキーボードのバックライトも点灯させる挙動に固定されていたようです。

ちなみに、macOS側でもこの挙動は同じで、明るい部屋でキーボードの輝度調節をしようとしてもやはりできない仕様になっていました。

ということで、キーボードのバックライトがつかない…という問題はただの勘違いだった、というオチでした…スミマセン((

ただ、BootCampコントロールパネルで、項目はあるのにキーボードバックライト周りの制御ができなくなっていたり、BootCampコントロールパネルからmacOSに切り替えることができないなど、BootCampがmacの新しい仕様に対応されていないように見える部分が多くなっています。

ユーザーからすると「もう対応されないのでは」と不安になるので、この辺りは最低限アップデートしてほしいなぁと思いました。

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