著者アーカイブ 村上

村上 著者:村上

【便利サイト】PNGやJPG画像を綺麗に圧縮してくれる「TinyPNG」

画像を圧縮したい、けど画質が粗くなるのはNG!というときにおすすめしたいサイトが、今回紹介する「TinyPNG」です。
Webサイトを作成する際、画像のサイズを小さくすることが重要になってきますが、このサイトを使えば、画像を圧縮しつつ、画質をほぼそのまま維持することができます。
ちなみに、私には圧縮前と圧縮後の写真の違いが全く分かりません。

TinyPNGへのリンクはこちら。

TinyPNG – Compress PNG images while preserving transparency
https://tinypng.com/

 

使い方はとっても簡単で、画面上部中央にある、「Drag your .png or .jpg file here!」と書かれた枠の中に、圧縮したい画像をドラッグするだけ!
もしくは、枠の中をクリックして、画像を選んでもOKです。
あとは、自動的に画像が圧縮されます。

圧縮後は画面が下記のように変わるため、「Download」をクリックして、圧縮した画像をダウンロードします。

今回の画像は、1.0MB から 246.2KB に圧縮できました。
実に 76% のサイズダウンです。

で、実際に圧縮した画像がこちら。
上がオリジナルで、下が圧縮後の写真です。

▼オリジナル

▼圧縮後

目が良い人にはわかるかもしれませんが、70% も圧縮したとは思えない画質です!
これならば、問題なくWebサイトにも利用できますね。

Webサイトの高速化にお悩みの方は、是非こちらのサイトで画像の圧縮をお試しになってはいかがでしょうか。

村上 著者:村上

【CSS】CSSのみで画像を簡単にトリミングできる「object-fit」プロパティが便利

画像を扱う際に、任意の大きさでトリミングしたい場合があるかと思います。
その時に便利なプロパティが「object-fit」です。
これを使えば、画像のトリミングがたった一行でできて、凄く便利!

なお、今回参考にしたサイトはこちら。

1行追加でOK!CSSだけで画像をトリミングできる「object-fit」プロパティー
https://www.webcreatorbox.com/tech/object-fit

 

具体的な記述の仕方はこちら。

img {
    width: 100px;
    height: 100px;
    // トリミング
    object-fit: cover;
}

imgタグに対して、縦横100px、そして「object-fit: cover;」を指定しています。
こうすることにより、画像の縦横比を維持したまま、画像を100px × 100pxのサイズいっぱいに表示することができます。

また、object-position というプロパティを指定することで、表示する画像の位置を指定することもできます。
例えば下記のように指定した場合、

img {
    width: 100px;
    height: 100px;
    // トリミング
    object-fit: cover;
    object-position: 100% 100%;
}

表示している画像が横長の場合は、右端の位置でトリミングしてくれます。
通常のトリミングでしたら、object-position を指定せず中央位置でトリミングで問題なさそうですが、どうしても画像の左側や上を見せたい!というときに使えますね。
ちなみに、object-position: [横の位置] [縦の位置]; という順番で指定します。

 

position とかいろいろ使わなくて済むので、コードもすっきりしておすすめです。
画像トリミングしたいときは、是非こちらを使いましょう。

村上 著者:村上

【Cordova】cordova-plugin-facebook4でFacebookログインのパーミッションを複数指定する方法

CordovaアプリでFacebookログインをする時に利用するプラグイン「cordova-plugin-facebook4」でちょっとハマったので備忘録もかねてまとめ。
「cordova-plugin-facebook4」の導入については、下記をご確認ください。

GitHub – jeduan/cordova-plugin-facebook4
https://github.com/jeduan/cordova-plugin-facebook4

今回やりたいのは、ログイン時に、利用者に公開プロフィールの一部とメールアドレスへのアクセスを許可するかを確認し、名前とメールアドレスを取得する、です。
ログイン機能自体はプラグインがすでに用意されているのでこちらを利用します。
ただ、public_profile を指定して取得できる公開プロフィールの中にメールアドレスは含まれていないため、emailについても指定する必要がありました。
が、何故か挙動がおかしい、と若干ハマりました。

 

先に、正常に動作したコードをお見せすると、下記のように記述しました。

