月別アーカイブ 7月 2019

asaba 著者:asaba

【node.js】node.jsのバージョンが8以下だとcreate-react-appが使えなくなりました

react初級者が手っ取り早くreact開発をするのに便利だったcreate-react-appですが、知らない間にnodeの

バージョンが低いとcreate-react-appでテンプレートを作れなくなっていました。

今の自分のnodeのバージョンが6.3.10だったのですが、試しにcreate-react-app toyBoxで適当にテンプレを

作ろうと思って実行したところ、このようなエラーが出ました。


Y<span style="color: #ff6600;">ou are running Node 6.10.3.</span>
Create React App requires Node 8 or higher.</span>
Please update your version of Node.</span></span>

分かりやすい。このエラーが出た場合は今のnodeから8以上のnodeに切り替えてください。

nodistをインストールしている場合は、コマンドでnodist +8.0.0でnodeのバージョン(8以上なら何でもいい)を

インストールします。その後に同じくコマンドでnodist 6.11.3と打ち込んで現在のnodeから実際に8.0.0に

切り替えます。

node -vでバージョンを確認して8.0.0になっていれば切り替え成功です。ここで再度create-react-app toyBox

を打ち込んでみましょう。緑色の文字でsuccessが出れば成功になります。

もし、正常に動かないまたはnode.jsのバージョンが変わらなかった場合は一回node.jsをアンインストール

することをお勧めします。

 

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

【PHP】Adapterパターンであるカラムの値によって大きく振る舞いを変えるテーブルの扱いを多少マシにする

 ときおり扱い難い定義のデータベースを扱う必要が出てきます。特定のカラムによって値の意味や他テーブルとの関係が大きく変わるテーブルはその一つです。
 例えば、usersテーブルにtypeカラムがあり、typeによって仮会員か一般会員か特別会員か区別するとします。それぞれ似た様で確かに違うモノです。仮会員はメールアドレス等いくつかのデータがnullでも良し、の様に別のふるまいが要求され、それが増えてくると、usersテーブルを扱うのはだんだん面倒になってきます。早い時点でuserテーブルをリファクタリングできていれば問題にならないのですが、そうならないまま既存データやコードが積み重なり今更変える時間がない、ということもあります。アダプターパターンを用いることでデータベース定義を変えないままこれを緩和できます。
 アダプターパターンは増補改訂版Java言語で学ぶデザインパターン入門 | 結城 浩 |本 | 通販 | Amazonでは次のように説明されています。

「すでに提供されているもの」と「必要なもの」の間の「ずれ」を埋めるようなデザインパターン、これが
Adapterパターン
です。

 この考えに従えば「すでに提供されているもの」はtypeによってデータの意味が大きく変わるテーブル、「必要なもの」はデータの意味ごとのテーブルです。多くのフレームワークで採用されているORM(オブジェクト関係マッピング)は1テーブルに1モデルの原則で使いやすい様に作られています。これを1つの意味に対して1モデルになる様に用います。
 具体的にはマッピングの時点でwhere句を用いて、あるテーブルの特定のtype1つに対して1モデルの様にします。
 例えばLaravelならば

/** User.php */
class User{
  // 仮会員、一般会員、特別会員に関する大量のメソッド
}

となっている1つのモデル定義ファイルを明示的なテーブル指定とグローバルスコープによって

/** TemporaryUser.php */
class TemporaryUser{
    protected $table = 'users';
    public funtion boot(){
        parent::boot();
        self::addGlobalScope('decide_user_type', static function (Builder $query) {
            $query->where('type', config('const.user.type.temporary'));
        });
    }
    // 仮会員に関するメソッド
}
/** GeneralUser.php */
class GeneralUser{
    protected $table = 'users';
    public funtion boot(){
        parent::boot();
        self::addGlobalScope('decide_user_type', static function (Builder $query) {
            $query->where('type', config('const.user.type.general'));
        });
    }
    // 一般会員に関するメソッド
}
/** SpecialUser.php */
class SpecialUser{
    protected $table = 'users';
    public funtion boot(){
        parent::boot();
        self::addGlobalScope('decide_user_type', static function (Builder $query) {
            $query->where('type', config('const.user.type.special'));
        });
    }
    // 特別会員に関するメソッド
}

