月別アーカイブ 11月 2019

著者:杉浦

【GitHub】目的に合ったスニペットをフレームワークの観点から探す

 GitHubの検索機能には様々なオプションが付いています。その中の一つにCode optionsのIn this pathがあります。これはその名の通りコードファイルが置いてあるファイルパスで絞込検索をするオプションです。
 フレームワークには大なり小なり型にはまった作法があります。よくある作法の種類に、特定の種類のコードを特定のフォルダに配置する、というものがあります。Laravelのコンソールコマンドならばapp/Console/Commands、Composerを使うなら外部ライブラリはvendor、といった具合です。
 Artisanコンソール 6.x Laravel
 この二つを合わせると特定の種類のコードと果たしたい目的の語で検索をすることができます。例えば、次のようなことができます。FuelPHPにはコンソールコマンドoilが用意されています。oilのサブコマンドとして様々なことをコンソール上で行えます。
はじめに – Oil パッケージ – FuelPHP ドキュメント
 oilは便利なのですがルーティングを確認する機能がありません。Laravelのartisan route:listの様にコンソールで一覧を見たいものです。GitHubで次のようにググるとそれを実現したコードが見つかります。

route path:fuel/app/tasks


 このコードらをたどっていくとリポジトリkenjis/fuelphp-tools: Tools for FuelPHP 1.xにたどり着きます。このリポジトリのtaskコードの一つにルーティングをコマンドライン上で表示する機能が入っています(残念ながらmodule以下のルーティング解析は未実装です)。
 このおかげで次の様にroutingの大部分をいい感じに見れるようになりました。

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

【Cordova】「imgcache.js」でキャッシュした画像のパスを取得する方法

以前に紹介した、画像をキャッシュするライブラリ imgcache.js で、キャッシュした画像のURLを取得する方法についてです。
前回の記事を投稿した時点では「WARN: No source given to getCachedFileName INFO: File undefined not in cache」というエラーが発生して画像が取得できなかったのですが、ようやく取得方法がわかりました。

なお、以前の記事はこちら。

【Cordova】アプリで表示する画像を「imgcache.js」を使ってキャッシュする
https://cpoint-lab.co.jp/article/201910/12435/

ライブラリのインストールから、画像をキャッシュに保存するまでの手順を紹介しています。

 

で、方法ですが、.getCachedFileURL() メソッドを使いました。
こちらは、キャッシュした画像の URL を取得できます。
サンプルコードはこちら。

ImgCache.isCached([キャッシュしたい画像のURL], function(path, success) {
  if (success) {
    ImgCache.getCachedFileURL(path, function(originalUrl, cacheUrl) {
      // 任意の処理を実行
      // cacheUrl にキャッシュした画像のURLが代入されている
    }, function(error) {
      console.log(error);
    });
  } else {
    ImgCache.cacheFile(path, function () {
      ImgCache.getCachedFileURL(path, function(originalUrl, cacheUrl) {
        // 任意の処理を実行
        // cacheUrl にキャッシュした画像のURLが代入されている
      }, function(error) {
        console.log(error);
      });
    });
  }
});

まず 1行目で、画像がキャッシュ済みかを調べます。
結果は success に格納され、キャッシュ済みだったら、3行目で画像のパスを取得しています。
コメントにも記載している通り、cacheUrl にキャッシュした画像のパスが保存されているので、そちらを使って任意の処理を実行してください。
なお、pathoriginalUrl には、キャッシュされる前のオリジナルのURLが格納されています。
指定した画像がまだキャッシュされていなかった場合は、10行目で画像をキャッシュし、11行目でキャッシュした画像の URL を取得しています。
処理としては以上です!

私の環境では .useCachedFile() メソッドが動作しなかったのと、キャッシュされた画像の URL を取得できた方が処理的にも便利だったので、 .getCachedFileURL() を使いました。

 

また、前回の記事で「node_modules > imgcache ディレクトリ内にある imgcache.js を任意の場所にコピーし、それをインポートします。」と書きましたが、よくよく確認したところ、node_modules 内の imgcache ライブラリのディレクトリの名前が imgcache.js になっていました。
こちらを imgcache に変更し、import ImgCache from 'imgcache'; と指定したところ、問題なくインポートできましたので、ご参考いただければと思います。
ディレクトリ名に拡張子が入ってしまっていたせいで、正常に読み込めなかったんですね…。

 