facebookConnectPlugin.login(["public_profile","email"],
    function(result) {
        // ログイン成功時の処理
    },
    function(error) {
        // ログイン失敗時の処理
    }
);

ログイン処理を行う、facebookConnectPlugin.login() という関数の第一引数にパーミッションを配列で記述すると、その指定したパーミッションを許可するか、ログイン時に利用者に確認してくれます。

で、何が間違っていたかというと、一緒に指定するパーミッションのようでした。
現在開発中のこのアプリは、アプリからFacebookへの投稿も行う機能もあるため、publish_actions というアプリの利用者の代わりに、投稿ができるパーミッションを許可するかも確認しているのですが、この publish_actions と一緒に email を記述していたのが問題のようでした。
そのため、public_profile と email を一緒に確認し、そのあとで publish_actions を確認する、という流れにすると問題なく動作しました。
読み込みのみのパーミッションと、読み込み&書き込みのパーミッションは、混合して記述してはいけない、という事みたいですね。

Facebookログインのパーミッションについて、詳しくは下記のFacebookのリファレンスを確認してください。

アクセス許可のリファレンス – Facebookログイン
https://developers.facebook.com/docs/facebook-login/permissions

なお、基本的なアクセス許可(公開プロフィールの一部取得、メールアドレス取得、友達のリストにアクセス)では、Facebookの審査は必要ありませんが、その他のパーミッション(アプリからFacebookに投稿など)は審査が必要です。

 

些細な指定ミスでしたが、記述の形式自体は合っていたために、修正に手間取りました。
皆様、もFacebookログインを利用する際は、十分お気を付けください。

村上 著者:村上

【CSS】スタイルシート内で計算式が使えるcalc()が便利

Webページを作成している中で、この要素の横幅は画面サイズから20pxを引いたサイズにしたい!など、計算が必要となる場面があると思います。
その場合は、Javascript もしくは jQueryで処理をすることが多いかと思いますが、CSSの calc() という関数でも同じ処理を行えるというので試してみました。

 

まず、jQueryで要素のリサイズをする処理は下記のように記述していました。
なお、今回サイズを指定したい要素は、IDに「content」という名前が指定された要素にしています。

// 要素の横幅指定
var width = $(window).width() - 20;
$("#content").width(width);

で、同じ処理をCSSでは下記のように指定します。

#content {
    width: calc(100vw - 20px);
    width: -webkit-calc(100vw - 20px); /* iOS対応 */
}

ちなみに、vw とは、ビューポートの幅を 1/100 した単位のことです。
ビューポートの幅とは画面の横幅のことを指すので、100vw は 画面の横幅のサイズになります。
なお、画面の高さを取得したい場合は、100vh と記述してください。

個人的な感覚かもしれませんが、コードがすっきりしたように感じます。
見た目にも、何をしているのかが分かりやすいですし、私はこちらの方が好みですね。
もちろん、実行後の画面は jQueryでもCSSでも全く一緒なので、お好みの方を使えば良いかと思います。

私のように、Javascript側で要素のリサイズ処理をしたくない派の方は、是非こちらを使用してはいかがでしょうか。

村上 著者:村上

【アプリ】Cordovaで開発したアプリを高速化するポイント

現在開発中のアプリがようやく完成間近の形になってきたので、機能以外の改善も行い始めました。
それがアプリの速度改善!
特にAndroidで動作させると遅いので、調べながらではありますが、手を付け始めています。

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

PhoneGapアプリのパフォーマンスを改善する10のポイント -Adobe MAX 2013
https://news.mynavi.jp/article/20130520-am2013pg/

成功するPhoneGapアプリを開発するための高速化&UXテクニック
http://blog.asial.co.jp/1142

どちらも2013年の記事なのでやや古めですが、参考になりそうな内容です。

 

で、まずは手っ取り早く試せそうなものを一つずつ試してみました。

1.ハードウェアアクセラレーションを意識してCSS Transitionsを利用する

具体的には、CSSに下記のスタイルを適応することです。

transform: translate3d(0, 0, 0);

