月別アーカイブ 4月 2019

村上 著者:村上

【JavaScript】LocalStorageを扱う上での注意点

うっかり忘れそうなので、自戒も込めてまとめ。
ローカルにデータを無期限に保存できる便利な LocalStorage の注意点です。

 

知っている人には、そんなこと?と思われそうですが、LocalStorage は値は必ず 文字列 で保存されます。
私は、つい Boolean 型をそのまま格納してしまい、若干ハマりかけました。

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

localStorage 使い始めてハマりがちな罠 – #生存戦略 、それは – subtech
http://subtech.g.hatena.ne.jp/secondlife/20091201/1259631283

こちらでも書かれているように、LocalStorage は自動で型変換が行われます。
で、console.log で確認すると、きちんと true または false が格納されているのですが、これは Boolean 型ではなく文字列なので要注意。
ログで見るだけだと、正しい値が保持されているように見えてしまうんですよね…。
なので、if 文等で比較をして結果がおかしい場合は、型の確認までするようにしましょう。

 

以上、LocalStorage を利用する際の注意点についてでした。
皆様もご利用の際はお気を付けください。

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

ECサイトの障害

某ECサイトでシステム障害が発生している最中の様です。

私たちのようにサーバの運用保守を行う技術側として、身につまされる思いです。弊社のサーバサービスも、更に安定稼働、トラブルが無い様にしなければなりません。気を引き締めて取り組まなければ。

まずはできるところから、今一度、再確認しよう。

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

【javaScript fetch】fetchApiで素のデータを送っても何も返ってこない罠にはまったお話

fetchApiは、通信が成功した際にはpromise型で値を返します。が、スコープで囲んで変数に入れて飛ばすと、サーバーに要求した

値が返ってこない事態にハマってしまいました。ajaxだとdata:{“key”,value}みたいにまとめてからプロパティに入れて取ってくることが

できるのですがこっちでは仕様のせいか受け取ってくれません。

調べてみると、そのままbodyに入れるのではなくformDataというfetchから新しく使えるようになったApiを使って送り込むみたいです。

ajaxではdocumentというxmlを取り扱うことができるオブジェクトがあったのですが、こっちではそれが使えないのでこちらを代わりに

使ってくださいということだと思います。

fetchってもうリリースされてから数年経つのですが、国内の記事を探しても全然見つからないのでみんなまだajax使ってるのかなと

思ってしまいます。

ajaxと違いdomをいちいち掘削しないので、通信速度の向上は期待してもいいと思います。ですが、取ってきたxmlから各タグを取り出すメソッド

とかがめんどくさい感じでしたので、そこらが原因で手が出にくいのかなと思いました。前述の処理だけはjqueryに任せて通信だけ

fetchで賄うことができますが、試していないので速さの保証は実装してみないと分からないです。


var formData = new FormData() ;
var id = this.props.match.params.id;
var followMember = window.localStorage.getItem("member_no");
formData.append( "name", "asaba" ) ;
formData.append( "location", "shizuoka" );
formData.append( "gender", "male" );

var url = 'https://hottomotto';
fetch(url,
{ body: formData,
method: "POST",
})
//通常のレスポンスを返す
.then(function (response) {
return response.text();
})
.then(function(text) {
var xml = new DOMParser().parseFromString(text, "text/xml");
console.log(xml);
});


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

【JavaScript】JSDocからドキュメントページを作成するJSDoc 3の紹介

jsdoc – npm
jsdoc3/jsdoc: An API documentation generator for JavaScript.
 JSDoc 3はJSDocを読み取り、JSDocに従ってからドキュメントを表すHTMLページを作成してくれます。インストールはnpm installでプロジェクトに追加するだけです。
 実行方法は設定を決めて、コマンドを叩く。コマンドはカレントディレクトリをプロジェクトのルートにして

./node_modules/.bin/jsdoc [対象ファイル、フォルダのパス] -r -d [出力先のパス] -c [設定ファイルのパス]

です。-rはrecursiveのRであり再帰的にフォルダを見るオプションです。
 設定ファイルは必要になることがそれなりあります。これはJavaScriptはJavaScriptそのままで書かれないことがそれなりにあるためです。TypeScriptなどのAltJSやVue.jsなどの独自の形式を持つフレームワークが良く用いられます。そういった素のJavaScriptでない環境のためにプラグインが開発され、それを読み込み、設定するためにjson形式の設定ファイルが必要になります。
 例えばVue.js用の設定ファイルは次になります