以上、imgcache.js を使ってキャッシュした画像の URL を取得する方法でした。
ご参考になれば幸いです。

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

AccessからDBにアクセスできなくなった場合の対処法

先日配信されたWindows Updateによって、AccessからODBCを経由したDBへの接続ができなくなってしまっているようです。

Access で、”クエリが破損しています” というエラー が表示される – パソコンのツボ ~Office のTIP

今回原因といわれているWindows UpdateのIDは下記のとおりです。

  • Office 2016 を使用している場合
    • KB4484113
    • KB4484148
  • Office 2013 を使用している場合
    • KB4484119
    • KB4484152
  • Office 2010 を使用している場合
    • KB4484127
    • KB4484160

Microsoftのサイトの記事によると、すでに修正版パッチはできているようですが、リリースは2019/12/10になってしまうようです。(なぜ一カ月後…)

それまでの間Accessが動かない状態で放置…というのは無理な場合も多いと思います。 一時的な 回避策として、下記の作業を行うことでAccessが使える状態に戻すことができます。

まずは問題を引き起こしている更新をアンインストールします。

Windowsの設定アプリから項目”アプリ” を開きます。

アプリの画面が表示されたら、”アプリと機能”内(右側もしくは最下部)にある”プログラムと機能”をクリックします。

開いたコントロールパネル内の”インストールされた更新プログラムを表示”をクリックします。

検索欄から対象となる更新プログラムを検索します。

見つかった対象の更新プログラムをひとつづつ選択し、”アンインストール”をクリックします。(※Accessを開いていた場合は終了させられる場合があるので、先にAccessを終了させてください。)

以降画面に従ってアンインストールを完了させます。

これを対象の更新をすべてアンインストールするまで続けます。

この時点で再びAccessからDBへ接続できるようになっているかと思いますが、このままにしておくと再び同じ更新が自動でインストールされてしまい、不具合が再発するため、問題の更新そのものを無効化して再発を防ぎます。

まず、 MicrosoftのWebページから、Windows Update更新除外ツールを入手します。

赤線で囲ったところから入手できます。

次に、ダウンロードしてきた wushowhide.diagcab を起動します。

するとトラブルシューティングの画面が起動します。

次へをクリックします。

Windows Updateのスキャンが始まるので待ちます。

“更新を隠す”と”隠した更新を表示する”の2項目が表示されます。上の”Hide updates(更新を隠す)”をクリックします。

まだ適用されていない更新の一覧が表示されるので、中から先程アンインストールした更新にすべてチェックを入れます。

チェックしたら”次へ”をクリックします。

更新の除外が行われます。完了するまで待ちます。

以上で問題の更新は自動でインストールされなくなります。

なお、先程書いた通り2019/12/10に今回の更新の修正版がリリースされる予定になっていますので、12/10を過ぎたら下記の手順で今回除外した更新を再度表示させて、インストールを実行する必要があります。

今回問題が起きたのがセキュリティに関するアップデートのため、更新をインストールせずに放置するとセキュリティ上の脆弱性に繋がる場合がありますので注意してください。

非表示にした更新は、次の手順で再表示できます。

先程の手順で入手した” wushowhide.diagcab”を再度起動します。

トラブルシューティングが起動します。”次へ”をクリックします。

Windows Updateのスキャンが始まるので待ちます。

再び “更新を隠す”と”隠した更新を表示する”の2項目が表示されます。今度は下の”Show hidden updates(隠した更新を表示する)”をクリックします。

現在隠しているアップデートの一覧が表示されます。対象のアップデートにチェックを入れて、”次へ”をクリックします。

以降は画面の指示に従って操作を行えば再表示化は完了です。

あとは通常通りWindows Updateを実行します。

しかし…今まで使えていたものが突然使えなくなるのは焦りますよね。

