著者:村上
【JavaScript】画像をBase64に変換するパッケージ「base64-img」
canvas を使う方法もあるようですが、パッケージを使った方が簡単そうだったので、試しに導入してみました。
画像ファイルを Base64 に変換する方法です。
今回使用したパッケージはこちらの「base64-img」です。
GitHub – douzi8/base64-img: convert img to base64, or convert base64 to img
https://github.com/douzi8/base64-img
画像を Base64 に変換できますし、その逆の Base64 を画像に変換することもできます。
さて、導入方法ですが、まずはパッケージをインストールします。
npm install base64-img --save
そうしたら、パッケージを require します。
const base64Img = require('base64-img');
あとは、実行したい関数を記述すればOKです。
私は画像を Base64 に変換したかったので、下記の関数を使用しました。
base64Img.base64('[変換したい画像パス]', function(err, data) {
// 行いたい処理
});
正常に処理が完了すれば、変数 data に変換後のデータが格納されるはずです。
が、私の環境では、下記のようなエラーが発生してしまいました。
Uncaught TypeError: a.readFile is not a function.
「a.readFile は関数ではありません」とのことですが…これってどこのことを指しているの？
現在、絶賛調査中です。
コードもとても単純になるので、出来ればこのパッケージを使えるようにしたいですね。
以上、画像をBase64に変換するためのパッケージ「base64-img」についての紹介でした。
なお、パッケージを使わずに、JavaScript で書きたい場合は、こちらの記事が参考になります。
[JavaScript] 画像変換：
要素 ⇔ Base64（相互変換） – Qiita
https://qiita.com/yasumodev/items/e1708f01ff87692185cd
著者:村上
【Cordova】画像をトリミングできるプラグイン「cordova-plugin-crop」
今回は、画像加工のための Cordova プラグインについてご紹介。
画像のトリミングができる「cordova-plugin-crop」というプラグインです。
私はアルバムやカメラで撮影した写真を正方形に切り抜きたかったので、今回導入してみました。
導入にあたって、参考にさせていただいた記事はこちら。
Cordova – カメラを使用してクリックするか画像を選択した後、画像をトリミングします。|cordova tutorial
https://riptutorial.com/ja/cordova/example/23783/カメラを使用してクリックするか画像を選択した後-画像をトリミングします-
GitHub のページはこちらから。
GitHub – jeduan/cordova-plugin-crop: Crop an image in Cordova
https://github.com/jeduan/cordova-plugin-crop
導入方法は、まずプラグインを下記コマンドでインストールします。
cordova plugin add --save cordova-plugin-crop
その後、下記のコードを画像トリミングをしたいタイミングで実行します。
plugins.crop(function success () {
// トリミング成功時の処理
}, function fail () {
// トリミング失敗時の処理
}, '[トリミングしたい画像パス]', { quality: 100 });
{ quality: 100 } はトリミングする際のオプションで、下記の3つがあります。
- quality：画像の品質（Default：100）
- targetWidth：トリミング後の画像の幅（Default：-1）
- targetHeight：トリミング後の画像の高さ（Default：-1）
上で紹介した参考サイトでは、カメラプラグインと組み合わせて、撮影した写真を正方形にトリミングしていました。
そのコードはこちら。
一部オプションの値を修正したり、カメラ撮影をアルバムからの写真選択に変更したりしています。
navigator.camera.getPicture(onSuccess, onFail, {
sourceType: window.navigator.camera.PictureSourceType.PHOTOLIBRARY,
quality: 100,
destinationType: Camera.DestinationType.FILE_URI,
saveToPhotoAlbum: true,
encodingType: window.navigator.camera.EncodingType.PNG,
});
function onSuccess(imageData) {
plugins.crop(function success (data) {
var image = document.getElementById('[撮影した写真を表示するimgタグのID]');
image.src = data;
},
function fail () {
// トリミング失敗時の処理
}, imageData, {quality: 100, targetWidth: 200, targetHeight: 200});
}
function onFail(message) {
// 写真撮影失敗時の処理
}
上記を実行したところ、写真選択後、トリミングの処理が実行されました！
が、写真選択からトリミング処理の画面が表示されるまでに少し時間がかかります。
このままだと少々ストレスになるので、ローディング画像を表示したり、そもそも起動を早められないか、調べてみたいと思います。
以上、画像のトリミングを行えるプラグイン「cordova-plugin-crop」についての紹介でした。
導入はとても簡単なので、是非ご活用ください。
著者:村上
【Swift】KVO（Key-Value Observing）を触ってみた
昔他の人が開発したiOSアプリを修正していたのですが、現行の環境で実行したところエラーが発生しました。
で、エラー発生個所が KVO の処理のところだったので、修正もかねてちょっと触ってみました。
ちなみに、エラー修正前のアプリは、実行した直後に落ちました。
KVO について参考にさせていただいた記事はこちら。
Swift4のKVOに感動した。 – Qiita
https://qiita.com/ObuchiYuki/items/d00ce5f44725672184da
なお、KVO とは、オブジェクトの値の変更の監視をしてくれる Swift の機能です。
コードの修正ですが、下記の場所を修正しました。
func observeValueForKeyPath(keyPath: String?, ofObject object: AnyObject?, change: [String : AnyObject]?, context: UnsafeMutableRawPointer) {
// 実行したい処理
}
こちらは、監視しているオブジェクトの値が変更されたら呼び出される関数なのですが、override しているわけではなかったので、これが怪しいのでは…？と思ったんですよね。
実際、KVO の処理をまるっとコメントアウトしてみたら、アプリは落ちることもなく動作したので、怪しいのはこのあたりのはず。
で、こちらを下記のように書き直しました。
override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
// 実行したい処理
}
念のため、Xcode の関数補完機能を使ったので、問題はないはず。
若干、ここ以外にもコードの修正は必要でしたが、こちらを修正したところ、アプリが落ちることなく、問題なく実行できました。
とりあえず動くようにはなったので、今後は、時間があれば実際にここの処理が具体的に何をしているのかをみてみたいと思います。
以上、Swift の KVO 機能を修正してみた、でした。
参考になれば嬉しいです。
著者:村上
【CSS】Android、iOSでリンクをタップしたときのハイライトを無効にする方法
上司に教えてもらった方法なので、忘れないように、参考リンクもあわせてまとめ。
Android や iOS でページのリンクをタップした際に表示される、グレーのハイライトを無効にする方法です。
私の場合、react-tabs をアプリに導入したところ、iOS でページ遷移時に画面のほぼ全面が一瞬グレーがかったようになり、非常に見辛い状況でした。
それの対処法として、タブパネルにかかっていたリンクのハイライトを無効にしました。
教えてもらったリンクがこちら。
iOS や Android でリンクをタップした時に灰色の背景色が付くのをなくす CSS – Corredor
http://neos21.hatenablog.com/entry/2017/10/18/080000
実装方法ですが、まったく複雑なことはなく、ハイライト無効にしたい項目に下記のプロパティを追加するだけです。
a {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
上記を追加すると、原則全てのテキストリンクのハイライトが無効になります。
なお、iOS のみの機能ですが、ハイライトの色や透明度を指定することができるようです。
Android は無効化することしかできません。
a {
/* 透明度50%の緑 */
-webkit-tap-highlight-color: rgba(0, 255, 0, 0.5);
/* 紫色 */
-webkit-tap-highlight-color: #ff00ff;
}
指定するときは、上記のように指定します。
以上、リンクをタップしたときのハイライトを無効にする方法でした。
ただ、ハイライトがないと、リンクを押せたかどうかがわからないため、個人的にはあったほうがいいのでは…とも思います。
実際に使用してみて、導入するかを決めることをお勧めします。
私のように、変な場所にハイライトがかかっており、使っている時にストレスを感じる！使用感が悪い！という時には非常に有効だと思います。
著者:村上
【JavaScript】シンプルな数値のゼロ埋めの処理の書き方
個人的にとても綺麗な書き方だと思ったので、ご紹介したくまとめました。
例えば年月日を、2019/3/22 ではなく、2019/03/22 としたい時があるかと思います。
要は、月や日が一桁の場合は頭に 0 をつけ、二桁だった場合はそのまま表示する場合です。
今回参考に…というか、まるっとご紹介させていただきたい記事はこちら。
JavaScriptでゼロ埋め処理 – Qiita
https://qiita.com/cress_cc/items/3e820fe1695f13793df3
この方も冒頭で紹介していましたが、私も今までは、for 文で一月・一日ずつチェックし、10 未満だったら 0 を付けるという処理を行っていました。
が、いかんせん面倒くさい…。
月だけならともかく、日も同じ処理を行うとなると、2つの値をチェックする必要があります。
が、紹介されていた書き方を使えばこんなにスタイリッシュになります。
// 今日の日付を取得
let today = new Date();
// 月、日をそれぞれゼロ埋め
let year = today.getFullYear();
let month = ('0' + (today.getMonth()+1)).slice(-2);
let day = ('0' + today.getDate()).slice(-2);
// ログで確認
// 2019年3月22日の場合、2019/03/22 となります
console.log(year + '/' + month + '/' + day);
ポイントは、.slice() で、マイナス値を指定している点です。
slice メソッドに負の値が指定された場合、最後尾から文字列を取得できます。
今回は、-2 を指定しているので、最後尾から 2桁を取得しています。
そのため、一桁の月・日の場合は、頭に 0 が付いた文字列が変数に代入され、2桁の場合は一番上の桁である0は取得されず、そのままの値が代入されます。
for 文をぐるぐる回すより、はるかに綺麗な書き方ですね！
もっと早くに知りたかったし、もっと早くにこの書き方を思いつきたかった…！
以上、JavaScript で数値のゼロ埋め処理を行う方法についてでした。
私自身、とても助かった書き方なので、是非ご参考にしていただければと思います。
著者:村上
【Cordova】ソフトウェアキーボードを制御するためのプラグイン「cordova-plugin-keyboard」
現在開発中のCordovaアプリで、iOS のソフトウェアキーボードを制御したくて導入したプラグイン「cordova-plugin-keyboard」についてのご紹介です。
開発中のアプリには、LINE のトーク画面のように入力欄が画面下にぴったり張り付いているようなレイアウトになっているのですが、文字を入力するとき、キーボードのサイズが若干変わったタイミングで、入力欄がキーボードの裏に隠れてしまう不具合が発生しました。
それの対処法として、今回紹介するプラグインを使いました。
なお、この現象が発生するのは iOS のみで、どうやら OS のバグが原因のようでした。
Android だと、全く問題なかったので、気づくのに遅れてしまいました…。
さて、では対処法ですが、まず導入したプラグインの GitHub はこちらから。
GitHub – cjpearson/cordova-plugin-keyboard: Keyboard Plugin for Cordova
https://github.com/cjpearson/cordova-plugin-keyboard
他にも、cordova-plugin-ionic-keyboard というよく似たプラグインもありましたが、私の実現したいことにはそぐわなかったので、こちらは使用しませんでした。
インストールは、下記のコマンドを実行してください。
cordova plugin add cordova-plugin-keyboard --save
インストールが終わったら、任意のメソッドを導入します。
私は下記の2つのメソッドを使いました。
- cordova.plugins.Keyboard.shrinkView
- cordova.plugins.Keyboard.disableScrollingInShrinkView
1つ目のメソッドは、キーボードが表示されたときに、WebView のサイズを縮小するかどうかを指定できます。
指定する方法は下記の通りです。
cordova.plugins.Keyboard.shrinkView(true);
true を指定すると、キーボード出現時に WebView のサイズが縮み、スクロール可能になります。
false だと、キーボードが表示されても WebView のサイズは変わりません。
というか、iOS の場合、こうして指定しないと、キーボードが表示されても WebView のサイズは変わらないんですね…。
それなら、レイアウトが崩れたのも納得です。
次に、キーボードが表示されている間、スクロールを許可するかどうかを指定できるメソッドです。
cordova.plugins.Keyboard.disableScrollingInShrinkView(true);
スクロールを無効にするためには、true を指定します。
本当は、スクロールを有効にしたかったのですが、たまにレイアウトが崩れて謎の余白が発生したりするので、しぶしぶスクロールを禁止にしました。
レイアウト崩れがなんとかなりそうだったら、スクロール許可しようと思います。
なお、このメソッドは iOS しかサポートされていませんので、ご注意ください。
…でも、そもそも Android だと、これを使う必要もないので、これがあってもなくても特になんの影響もないんですけどね。
また、私の環境では、上記で紹介した書き方ではエラーが発生したので、下記のように書き直しました。
// 上記の記述でエラーが発生した場合、下記の記述に変更 window.Keyboard.shrinkView(true); window.Keyboard.disableScrollingInShrinkView(true);
この対応が正しいのかはわからないのですが、問題なく期待する動作をしたので、これでOKだと思います。
私が使ったメソッドはこの2つですが、他にも、キーボードが表示されているか検知できるプロパティや、キーボードが表示/非表示になったときに実行されるイベントもあります。
イベントには、キーボードが表示/非表示になる前に発火するものもあるので、状況に応じて使い分けてください。
以上、ソフトウェアキーボードを制御するためのプラグイン「cordova-plugin-keyboard」のご紹介でした。
Cordovaアプリ開発中に、iOS のソフトウェアキーボードに悩まされた方は、是非ご参考にしていただければと思います。
著者:村上
【React】テキスト要素にフォーカスが当たった/外れたときに特定の処理を実行する方法
今後も使いそうな処理なので、備忘録としてまとめ。
React で、テキスト要素にフォーカスが当たった、もしくはフォーカスが外れた事を検知し、そのときに特定の処理を実行する方法です。
なお、タイトルには React とありますが、JavaScript でも使用できます。
今回参考にさせていただいた記事はこちら。
[JavaScript] フォーカス・アウト イベントを取得する（onBlur） – コピペで使える JavaScript逆引きリファレンス
https://javascript.programmer-reference.com/js-event-onblur/
さて、早速コードはこちら。
必要なところだけ抜粋してます。
onFocusFunc() {
// フォーカスが当たったときの処理
}
onBlurFunc() {
// フォーカスが外れたときの処理
}
render() {
return (
<input type='text' onFocus={() => this.onFocusFunc()} onBlur={() => this.onBlurFunc()} />
);
}
コードといってもこれだけです。
あとは各関数に、フォーカスが当たった時/外れたときの処理を記述してください。
なお、onFocus と onBlur は、全て小文字ではなく、キャメルケースになっているのでお気をつけください。
素の HTML だと全て小文字なので、うっかり間違えそうです。
処理としては全く複雑なことはしていないのですが、フォーカスが外れたときに発火する onBlur を忘れそうだったので、まとめました。
onFocus はそのままの名前なのでわかりやすいのですが、onBlur って少し覚えにくい…。
なお、blur は「ぼかし」という意味があるようです。…ますますわかりにくい気がするのは私だけでしょうか…。
とにかく、忘れないように気をつけます。
以上、React でテキスト要素にフォーカスが当たった/外れたときに特定の処理を実行する方法でした。
著者:村上
【CSS】「word-break」を使った文字列の改行ができない時の対処法
ちょこっとだけハマったので備忘録としてまとめ。
word-break プロパティを使った文字列の改行ができなかった時の確認事項です。
今回参考にさせていただいた記事はこちら。
CSS tips – 文字列を確実に改行させる方法｜phiary
http://phiary.me/css-tips-certainly-line-break/
まず、基本的には下記を指定します。
p {
word-break: break-all;
}
break-all という値の場合、英単語の途中だろうが問答無用で改行されます。
それが嫌な場合は、normal もしくは keep-all を指定してください。
また、white-space プロパティに nowrap が指定されている場合、改行されなくなるとのことですので、下記のように指定します。
p {
word-break: break-all;
white-space: normal;
}
[/css]
ちなみに、white-space: nowrap; とは、文字列内のホワイトスペースを無視し、改行を1つの半角スペースとして表示します。
また、ボックスサイズが指定されている場合にも自動改行しないため、こちらを無効にする必要があります。
あとは、width が効かない inline 要素では、word-break による改行が行われないので、デザインに影響がなければ、display:block; を指定しましょう。
ちなみに、私の環境で文字列の改行が行われなかったのも、こちらが問題でした。
width が定義されておらず、横幅が想定以上に伸びてしまい、表示されない変な位置で改行をしていたようです。
そのため、width: 100%; を指定したところ、理想通りの表示になりました。
以上、word-break を使った文字列の改行ができなかった時の対処法でした。
正しくは、要素のサイズが正しくなかったのが原因ですが…とりあえず、レイアウトは調整できました。
著者:村上
【Mac】ゲストユーザでのログインを有効にする方法
MacBook Pro を一台持っているのですが、今まで自分が使用するのみだったので、今までゲストログインを特に設定していませんでした。
が、妹が使うかもしれないタイミングがあり、設定方法について調べたのでまとめ。
なお、結論から言うと、妹は特に Mac を使わなかったようです。
…設定しなくても良かったかも。
設定方法については、こちらを参考にさせていただきました。
Mac – ゲストユーザのログインを有効に（入に） – PC設定のカルマ
https://pc-karuma.net/mac-enable-guest-user-account/
まず、「システム環境設定」を開き、「ユーザとグループ」を開きます。
そうしたら、左下の鍵アイコンをクリックし、ロックを解除します。
なお、解除にはパスワードが必要です。
ロックを解除すると、左サイドメニューのグレーアウトしていた「その他のユーザ」の「ゲストユーザ」の項目が選択できるようになるので、そちらをクリックします。
あとは、「ゲストにこのコンピュータへのログインを許可」という項目にチェックをいれます。
ペアレンタルコントロールや、共有フォルダへの接続許可などは、任意で設定してください。
ゲストユーザでのログイン許可は以上で完了です。
ですが、説明文にも書いてある通り、「FileVault」が有効になっている場合は、ゲストユーザは Safari しか使えません。
これは不便なので、FileVault を無効にしてみます。
FileVault についての説明は、下記の Apple サポートのページをご参照ください。
FileVault を使って Mac の起動ディスクを暗号化する – Appleサポート
https://support.apple.com/ja-jp/HT204837
FileVault を無効にする方法は、同じくシステム環境設定から、セキュリティとプライバシーを開きます。
メニューバーに、FileVault の項目があるので、こちらをOFFにすればOKです。
以上、Mac でゲストユーザでのログインを有効にする方法でした。
作業自体は難しくもなく、手間取ったりもしなかったのですが…個人的にはログイン画面が少し気になる…。
スクリーンショットはないのですが、やけにアイコンが大きいんですよね。
ここの調整はできるのでしょうか…？
時間があるときにでも、少し調べてみたいと思います。
著者:村上
【テキストエディタ】Sublime Text 3がGitの統合に対応
更新は 3月13日にあったので、若干遅いですが、Sublime Text の更新内容について。
今回の更新で Git の統合に対応したようで、個人的にはかなり使いやすくなりました。
公式のリリースノートはこちらから確認できます。
私がピックアップした更新点は 2つ。
まず一つ目は、現在の Git ブランチについての情報が下のステータスバーに表示されるようになりました。
ブランチ名は伏せましたが、上記の画像のように表示されています。
右横にある数字は、未コミットのファイル数です。
作業中、今いるのが develop なのか、また別のブランチにいるのか分からなくなることがたまにあったので、これがあれば一目でわかって良いですね！
他にも、ファイルの変更した行にマーカーが付くようになりました。
上記は改行を追加したときの見え方です。
行を追加した場合は緑のマーカーで、既存の行を変更した場合は黄色のマーカーが表示されます。
また、行を削除した場合は赤い三角形で、消された行を指示してくれます。
これも便利ですね。
ただ、黄色と緑が結構似ている色なので、ぱっと見で見分けるのが若干難しいかもしれません。
慣れれば大丈夫かな？
以上、Sublime Text の更新についてでした。
もちろん他にも修正点はまだありますが、個人的にいいと思ったものだけをピックアップさせていただきました。