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

著者:杉浦

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)
村上 著者:村上

【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)
著者:杉浦

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)
著者:杉浦

Leaflet関連のライブラリを用いる際たまに起こるライブラリのバグ

Leaflet – a JavaScript library for interactive maps
 LeafletはJavaScript上で地図を描画、操作できる様にするライブラリです。地図の需要は多くLeafletを拡張するライブラリもまた多くあります。紹介するのはこのLeafletに何かを付け足すようなライブラリにありがちなバグです。
 Leaflet関連のライブラリはLeafletに様々なものを載せます。例えばフルスクリーン化、google map、ミニマップ、サイドバー。重要なのはこれらのいずれもまずLeafletありきだということです。このためライブラリの中には単独で動くようにライブラリ内でLeafletを読み込んでくれるものがいます。これ自体はありがたいしそのライブラリ単独ではむしろ良いことです。ですがこの動作を既にLeafletが読み込まれているにも関わらず行った場合、問題が起きます。既に読み込まれていたLeafletを壊すことがあるのです。このLeafletを壊すような問答無用な読み込み動作を行うライブラリが稀にあります。
 Leaflet読み込み動作付きライブラリと他のライブラリを混ぜ合わせて使うと、他のライブラリを上書きして、存在するはずの関数が存在しない、引数の型が期待したものと異なるといった混乱が引き起こされバグが発生します。対処法はライブラリの中を見て

import L from 'leaflet'

の様な変数Lにleafletを出力している様な記述があるかチェックして消し、プロジェクト内に移動しパスを変更するだけです。
 ライブラリの中をいじること自体はバージョン管理が面倒になるアンチパターンもいい所なのであまり褒められたやり方ではありませんが、幸いLeaflet拡張機能系統のライブラリは小さなものが多く個人でもすぐに読み解け管理できます。

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

【React】エンターキーが押されたことを検知する方法

チャット画面を作成していたとき、エンターキーでテキスト入力エリアに入力したテキストを送信するという処理を行いたかったので、その方法について。
React と書いていますが、恐らく通常の JavaScript でも扱えるはず。

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

Reactでエンターキーのイベントを取得する方法 – 1日1%成長するブログ
http://masarufuruya.hatenadiary.jp/entry/2017/09/06/200551

 

さて、実装方法ですが、キー入力されたことは onKeyDown イベントで検知します。

<input type='text' onKeyDown={(e) => this.handleKeyDown(e)} />

上記は、なにかしらのキーが押された場合、その都度 handleKeyDown 関数が呼び出されます。

で、handleKeyDown 関数の中身は下記のとおりです。

handleKeyDown(e) {
  if (e.keyCode === 13) {
    // エンターキーが押された時の処理
  }
}

エンターキーは keyCode では 13 という数字が割り振られているとのことだったので、keyCode の値を見て判断します。
あとは、この if 文の中で、テキストを送信した際に行いたい処理を実行すればOKです。
非常に簡単でした!

 

以上、エンターキーが押されたかどうかを検知する方法でした。
なお、Androidの実機と iOS の Simulator でも動作確認を行いましたが、問題なく動作しました。
実行ボタンが無くなると、やはりレイアウトがすっきりする気がします。
是非、ご参考にしていただければと思います。

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

FuelPHPで今開いているページのコントローラー/アクションを取得する方法

・コントローラー名を取得したいとき(コントローラークラス名)

echo Request::main()->controller;
//ex.: Controller_Hogehoge

・アクション名を取得したいとき

echo Request::active()->action:
//ex.: huga

なお、コントローラーを取る方法として、Uriクラスを使って

 echo Request::main()->uri->segment(1);  //ベースURLから1番目の値をとる

とすることもできるようですが、index(/)などの場合、取得できる値がNULLになってしまう問題があるため、個人的には最初の方法で取得したうえで正規表現などで加工した方が確実かな、と思います。

参考:
[PHP][FuelPHP]FuelPHPで気になるあの情報の取り出し方 – ECサイト運営開発記

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

【Cordova】プラットフォームごとにCSSファイルを切り替える方法

今回はタイトル通り、CordovaアプリでプラットフォームごとにCSSを切り替える方法について。
デザインにもよるかもしれませんが、覚えておくと意外と便利です。

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

第3回:Apache Cordovaでプラグインを使ってみよう (1/5):連載:Visual Studio+Apache Cordovaで始めるiOS/Androidアプリ開発 – @IT
http://www.atmarkit.co.jp/ait/articles/1605/23/news032.html

こちらの2ページ目に記載されている内容です。

 

こちらの設定はそれほど難しくなく、まずは大元となるCSSを作成し、アプリ内で読み込みます。
ここでは仮に style.css としておきます。
次に、プロジェクトのルートディレクトリ直下に merges ディレクトリを作成し、更にそのフォルダ内に、android、ios など、プラットフォーム名のディレクトリを作ります。
最後に、各プラットフォーム内にcssディレクトリを作成し、その中に、上で作成した style.css ファイルをコピー&ペーストします。
イメージとしてはこんな感じ。

merges
 ┗ android
   ┗ css ― style.css
 ┗ ios
   ┗ css ― style.css

あとは、各プラットフォームの style.css ファイルを変更すればOKです。