このスタイルを追加することで、HTML DOMの描画にGPUが用いられるようになるとのこと。
そうすると、滑らかな描画を実現でき、さらにアプリの速度が大きく向上することもあるそうです。
ただし、あまり多くのHTML DOM要素の描画にGPUを用いると、GPU上の利用可能メモリーが埋まってしまう可能性があり、そうすると突然アプリがクラッシュする危険性もあるとのこと。
特に、深くネストされたDOM要素にこのスタイルを適応すると、上記のようにアプリがクラッシュすることがあるため、安易に追加するのは控えるべきですね。

2.Clickイベントは使用しない

スマートフォンのClickイベントは、画面がタッチされてから発生するまでに300msほどの遅延があるため、Clickイベントの仕様は、動作が遅くなる原因になります。
そのため、代わりにTouchStartを使用するか、FastclickなどのスマホでのClickイベントの応答速度を早くするライブラリを利用するのが良いとのこと。
ちなみに、開発中のアプリには、このFastclickを導入しています。

Fastclick の導入については、こちらを参考にしました。

スマホのクリック応答速度を劇的に速くしてくれる 『FastClick』 の使い方
http://phiary.me/fastclick-usage/

 

3.コンテンツのリフローを控える

リフローとは、要素の位置や大きさなどの再計算を行うことを指します。
リフローの計算は負担が大きいので、必要最小限に抑えるべきとのこと。

…これやってる…。
でも、この処理はどうしてもやらなければならないので、どうにかならないか確認しなければですね。
あとは、下記も効果的とのこと。

  • DOM要素の数を減らす
  • 深くネストされたHTML DOM構造を避ける

…これもやっちゃってるなぁ…。
これについては、コードを確認して、削れそうなところは削らねば。
 

4.テストする

最後のポイントとしては、実際のデバイス、実際のデータを使い、実際の環境でテストする、とのこと。
特に、少し古めのスペックが低めの端末でテストするのがよさそうですね。
私は、私用の端末はそこそこ良いものを買ってしまったので、案外サクサクと動いてしまい、あまり参考にならない…。
会社にあるテスト用端末をお借りしなければですね。

 

他にもまだ改善点はありますが、とりあえず私が試せたもの、確認したものは以上です。
とりあえず、リフローを改善しよう…!

私と同じくCordovaのアプリを開発している方は、是非参考にしてみてください。

村上 著者:村上

【PHP】リンク先のURLが有効かどうかを確認する方法

画像のURLを扱うときに、もしそのURLがリンク切れだったら代わりの画像を表示させる、という処理を行いたかったので、その方法についてまとめ。

なお、今回はこちらのサイトを参考にさせていただきました

【php】 URLが存在するかどうか確認する at softelメモ
https://www.softel.co.jp/blogs/tech/archives/4766

 

チェック方法としては、下記のように file_get_contents 関数を利用して、URL先のサイトの内容を文字列に読み込み、結果が返ってくればリンク先が存在している、という判断をしています。

$url = 'チェックしたいリンク先のURL';
$response = @file_get_contents($url, NULL, NULL, 0, 1);
if ($response !== false) {
    // リンク先が存在するときの処理
} else {
    // リンク先が存在しない時の処理
}

が、すべての内容を取得すると処理が重くなってしまうため、先頭の1文字だけを取得しています。
また、file_get_contentsは、リクエスト先がないときに warning が発生してしまうので、@をつけてエラーメッセージを表示させないようにしています。

 

他にも fopen 関数や get_header 関数を使用する方法も載っていましたが、これが一番処理が早く、また分かりやすいかなと思います。
URLチェックをしたい場合は、是非参考にしてください。

村上 著者:村上

【イベント】2月2日に「第4回 浜松ICTシンポジウム」を開催致します

日も近くなってきたので改めてご案内。
2月2日(金)に、浜松駅前のホテルクラウンパレス浜松にて、「第4回 浜松ICTシンポジウム」を開催致します。
シンポジウムについて、詳しくは下記のページもご覧ください。

2018年2月2日、浜松ソフト産業協会主催「第4回 浜松ICTシンポジウム」を開催します。
https://hamamatsusoft.com/news/2017/00033/

なお、主催団体は「NPO法人 浜松ソフト産業協会」です。
浜松ソフト産業協会について、詳しくは下記の公式サイトをご覧ください。