と分割した3ファイルに分割します。完全に共有する部分は、ユーザ特性としてtraitを用意し、3会員モデルクラスそれぞれにuseさせることで整理できます。
 テーブルを分割する例を挙げましたが逆に複数のテーブルや設定等をまとめた上でカプセル化されたEntityクラスを作るというのもまた別のAdapterパターンの活用です。

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

やっぱりAndroidにも随時アップデートは必要。Googleが対策するも不正なアプリに感染する端末が出現した事案

ニュースサイトのGigazineを見ていたところ、下記の記事を見つけました。

2500万台のAndroid端末が感染しているマルウェア「Agent Smith」見つかる – Gigazine

ネット上で Agent Smith という不正なマルウェアが発見されたという内容。

ユーザーが気づかないうちに正式なアプリを不正なアプリと置き換えてしまうというなかなか悪質なマルウェアなのですが、マルウェアが不正な操作を行う際に利用していたAndroidの脆弱性について、Googleは2017年時点でこの脆弱性に気づいており、すぐにパッチをリリースしています。

ところがご存知の通り、Androidのアップデートを適用するかどうかはキャリアやメーカーにゆだねられており、大抵の場合(特に古い端末は)キャリア・メーカー側でアップデートを止めてしまっているのが現状です。

OSはシステムの根幹ですが、一方で大変複雑なプログラムなので、どんなに優秀な開発者が集まったとしても潜在的なバグからは逃れることはできません。

なので、OSへの定期的なセキュリティアップデートは必ずなければならない存在なのですが、Androidについては上記のような現状なのでかなり対応がザルになっています。

最近自分はPixel3aに乗り換えましたが、理由の一つとして、アップデートが全く振ってこない他社のスマートフォンにうんざりしていたという部分もあります。(本当は端末のサポート期間が長く、かつ端末がサポートされている期間は随時アップデートが降ってくるiPhoneに変えようと思ってました。)

Googleもようやく、他社へのAndroidの随時アップデートを義務化する動きが出てきて改善しつつあるようですが、昨今の状況を考えると、現時点では残念ながらメーカー製のAndroidはもっともセキュリティ的に脆弱なスマートフォンだと言われても致し方ないのかもしれません。

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

【cordova】cordova-plugin-email-composerで簡単にメールフォームを作成する

cordova-plugin-email-composerは、導入するだけでメールのフォームをそのままアプリに取り入れることができます。

よくあるメールを送ってお問い合わせしてくださいというアレです。アプリでは主に設定画面やパスワードを忘れたときのために

導入されることが多いと思われます。

導入方方法もとても簡単で、以下の通りに通常のプラグインと同じようにサンプルを入れるだけで機能してくれるのでおすすめです。