{
  "plugins": ["node_modules/jsdoc-vuejs"],
  "source": {
    "includePattern": "\\.(vue|js)$"
  },
}

 読み込むプラグインを決定し、拡張子vueのファイルも読み込むという風に設定しています。
 こうして出来上がったページが次の画像です。

 JSDoc 3にはテンプレートが用意され、拡張されています。テンプレートのうちのいくつかのデモは次のサイトから見ることが出来ます。
jsdoc3 template list examples

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

暗号化 WPA3と Wi-Fi

結構まえに WEP や WPA2 に脆弱性があり漏れるとなり WPA3 が出ていましたが、とうとう WPA3 も破られた様です。

その頃から、では無いですが結構前から会社 PC は 有線 LAN を使ってケーブルで LAN を使っていて超快適です。

みなさんも LTE と 有線LAN を使いましょう!

今の LTE の 100 倍でしたっけ、早く 5G になるといいですね。そうすれば Wi-Fi の脆弱性に悩まされずにすみます。

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

【Cordova】「The versions of the Android Gradle plugin and Gradle are not compatible.」エラーの対処法

ちょっとミスをして、Cordova アプリから Android プラットフォームの削除・再追加を行ったのですが、その時に発生したエラーについて。
Android Studio のバージョンを上げたのも原因だったのかも?

Gradle のバージョンに関するエラーで、全文は下記のとおり。

ERROR: The versions of the Android Gradle plugin and Gradle are not compatible.
Please do one of the following:
Update your plugin to version 2.4. This will require changes to build.gradle due to API changes.

エラー:Android GradleプラグインとGradleのバージョンは互換性がありません。次のいずれかを行ってください。プラグインをバージョン 2.4 に更新してください。これはAPIの変更により build.gradle への変更を必要とします。」とのこと。

 

そのため、エラー文に書いてある通り、build.gradle のバージョンを更新しました。
また、Android Studio の File > Project Structure の Project でも、バージョンを確認しました。
…が、最初はどこを直していいのかわからず、いろんなところを直しては戻し、また別のところの値を変え…とやっていたら、いつのまにか直っていた感じなので、確認箇所がこれでいいのかは不明です。

一応、参考にさせていただいたサイトを挙げておきます。

[Android Studio][gradle]gradleとAndroid plugin for gradleのバージョンを合わせる
https://qiita.com/azumak/items/c48c56447a7a345f2b43

 

以上、Android Studio で Gradle のバージョンエラーが発生した際の対処法についてでした。
あまり参考にならない気もしますが…。

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

Atomを使っていてメニューバーが消えてしまったときの対処法

いつも通りにソースファイルを立ち上げて作業を始めようとしたのですが、何かの拍子でメニューバーがごっそり消えてしまいました。

メニューバーにはファイルを開いたり保存したりなど普段の作業に必須な項目が入っています。さすがにこのままでは気持ち悪いし

効率が落ちるので元に戻そうと決めたのですが、英語表記なのでわかりにくくかなり苦労してしまいました。

方法としましては、まず今回の目的であるメニューバーを手っ取り早く探すためにCtrl + Shift + pコマンドを押してモーダルを出します。

そこで、toggleと検索します。すると、下の画面のようになると思います。

この画面の一番下のWindow Toggle Menu Barという項目をクリックしてみましょう。すると、上からメニューバーがにゅっと出てくる

のが確認できると思います。

何もなければこれでいつも通りにメニューバーを使うことができます。余談ですが、ファイルを開くと、開いたファイルの一覧が

見ることができるバーも同じように復元しようとしたのですがこちらは元に戻りませんでした・・・。

厳密に言うと形だけは直ったのですが、ファイルの一覧が見れなくなってしまい非常に不便な思いをしています。こちらはツイッターやgit

などで情報収集して修正の目途が立てばまたアップしていきたいと思います。

 

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

【PhpStorm】PhpStormの提案するコードの簡略化

 PhpStormはAlt+EnterでPhpStormからコードをよりよくするための提案をしてくれます。例えば次です。

 厳密な比較を行うための第3引数を提案してくれました。この機能は様々な場所で働きます。例えばテストのAssertならば次の様に最もふさわしいAssert関数を提案してくれます。

 この提案機能はプラグインでも実装されており、次の二つが多くの人にダウンロードされ評価も高かったです。
kalessil/phpinspectionsea: A Static Code Analyzer for PHP (a PhpStorm/Idea Plugin)
SonarLint – Plugins | JetBrains
 phpinspectionseaはPhp Inspections(EA Extended)という名前でマーケットに並んでいます。EAは適度に警告、提案をしてくれます。EAはとりあえず入れるのにおすすめです。SonarLintは厳密ですが、誤報率も高いです。SonarLintがちがちに書くなりルールを無効化するなりしながら記述することになりますが慣れてくると便利です。

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