特定非営利活動法人 浜松ソフト産業協会
https://hamamatsusoft.com/

 

で、こちらの浜松ICTシンポジウムですが、今回は「浜松」にスポットを当てた講演テーマになっております。

第4回を迎えた浜松ICTシンポジウムは、浜松地域における「未来価値の創成」にスポットをあてます。
第1部では、光・電子技術の活用で産業振興を推進する「フォトンバレープロジェクト」構想と、光技術における「微弱光イメージング」の最先端に迫ります。
第2部では、実例を挙げながらセンシング技術とアルゴリズムの潮流を垣間見るとともに、自動運転の実用化への可能性について事例を交えて考察します。

本シンポジウムを通して皆様と知の絆が結ばれることを願っております。

※こちらの説明文は、公式サイトから転載させていただきました。

プログラム内容は下記のようになっております。

◆講演プログラム

第1部-1

「光・電子技術を活用した未来創生ビジョン」

伊東 幸宏 氏 Yukihiro Ito
公益財団法人浜松地域イノベーション推進機構
フォトンバレーセンター センター長

第1部-2

「フォトンカウンティングイメージングを含んだ極微弱光イメージングとその応用」

丸野 正 氏 Tadashi Maruno
浜松ホトニクス株式会社 取締役 システム事業部長

第2部-1

「IoT時代のセンサーデータ活用の事例と課題」

森川 恭徳 Yasunori Morikawa
NPO法人 浜松ソフト産業協会 理事
株式会社モアソンジャパン 代表取締役社長

第2部-2

「浜松での自動運転の取り組み、自動運転の技術」

須山 温人 氏 Atsuto Suyama
SBドライブ株式会社 CTO

 

このシンポジウムの聴講は、現在 絶賛受付中です。
ご興味がおありの方は、是非下記からお申し込みください。
https://hamamatsusoft.com/news/2017/00033/
聴講は、一般 3,000円で、学生の方は 2,000円となっております。
講演後は懇親会も開催致しますので、お時間がある方は、是非懇親会にもご参加ください。

村上 著者:村上

【Cordova】Androidアプリで「resource android:attr/colorError not found.」というエラーが発生したときの対処法

先日、Cordovaアプリを開発中、Android Studio を 2から3にアップグレードした際に発生したエラーの対処法についての記事を投稿しましたが、その第2弾です。
前回のエラー解消後にも、まだ違うエラーが発生しましたので、今回はそちらのエラーについて。
少なくとも私の環境では、前回と今回の2か所を直せば、問題なくビルドできるようになりました。

 

今回発生したエラーはこちら。

error: resource android:attr/colorError not found.

エラー文そのままですが、リソースファイル内の記述の「android:attr/colorError」というのが見つからない、というエラーですね。

こちらの対処法ですが、こちらも前回のエラーと同様に、build.gradle ファイルを修正します。
Android Studio でbuild.gradle ファイルを開き、compileSdkVersionbuildToolsVersion を指定している記述を探します。
そして、それぞれを下記に変更します。

compileSdkVersion 26
buildToolsVersion "26.0.2"

gradleファイルを変更すると、黄色い帯と Sync Now という文字が表示されるので、「Sync Now」をクリック。
以上で修正は完了です。
問題なくビルドと実行ができるようになりました。

 

ちなみに、一つ目のエラーについての記事はこちらから。

【Cordova】Android Stodio 3.0で「Unable to resolve dependency for ‘:@debug/compileClasspath’: Could not resolve project :CordovaLib.」というエラーが出たときの対処法
https://wp.me/p9rRLL-fT

同じエラーでお悩みの方は是非ご参考にしてください。

村上 著者:村上

【Android】Facebookログインで使うアプリのリリースキーハッシュを取得する方法

こういう設定周りは凄く苦手で、特にFacebookはとことん手こずるので、備忘録としてまとめ。

今開発中のアプリで、Facebookログインを導入しているのですが、こちらの機能の動作確認中に、「Invalid key hash.」というエラーが発生したので、その対処法について。
そもそもこちらのエラーは、「Facebook for Developers」のアプリ設定ページで、エラーメッセージに表示されているキーハッシュが登録されていないために発生するので、キーハッシュを発行して登録すれば解消できます。
…が、これが結構面倒くさい。
コマンドは Facebook の公式ページに掲載されているのですが、肝心な自分の

 