なお、大元の CSS から変更がない場合は、そのプラットフォームのディレクトリを作成する必要はありません。
例えば、iOS はデザインを追加もしくは変更したいけど、Android はそのままでOKという場合は、ios ディレクトリ以下のみを作成するだけで、変更が反映されます。

注意点というか推奨ですが、こちらを実装する場合は、切り替える必要のある記述のみを 別ファイルに抜き出すことをおすすめします。
一度こちらの方法でCSSを切り替えたとき、CSSファイルをそっくりそのままコピーして各プラットフォームごとに配置してしまったので、CSS ファイルの内容を把握するのが若干大変でした。
是非、私と同じわだちを踏まないようにしてください…。

また、JavaScript や画像でも上記の方法を用いれば、同様にプラットフォームごとに処理を変更することができます。
が、私は試したことがないので…興味やその必要性のある方は、是非実際にお試しください。

 

以上、プラットフォームごとにCSSを切り替える方法でした。
もし以前の私のように、同じことにお悩みの方がいらっしゃいましたら、参考にしていただければ幸いです。

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

PostgreSQL で正規表現の$と\Z

便利なので、 SQL の SELECT句や、WHERE句で、良く正規表現を使うのですが、変数の最後とマッチさせたくて悩んだのですが、無事解決したので書いておきます。

ネット検索すると PostgreSQL の末尾は \Z だと書かれていますが、なんどやっても一致しないのです。

えい、それじゃ小文字で \z なんでどうだ?とすると “z” にマッチするし。

でも無事解決しました。多分、PostgreSQL が古すぎるのです😂

regexp_replace(mojimoji, E’.[0-9]+$’, ”))

なんと、ずばり “$” でした。って、これかよ普通じゃんか。付けなくても動くけど、”E” と付けないと怒られるので付けました。

  • この記事いいね! (0)
asaba 著者: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()内で値を扱う時は値の型に気を配ってコーディングしなさいという戒めだと思って肝に銘じておきます。

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

【Cordova】アプリの見た目をiPhoneXの画面に対応させる方法

現在開発中のアプリを、ノッチのある iPhoneX で動作確認したところ、個人的に非常に見た目が格好悪かったので、その対処法について。
結果としては、無事にノッチにも対応した見た目に変更することができました。

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

検証。iPhone Xでアプリの見た目はどうなるのか?|モナカプレス
iPhone X に対応したモバイルサイト・Cordova アプリの作り方と注意点 – Naoki Matagawa – Medium

 

早速適用方法ですが、まず HTML に下記の Metaタグを追加します。

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width,viewport-fit=cover">

contentviewport-fit=cover を追加しています。
こちらを追加することで、アプリの起動時に画面の上下にあった白いエリアが無くなります。
これだけでも大分アプリらしくなりますが、やはりノッチが気になる…。

ので、次に 下記のコマンドで、スプラッシュページのプラグインを追加します。

cordova plugin add cordova-plugin-splashscreen

そうしたら、下のサイズ・名前の画像を用意します。

  • Default@2x~iphone~anyany.png – 1334×1334
  • Default@2x~iphone~comany.png – 750×1334
  • Default@2x~iphone~comcom.png – 1334×750
  • Default@3x~iphone~anyany.png – 2208×2208
  • Default@3x~iphone~anycom.png – 2208×1242
  • Default@3x~iphone~comany.png – 1242×2208
  • Default@2x~ipad~anyany.png – 2732×2732
  • Default@2x~ipad~comany.png – 1278×2732

保存場所は、res/screen/ios ディレクトリの中です。
結構大きいサイズの画像が必要です。

で、画像が用意出来たら、config.xml に下記の設定を追加します。

<platform name="ios">
    <splash src="res/screen/ios/Default@2x~iphone~anyany.png" />
    <splash src="res/screen/ios/Default@2x~iphone~comany.png" />
    <splash src="res/screen/ios/Default@2x~iphone~comcom.png" />
    <splash src="res/screen/ios/Default@3x~iphone~anyany.png" />
    <splash src="res/screen/ios/Default@3x~iphone~anycom.png" />
    <splash src="res/screen/ios/Default@3x~iphone~comany.png" />
    <splash src="res/screen/ios/Default@2x~ipad~anyany.png" />
    <splash src="res/screen/ios/Default@2x~ipad~comany.png" />
</platform>

ここまで完了した状態で実行すれば、アプリの画面がノッチの部分まできちんと広がります。
が、広がりすぎで、レイアウトによっては角が欠けたりするので、下記の CSS を追加します。

html {
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
    padding-right: constant(safe-area-inset-right);
    padding-right: env(safe-area-inset-right);
    padding-left: constant(safe-area-inset-left);
    padding-left: env(safe-area-inset-left);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

こちらを指定することで、ノッチ部分等に画面が被さるのを防ぐことができます。
なお、場合によっては html への指定ではうまくいかない場合がありますので、その辺りはデザインによって適宜変更してください。
私は ヘッダーとフッターがあるデザインだったため、padding-toppadding-bottom は html ではなく、ヘッダーとフッターにそれぞれ指定しました。
なお、上記の設定は、端末が iPhoneX の時のみ有効になりますので、Android や 他の iPhone 端末には影響しません。

 

以上、Cordova アプリの見た目を iPhoneX に対応させる方法でした。
設定は意外と簡単で、むしろスプラッシュページの画像を用意する方が面倒でした。
もし同じことでお悩みの方がいらっしゃいましたら、参考にしていただければと思います。

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