Intel HD Graphics コントロールパネルが開かない時に確認したいこと

先日、Windows10 October 2018 Update(1809)を適用した後あたりから、グラフィックドライバの設定がおかしくなり(無効化していたはずのバッテリー駆動時のフレームレートを低下させる機能が再び有効になっていた)、唯一の設定手段であるIntel HD Graphics コントロールパネルを開こうとしたところ、

このスプラッシュ画面までは表示されるものの、何度試しても肝心のコントロールパネルは一向に表示されません。

Windows 10でのIntel HD Graphics問題の対処法(更新) – Windows 10 Solomonレビュー[redémarrage]

こちらの情報も参考にしていろいろ試したのですが、何度ドライバを入れなおしても一向に解決しませんでした…

困り果ててOSのバージョンのロールバックも考えたのですが、その前に「もしかしたら開かない原因がイベントビューア(システムログビュアー)に落ちているのでは」と思いダメ元で見てみました。

すると…

障害が発生しているアプリケーション名: Gfxv4_0.exe、バージョン: 8.15.100.6472、タイム スタンプ: 0x5c0ebadd
障害が発生しているモジュール名: amdvlk64.dll、バージョン: 1.0.39.0、タイム スタンプ: 0x5a4370eb
例外コード: 0xc000041d
障害オフセット: 0x000000000000ae51
障害が発生しているプロセス ID: 0x5a98
障害が発生しているアプリケーションの開始時刻: 0x01d4f425b8b07ceb
障害が発生しているアプリケーション パス: C:\WINDOWS\System32\DriverStore\FileRepository\igdlh64.inf_amd64_555cfc07a674ecdd\Gfxv4_0.exe
障害が発生しているモジュール パス: C:\WINDOWS\System32\amdvlk64.dll
レポート ID: ...
障害が発生しているパッケージの完全な名前: 
障害が発生しているパッケージに関連するアプリケーション ID: 

このようなエラーを発見。

Gfxv4_0.exe はIntel HD Graphics コントロールパネルの一部であり、これが何らかのエラーで止まってしまったというまさにドンピシャのエラーが記録されていました。

原因となっている amdvlk64.dll ですが、名前の通り、AMD製グラフィックドライバー周りのファイルだと思われます。

実は問題が起きたPCには、外部GPUとしてAMD製のグラフィックカードであるRadeonが搭載されていて、そのチップ用のグラフィックドライバもインストールされているのですが、確認したところ、何故か古いバージョンのものに戻ってしまっていました。

そこで、AMD Radeon公式サイトから、自動アップデートツールを入手して、ドライバのアップデートを実行しました。

AMD公式のドライバ配布ページに行き、赤枠のアプリをダウンロードすれば、GPUのモデルがわからなくても自動で最適なドライバをインストールしてくれます。
アップデート完了後のドライバユーティリティの画面。旧バージョンにはなかった”アップデート”の文字が追加されました。

ドライバのインストール完了後、一度再起動を行い、再度HD Graphicsコントロールパネルを開いたところ…

無事表示されるようになっていました!!!
まさか、他社製のグラフィックドライバが足を引っ張っていたとは…

ということで、何かトラブルが起きたときはまずログを確認しましょう。

…というお話でした(汗

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

PHPでMS SQL ServerをCygwinで使うべきではない理由

何故なら、公式のMSSQLドライバがCygwin用に提供されていないからです。

GitHubのMicrosoftの公式リポジトリでも、Cygwinはサポートしないとはっきりと明言されています。

Driver in cygwin enviroment #258 – GitHub

Transact SQL クライアントのオープンソースの実装であるFreeTDSについてはCygwinにもドライバがあるので、これを使えば”とりあえずは”Cygwin上のPHPからSQL Serverへ接続することはできます。

しかしFreeTDSではSQL文実行後一定時間経過しても結果が返ってこない場合、接続を切ってしまううえ、この仕様を修正するにはFreeTDSのソースを修正するしかない、という状況になっているようです。(調べて見つけた記事にそのようなことが書かれていたのですが、その記事のURLを見失ってしまいました…また見つけたら追記します。)

代替えとして、Windowsネイティブでありながら、基本的なLAMP環境を簡単に動作させることができるXAMPPというパッケージがあります

XAMPP

こちらなら、SQL Serverの公式PHPドライバが利用可能ですので、 個人的にはこちらを利用するのがおすすめです。

本当はUNIXライクなOSで動作させるのが一番なのですが、もしWindowsでどうしても…という方は一度検討してみてください。

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