mailSend(){
  window.cordova.plugins.email.isAvailable(function (hasAccount) {
    if (hasAccount) {
      window.cordova.plugins.email.open({
        to: "username@gmal.com",
        subject: "テストメール",
        body: "こんにちは!",
        isHtml: false
      });
    } else {
      window.ons.notification.alert({
        message: "There is no email client available."
      });
    }
  });

subjectとbodyにapiなどから取得した値を格納した変数を入れることが出来れば使い幅がぐっと上がりそうですね。

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

【Android】作成したAPKファイルが64ビットに対応しているかを調べる方法

先日に引き続き、Android アプリが 64ビットに対応しているかを確認する方法・第二段です。
後輩君が違う方法を教えてくれたので、こちらの方法でも確認してみました。

参考にしたサイトはこちらから。

Android の 64bit 対応のapkファイルの作成方法 – 強火で進め
http://nakamura001.hatenablog.com/entry/20180717/1531822914

 

使用するのは、aapt というコマンドです。
私はコマンドプロンプト上で実行しました。

実行するコマンドは下記のとおりです。

aapt dump badging [アプリのAPKファイル]

ただ、パスが通っていなかったので、コマンドが実行できる場所まで移動します。
私の場合は、下記の場所にありました。

C:\Users\[ユーザー名]\AppData\Local\Android\sdk\build-tools.0.0-rc3

で、上記を実行すると、ズラズラとよく分からないデータが出力されるので、その中から native-code: という記述を探します。
ここに arm64-v8a が含まれていたら、64ビットに対応している APK ファイルが作成されているとのことでした。
私もこちらの方法で確認したところ…そもそも native-code: という記述が見つかりませんでした。
…Cordova のアプリだからでしょうか?
でも、APK ファイルの作成は Android Studio で行ったのですが…。
ちょっとよく分からない結果になってしまいました。

 

以上、Android アプリが 64ビットに対応しているかを調べる方法でした。
どなたかの参考になれば幸いです。

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

Gitで”最も一般的に使用されているgitのヒントとテクニック”を紹介しているリポジトリgit-tips/tips

 Gitでコード管理をするだけならコード管理を目的としたGUIアプリやIDE備え付けの機能を使った方が楽です。一方コマンドラインからGitを用いるならば、見た目や操作性は微妙ですがより自由自在にGitの機能を使えます。アプリやIDE自体、ボタンやモニターにGitのコマンドと装飾された結果を結びつけているものですから、コマンドラインの方がより自由なモノになります。コマンドラインの方が自由とはいえ、使い勝手が悪いのは事実で面白い使い方の例などが欲しくなります。git-tips/tipsにはその様な例が載っています。
git-tips/tips: Most commonly used git tips and tricks.
isotai/git-tips: 最もよく使われるgitの小技と裏技(少し翻訳停滞中)
 例えば、’Group commits by authors and title’という説明でgit shortlogというコマンドが載っています。これは次の様な結果を見せます。

 コミット数と名前とコミットメッセージの一覧です。こういった結果を元にシェルでちょちょいと加工するだけで興味深いモノが出力できます。例えば次です。

git shortlog | grep ^[^\ ] | awk -F [\(\)] '{print $2,$1}' | sort -h -r

 grepで行頭に空白のない文字列であるコミット数と名前だけに絞り込み、awkで()区切りで文字列操作してコミット数が行頭になる様に文字列加工、sortで人間にとって自然な順番の反対で並び替え、とすると

の様にユーザごとのコミット数降順が分かります。同様に変更した行数やらマージされたプルリク数やら色々解析できます。また、git help -aで全てのgitコマンドのリストが出るのでそこから自分で探るのも手です。

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

【JavaScript】スクロールバーをカスタマイズする方法

実際に使う機会があるかは分かりませんが、ひょんなことから調べたので備忘録としてまとめ。
Webページのスクロールバーをカスタマイズする方法です。

普通ブラウザのスクロールバーは、グレーの四角形だと思いますが、Web ページによっては、この見た目がそぐわなくて美しくない!という場合があるかと思います。
そんな時に、このスクロールバーではなくもっとシンプルなスクロールバーを実装するためのライブラリがあります。

それがこちらの「SimpleBar」というライブラリです。
公式サイトはこちらから。

SimpleBar – Custom scrollbars made simple
http://grsmto.github.io/simplebar/

 

使い方はとても簡単で、まず simplebar.min.jssimplebar.css ファイルをダウンロードして、HTML の head 内に追加します。
もしくは、CDN でも配信しているので、こちらを記述しても OK です。

<link rel="stylesheet" href="./css/simplebar.css">
<script src="./js/simplebar.min.js"></script>
<!-- または -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.css">
<script src="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.min.js"></script>

ちなみに、ReactVue.js でも使えるようです。

あとは、スクロールを追加したい要素に対して data-simplebar を追加します。
サンプルコードは下記のとおりです。

<div data-simplebar>
    <!-- 表示したい要素 -->
</div>

作業は以上です!
これでシンプルなスクロールバーが実装できます。

 

以上、ブラウザのスクロールバーをカスタマイズする方法でした。
折角調べたので、機会があれば是非実装してみたいと思います。

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

【Excel】縦列のセルを一括で横列に張り付ける方法

今回は、縦一列に並んでいるセルを横一列に一挙にペーストする方法を載せていきたいと思います。

方法はとっても簡単。ペーストしたいセルをコピーした後に形式を選択して貼り付け->形式を選択して貼り

付けを選択。

 

excel2010ならば上記のような画面がでてくると思います。

形式を選択して貼り付け後、以下のようなダイアログがでてくると思います。

 

この中の、右下にある行列を入れ替えるのチェックボックスにレ点をつけてokを押すだけで縦横を

変化させてコピペすることができます。

 

※コピー前

 

※コピー後

 

忘れないうちにメモしましょう。

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

Raspberry Pi 4 Model B 発売!! ついにギガビットLANやUSB3が搭載されるが、一方で不具合も…

ついに Raspberry Pi 4(Model B)が 2019年6月24日に発売されました!!!

Raspberry Piは5000円弱で購入できる、シングルボードコンピューターです。

低価格でありながら、現行のスマートフォンに迫る性能を搭載し、PC用のOSをインストールすることが可能で、学習用や電子工作、実験などで使用される大人気のガジェットとなっています。

Raspberry Pi公式サイト

今回発売されたのはそんなRaspberry Piの4回目のメジャーアップデートの機種となっています。

具体的にどの部分がアップデートされたかというと、まずは待望のUSB 3.0ポート、そしてついに本物のギガビットイーサネットが搭載されました…!!!

ラズパイは価格と性能のバランスが取れたいい端末だなーとは思っていたものの、唯一、ギガビットイーサネットが搭載されていないのが残念なポイントでした。

今回のラズパイ4でその欠点が無くなり、より実用的になりました。

ここまでのスペックがあれば、ファイルサーバーやWebサーバーとして使ってもよいレベルかもしれません。(HDDを繋げる場合は、電力の関係で外部電源供給に対応した機種の方がよさそうではありますが…)

また、USB 3.0もラズパイとしては初めて、2ポート搭載されました。

USBハブとUSB3.0対応のLANアダプタを使用すればルーターとしても使用できるかもしれませんね。

また、ラズパイ4からフルサイズのHDMI端子は廃止され、代わりにmicro HDMIが2ポート搭載されました。

アダプタや対応ケーブルを使用しないと主流のフルサイズHDMIと接続できないのは不便ですが、2ポート搭載されているので、なんとラズパイ1つでデュアルディスプレイ環境が実現できてしまうようです。すげぇ…

こんな感じで、大きく進化したRaspberry Pi 4ですが、一方で現時点ですでにいくつか不具合も報告されています。

「Raspberry Pi 4」は発熱が懸念されるも新ファームウェアで改善可能だとのレビュー結果 – Gigazine

どうやらかなり発熱があったらしく、それが原因で動作のパフォーマンスが低下してしまうことがあったようです。

また、

Raspberry Pi 4、USB-C実装に不備。一部のケーブルで給電できない不具合 – engadget

Raspberry Pi 4から宮殿部分もmicroUSBからUSB Type-Cに変更されているのですが、仕様上の問題でeMakerを搭載したUSB Type-Cケーブルを使用した電源供給ができないとのことです。

eMakerを搭載しないケーブルであれば問題なく電源供給できるとのことで、ACアダプタやケーブルを購入する場合は注意が必要そうです。

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

起動したら自動で何かをするRaspberry Piを簡単に作る

 Raspberry Piはマイコンの一つです。
Teach, Learn, and Make with Raspberry Pi – Raspberry Pi
Raspberry Pi – Wikipedia
 マイクロなコンピュータであり、その使い方の一つに何かしらのセンサーを接続してデータを取得する、というものがあります。Raspberry Pi本体のサイズが手のひらサイズでありセンサーを起動したまま、どこかに置く、動かすといったことに苦労しません。せっかく持ち運びが容易なのですからRaspberry Piには単独で完結してもらいたいです。そのため本体だけで動くように、起動したら自動で何かをする様に設定するととても便利になります。
 設定の仕方は次のスライドが詳しいです。
 あなたのお家に眠るラズパイを救出したい – Speaker Deck
 このスライドはRaspberry PiとPCをSSH接続するまでの手順書です。これを読みながら設定を整えれば数分でSSHを繋げられます。スライド中に出てくる無線LAN接続用ファイル生成ページwpa_supplicant.conf作成は気持ち引っかかりやすい部分があります。
 それは次の画像の赤丸で囲った追加ボタンを押して現在作られる予定のファイル情報を更新する部分です。画像の入力欄にはSSID:aaaaとありますが、この状態でファイルを生成してもaaaaにつなげるための設定は作られません。

 これでSSHで接続できるところまで行けました。大体簡素なLinux系のOSが入っています。自動でプログラミングを立ち上げるにはsystemdという仕組みを使います。
systemd – Raspberry Pi Documentation
 好きに実行したいプログラム(例えばセンサーから値を取得してとあるサーバに流すとか)を書いて配置。最後に次の様に記述したhoge.serviceを/etc/systemd/systemに配置。

[Unit]
Description = My service

[Service]
ExecStart=起動したいプログラムの実行コマンド
Restart=always
Type=simple

[Install]
WantedBy=multi-user.target

 配置が完了したらsystemctl enable hoge.serviceとコマンドを実行してサービスを制御に登録.これだけで電源を入れる度にExecStart=以下のコマンドがsimpleにフォアグラウンドで実行されます。もし実行されているコマンドが終了してもalways再起動します。

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