原因を調べて公開してくれる方がいなかったら、きっとパニックになっていたことでしょう…(;´∀`)

参考URL:

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

【next.js】next.jsの環境構築方法

今回はreactのレンダリングを高速化してくれるというフレームワーク、next.js

についてです。

 

reactでは、通常ではscriptはクライアント側で読み込むのですが、

これが大規模になってくるとクライアント側だけでは処理が重く

パフォーマンスに悪影響が出てしまいます。

 

そんな中開発されたnext.jsは、reactのscriptをサーバーサイドで読み込むことができるため

レンダリングでの早いレスポンスを期待することができます。

今回はそのnext.jsの開発環境の構築方法を記載します。

(結構簡単でした。)

 

構築方法

①まずcreate-react-app sampleでreactを作ります。

②cd sampleで移動

③npm i nextでインストールをします。npmのバージョンは

6.13.0でした。

④npm iで再度インストールをします。

まず、sampleフォルダの中のpackage.jsonを開いて

コマンドが打てるようにスクリプト群の一番下に”dev” : “next”を追加します。

 

</pre>
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"dev": "next"
},
<pre>

⑤最後にnpm run devをしてttp://localhost:3000/でローカル

サーバーにアクセスをします。

画面のような文字が表示されたら環境構築成功になります。

 

以上でnext.jsの環境構築は終了です。

ちょっとしか書いていないので使用感は分かりませんが、

使いにくいという印象はなかったです。

reactを使ったことのある方はそこまで苦労しなそう・・・。

 

ただ、一つ感じたのが、reactでのcssの書き方で保存をしていると

cannot resolveになってしまうので、もう完成してしまったアプリを

next.jsに合わせて書き直すのは骨が折れそうだなと思いました。

 

また、npm i とuninstallを繰り返していてもwebpackでライブラリが欠落したり

してしまうのでそちらの考慮しないと書き直しは怖くてできないです。

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

Roundcube 1.4 のスキンはレスポンシブでスマホ対応

2019/11/9 にリリースされた 1.4.0 で、ようやく対応です。標準で搭載されるスキンで、スマートフォンに対応しました。

今までは、別で有償のスキンを購入する必要がありましたが、これで無償でレスポンシブなスキンが利用できます。

・Email Resent (Bounce) feature
・ Improved Mailvelope integration
・ Support for Redis and Memcached cache
・ Support for SMTPUTF8 and GSSAPI

https://roundcube.net/news/2019/11/09/roundcube-1.4.0-released

Elastic というスキンが新たに加わっているので、それを選択するだけ。

すでに RC (release candiate) 版で触っていましたので、感じはわかっていましたが正式リリースが出たので入れ替えました。いいかんじ。

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

新型MacBook Proでシザーキーボードが復権するらしい

新しいMacBook Proが発表されたようです。

16インチMacBook Pro – Apple

Apple、16インチの新型MacBook Proを発表。Escキー復活! そして、さらばバタフライキーボード – Gizmodo

このMacの特徴として、上記のGizmodoさんの記事にもあるようにキーボードが今までAppleが推していた”バタフライキーボード”から、従来型の”シザーキーボード”に変更されている点です。

ただし、ただシザーキーボードを復権させるだけでなく、ちゃんと改良も施しているということで、そこはAppleらしいこだわりを感じさせます。

またTouch BarからEscキーが分離されたり、十字キーのデザインも見直されたりされているとのことで、”天板の林檎マークが光らなくなったMac”に変更されて以来の大幅な見直しとなりそうです。

僕はMacBook Air Late 2015 11インチを使用していて、まだ旧シザーキーボードが搭載されていたのですが、キーストロークがちゃんとあり、しっかりとした打鍵感もあってノートPCとしてはとても使いやすく気に入っていました。一方、それ以降に発売されたMacBookのバタフライキーボードは打鍵感が少なく、キーストロークも浅かったため個人的には使いづらいという印象でした。

個人的にはノートPCでキーボードが使いづらいのは致命的な欠点なので、”MacBook買うのはこれで最初で最後かなぁ、とすら思っていました。

今回シザーキーボードのMacBook Proが発表されたので、 今後ほかのMacBookにもシザーキーボードが採用されたものが出てくるかもしれません。

もし買い替えが必要になった時にMacBook Airにもシザーキーボードが採用された機種が出ていたら、是非購入したいですね。

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

【Swift】UITextField入力後にキーボードのリターンキーで次のUITextFieldに移動する

実装しとくと便利かな?な機能その1。
今回は、TextField にテキストなどを入力後、ソフトウェアキーボードのリターンキーで次の TextField に移動する方法です。
ログインや会員登録などのフォーム画面に実装されていることが多いと思います。

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

UITextFieldのキーボード操作で使えるTips – Goalist Developers Blog
http://developers.goalist.co.jp/entry/2017/03/16/190535

 

サンプルコードはこちら。
なお、今回 Storyboard は使用せず、全てコードのみで実装しています。

まずは、テキスト入力欄を作成します。
今回は、ログインフォームをイメージして、名前とパスワードの入力欄を追加しました。

// 名前の入力欄を作成
var name: UITextField = UITextField(frame: CGRect(x: 0, y: 0, width: 200, height: 40))
name.delegate = self
name.layer.position = CGPoint(x: self.view.bounds.width/2, y: 200)
name.returnKeyType = .next
name.tag = 0
self.view.addSubview(name)

// パスワードの入力欄を作成
var password: UITextField = UITextField(frame: CGRect(x: 0, y: 0, width: 200, height: 40))
password.delegate = self
password.layer.position = CGPoint(x: self.view.bounds.width/2, y: 300)
password.isSecureTextEntry = true
password.returnKeyType = .Done
password.tag = 1
self.view.addSubview(password)

ポイントは、4行目と12行目の .returnKeyType と、5行目と13行目の .tag です。
まず、.returnKeyType でソフトウェアキーボードのリターンキーを「Next」と「Done」の文字に変更しています。

次に、.tag で それぞれの UITextField のタグを指定しています。
なお .tag には数値しか指定できないのでご注意ください。

次に、リターンキーを押した時の処理を追加します。

// リターンキーを押した時の処理
func textFieldShouldReturn(_ textField: UITextField) -> Bool {
    switch textField.tag {
    case 0:
        // タグが 0 なら password にフォーカスを当てる
        password.becomeFirstResponder()
        break
    case 1:
        // タグが 1 ならキーボードを閉じる
        password.resignFirstResponder()
        break
    default:
        break
    }
    return true
}

コメントに書いてある通りですが、UITextField のタグが 0、つまり名前入力欄だったら、リターンキーを押した時にパスワード入力欄にフォーカスを当てます。
次に、UITextField のタグが 1、つまりパスワード入力欄だったら、ソフトウェアキーボードを閉じます。

実装するコードは以上です。

 

以上、UITextField にテキストを入力した後、キーボードのリターンキーで次の UITextField に移動する方法でした。

なお、これらの処理を簡単に実装できる FormChangeable というライブラリもありましたが、私の環境ではエラーが発生してしまったので、今回は採用しませんでした。
個人的な感覚では、ライブラリを使わなくてもそこまで複雑な処理ではないので、自前で実装でも問題ないと思います。

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

PlantUMLの機能が思ったより多彩

 PlantUMLはUML図を表現できる言語です。言語故にテキストファイルであり、変更やGit管理が楽で便利です。
 PlantUMLを書いていると、あまりに図が複雑になるため複数ファイルに記述を分けたい時があります。そういった時、何度も同じ意味で同じ名前を宣言する記述が重複しがちです。そういった問題はinclude機能で定義ファイルの読み込みのみを記述することで解決できます。
 Use the preprocessorのIncluding files or URL

// define.puml
@startuml
participant "ブラウザ" as br
participant "サーバ" as svr
@enduml

// child.puml
@startuml
!include define.puml
br-->svr: ページ要求
@enduml

// child2.puml
@startuml
!include define.puml
br<--svr: ページレスポンス
@enduml


 こうすると、あるファイルだけ違う変数名で同じものを指している、という混乱やコピペコードを防げます。
 デフォルトのPlantUMLでER図を書いている時、定義の記述を一行にきれいなデザインでまとめることにくたびれます。デフォルトで等幅フォントを採用しておらず、空白を使って縦を合わせるのがめちゃくちゃしんどいです。等幅フォントを使うように宣言しましょう。
 Which fonts are available ?

@startuml
skinparam {
  defaultFontName Monospaced
}

entity users {
  # id                  int(11) unsigned auto_increment
    name                varchar(255)         not null,
    login_id            varchar(50)          not null,
    password            varchar(255)         not null,
    password_changed_at datetime             not null,
    email               varchar(255)         not null,
    last_login          varchar(25)          not null,
    login_failed        tinyint              not null,
    locked              tinyint              not null,
    locked_at           int                  not null,
    status              tinyint    default 0 not null,
    login_hash          varchar(255)         not null,
    created_at          int        default 0 not null,
    updated_at          int        default 0 not null,
    deleted             tinyint(1) default 0 not null,
}

@enduml


 ここでは特に使うと確信した二例を紹介しましたが、公式の前処理、共通事項をはじめとしたUMLから離れた欄を隅まで見ていくと思わず教えて欲しかったとなる便利機能がわいてきます。
 シンプルなテキストファイルで UML が書ける、オープンソースのツール

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

【npm】packeage.jsonの手動で弄った時に気を付けること

npmのパッケージやコマンドを新しく追加したい時にpackage.jsonを

よくいじると思います。ところが、jsファイルと違って誤字に寛容でないので

少しのタイポも見逃してくれない厳しい仕様となっています。

例えば、このエラー↓

 


npm ERR! code EJSONPARSE
npm ERR! file C:\Users\swift0910\Documents\tutorial\package.json
npm ERR! JSON.parse Failed to parse json
npm ERR! JSON.parse Unexpected token } in JSON at position 2367 while parsing near '....js --env=jsdom",
npm ERR! JSON.parse },
npm ERR! JSON.parse "jest": {
npm ERR! JSON.parse "...'
npm ERR! JSON.parse Failed to parse package.json data.
npm ERR! JSON.parse package.json must be actual JSON, not just JavaScript.

 

よく見ると、4行目でUnexpected tokenでカッコの前後に不適切な文字列が

混入しているよ~って言われています。

 

で、package.jsonを見ると、

 


"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom",
},

 

4行目の最後で「,」を打っているのが分かります。これは、新しい

コマンドを試したときに”test”: “node scripts/test.js –env=jsdom”の後ろの

「,」を消し忘れていたのが原因ということになります。

これを消して保存することで無事ビルドさせることができました。

以上でpackage.jsonのエラーは解決となります。タイピングミス気を付けましょうネ!

 

 

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

Pixel 3aをAndroid 10にしてみた

以前Android 10リリース直後にエミュレータを使用したレビュー記事を書きましたが、先日手元のPixel 3aもAndroid 10にアップグレードしてみました。

今回は、エミュレータでは気づかなかった変更点を中心に取り上げたいと思います。

・通知バーの上部に電池が切れるまでの推定時間が表示されるようになった

いままでは残量の%しが表示されていませんでしたが、Android10 からは通知領域を広げた際に電池が使用できる時間を推定し表示してくれるようになりました。

お出かけ中に充電スポットを探す目安になるかもしれませんね。

・ナビゲーションバーの変更は実端末でも可能になったが”ジェスチャ”は対応ホームアプリを利用中のみ対応

Android 10から利用できるようになったナビゲーションボタンの変更機能ですが、実機のPixel 3aでも利用可能でした。

ただし、対応しているホームアプリを利用していない場合は戻るボタンの無い”ジェスチャ”は選択できません。

僕の場合はMicrosoft Launcherを使用していますが、現時点ではジェスチャナビゲーションは選択できないようです。

なお、3ボタンなびげージョンは問題なく利用できました。

・電話録音アプリが動作不能に

電話での聞き落しなどを防ぐために通話録音アプリ”ACR”を使用していたのですが、Android 10にアップグレードしたところ、一切音声が入らなくなってしまいました。

Google本社のある米国では通話の録音が禁止されている、という話もあるようなのですが、日本仕様のPixel 3aでも同様の制限が入っているのは少し納得がいきません。

自己防衛のために通話録音が必要な場合もあるので、個人的にはこの方針は考え直してほしいところですね…

現在Android 9 を使用中の方はご注意ください。

・CPU使用率にスパイク(瞬間的な使用率上昇)が頻発する

CPU使用率をモニタするアプリで端末の負荷を監視しているのですが、(僕の端末だけの症状の可能性もありますが)数秒に一回CPU使用率が100%になる現象が続いています。

もしかするとOSアップグレード直後でバックグラウンドで何かが動いているのかもしれませんが、キャッシュを削除しても、何度再起動しても改善しないのでちょっと気になります。

ただ、いまのところ動作自体が重くなったりといった症状はないので、とりあえずは無視します。

他にもロック画面にロック状態を示すカギアイコンが上部に大きく表示されるなど、Pixel 4を意識した変更もところどころ見かけられました。

個人的にはナビゲーションボタンが自分の好きなものに変更できるようになったのが一番大きな変更点かなと思います。

また一段と改良されたAndroidを楽しみたいPixel 3aユーザーの皆さんは是非アップグレードしてみてはいかがでしょうか。

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