キーハッシュ発行方法は以下の手順で行います。
なお、作業はWindowsのコマンドプロンプト上で行いました。

まず、発行のためのコマンドはこちら。

keytool -exportcert -alias <RELEASE_KEY_ALIAS> -keystore <RELEASE_KEY_PATH> | openssl sha1 -binary | openssl base64

が、そもそも keytoolコマンドが動かないので、下記のcd コマンドでカレントディレクトリを変更します。

cd C:\Program File\Java\jre1.8.0_151\bin

各自の環境によってパスは変更して頂く必要がありますが、私の環境では下記の場所に移動したところ、無事 keytoolコマンドが動作しました。

そして、さっきの keytoolコマンドに戻るのですが…このコマンドの RELEASE_KEY_ALIASRELEASE_KEY_PATH がわからない!
上記のコマンドが掲載されていたFacobookのページにも、その他検索にヒットしたサイトにも、どこから自分の RELEASE_KEY_ALIAS と RELEASE_KEY_PATH を調べるのかは明記されておらず…結構調べました。

で、結論として、まず RELEASE_KEY_ALIASAndroid Studio で確認できました。
Android Studio のメニューバーにある Build > Generate Signed APK… をクリックします。
すると、下記のようなウィンドウが表示されるかと思います。

このウィンドウの中央辺りに「Key alias:」という欄がありますが、これが RELEASE_KEY_ALIAS です。
また、この時設定したパスワードも、キーハッシュ発行時に使うので覚えておきましょう。

次に、RELEASE_KEY_PATH ですが、こちらは、アプリのリリース用APKを生成するときに使用する ○○○.jks ファイルのパスを指定するとのこと。

この3点が分かったので、改めて keytool コマンドを実行します。
実行すると、「キーストアのパスワードを入力してください:」というメッセージが表示されるので、Android Studio で設定したパスワードを入力します。
すると、最後が「=」で終わる、28文字のキーハッシュが表示されるので、こちらをFacebook for Developer のマイアプリページで設定・保存すれば作業は完了です!

それでもうまくいかない場合は、一度Facebookのアプリ設定の「Facebookでログイン」から、該当のアプリを削除してみると、ログインに成功しました。

 

以上、Facebookログイン時に使用するリリースキーハッシュの取得方法でした。
こういう設定周りが苦手な方は、是非参考にしてみてください。

村上 著者:村上

【Cordova】Android Stodio 3.0で「Unable to resolve dependency for ‘:@debug/compileClasspath’: Could not resolve project :CordovaLib.」というエラーが出たときの対処法

今回はCordova(コルドバ)というハイブリッドアプリ開発の時に発生したエラーの対処法について。
「ハイブリッドアプリ」については、下記のサイトが分かりやすくて、参考になりました。

ハイブリッドアプリとは? – Qiita
https://qiita.com/soarflat/items/cf5d343c75baadb461dc

 

他のアプリ確認する際に、Android Studioのバージョンを 2から3に上げなければいけなかったのですが、アップデートしたら、Cordovaのアプリがビルドで失敗するようになってしまいました…。
で、対処法がないか調べてみたとこと、案外あっさり見つかって拍子抜けしました。

対処法は、Android StudioでCordovaのアプリを開き、build.gradle ファイルを開きます。
で、下記2行の記述があると思うので、こちらを削除もしくはコメントアウトします。

// 削除するコード
debugCompile(project(path: "CordovaLib", configuration: "debug"))
releaseCompile(project(path: "CordovaLib", configuration: "release"))

で、代わりに下の一行を追加するだけ。

// 追加するコード
compile project(':CordovaLib')

build.gradleを編集すると、黄色い帯と Sync Now の文字が表示されると思いますので、そのまま Sync Now をクリックします。
以上で作業は終了です。
私の環境では問題なくビルドから実機での起動まで正常に動作しました。

 

もし、同じようにAndroid Studioのバージョンを上げてCordovaで開発しているアプリが動かなくなった場合は、是非こちらの方法を試してみてください。