カテゴリーアーカイブ 未分類

村上 著者:村上

【アプリ】Webアプリがネイティブアプリのように使える「PWA(Progressive Web Apps)」

業務でネイティブアプリの開発をすることが多いですが、今回、初めて「PWA」というものに触ってみました。
PWA とは「Progressive Web Apps」の略で、「プログレッシブWebアプリ」という、Webアプリをネイティブアプリのように使えるようにするしくみのことです。
これを使うことにより、モバイル端末でWebページを表示する際、ネイティブアプリのような挙動をさせることが出来ます。

PWAについては、こちらのサイトを参考にさせていただきました。

いまさら聞けないPWAとAMP – Qiita
https://qiita.com/edwardkenfox/items/4c0b9550ffa48c1f0445

サンプルあり!Googleが推奨するPWAに既存サイトを対応させる方法 – WPJ
https://www.webprofessional.jp/retrofit-your-website-as-a-progressive-web-app/

特に下のサイトがおすすめ!
GitHubのサンプルコードも紹介しているので、とりあえず PWA ってどんな感じ?という人が試しに触るのにはちょうどいいと思います。
やはり 0からコードを書くよりも、ひな形があるほうが簡単ですしね!

 

さて、まずWebサイトを PWA 対応させるためにやらなければならないことは下記のとおりです。

  1. WebサイトをSSL化する(HTTPSを有効にする)
  2. Webアプリのマニフェストを JSON で作る
  3. Service Workersを作る

最低やらなければいけないことは、上記の3点です。
特に 3.Service Workersを作る については、私はなかなか理解するのが難しかったので、最初はサンプルコードをそのままコピーして利用しています。

また、PWA はキャッシュを保存してオフラインでも動作する仕様になっています。
そのため、開発中は Google Chrome のシークレットウィンドウを使い、キャッシュを残さないようにすると開発がしやすいらしいです。
ただし、ホーム画面に追加する機能のテストは、シークレットウィンドウでは動かないので、その点はご注意ください。

 

まだ触り始めたばかりなので、挙げられる注意点は以上です。
正直、アプリを開発するよりもかなり楽なので、新しいサービスの開発を考えている方は、PWAの使用も視野に入れてみてはいかがでしょうか。

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

Google Chrome Ver.68でChromeの新しいデザインが利用可能に。

Google Chrome で追加されたのは、SSLの警告だけではありません。
Chrome Ver.68から、タブデザインも変更された、マテリアルデザインに準拠した新しいデザインが利用できるようになりました。

「Google Chrome 68」で新“マテリアル”なタブバー・ツールバーを体験しよう – 窓の社

有効化方法は毎度おなじみchrome://flagsから。

chrome://flags#top-chrome-md

とURL欄に打ち込むとすぐに見つけることができます。

UI Layout for the browser’s top chrome のプルダウンを “Default”から”Refresh”(タッチパネル対応の場合は”Touchable Refresh”)に変更します。

再起動を促されるのでChromeを再起動。


デザインががらりと一新されていますね。
タブも丸みを帯びたデザインへと変更されてて、ちょっとFirefoxっぽい見た目となっています。


そして細かいですがユーザー切り替えボタンが最小化ボタンの隣から、拡張機能アイコンの右側へ移動となりました。
これはこれですっきりしていていいかもしれません。

デザイン変更と細かな配置変更以外は特に違いは見つけられませんでしたが、新しいタブを開く際のボタンが、タブの最後尾から左端に移動してしまい、ちょっと直感性が落ちてしまったのが残念です。

まだ実験版とのことなので、今後のアップデートでさらに使いやすくなっていくことを期待したいと思います。

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

【Excel】結合したセルの行の高さの自動調整は無効です

タイトルにもある通りです。
Excelでセルの結合を行い、さらにその列に「折り返して全体を表示」を指定した場合でも、セルの行の高さの自動調節は行われません。
以前は、これを知らず「何故行をダブルクリックしているのに自動調整されないのか?」と悩んだ記憶があります。
どうやらExcelの仕様のようなので、自動調節が効かないのはどうしようもないんですよね…。

 

対処方法としては

  1. 手動で調整
  2. マクロを使う
  3. 行の高さ調整のアドインを使う

上記の3つが挙げられます。
以前は1の手動での調節を使っていたのですが、アドインがあったとは…!
今回、改めて調べてみて初めて知りました。

なお、2のマクロについては下記のサイトが参考になりそうです。

VBAで結合セルの行の高さを自動調整する|Excel作業をVBAで効率化
https://vbabeginner.net/結合セルの行の高さを自動調整する/

また、3のアドインについては、こちらから。

結合セルを含めた行の高さ調整アドインAutoFitRowExの詳細情報:Vector ソフトを探す!
https://www.vector.co.jp/soft/win95/business/se508497.html

時間があるときにでも、私も導入してみようかと思います。

 

以上、結合したセルの行の高さの自動調節についてでした。
セルの横幅を長くすることができれば、そもそも結合せずに済んで、自動調節も効くのですが…そうでないこともあるので、その場合は、今回上げた方法を使ってみてください。

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

VisualStudioCodeで文字コードを自動判定させる方法

GUI向けエディタで、登場から急激にシェアを伸ばしているVisualStudioCode(VSCode)

個人的には今まで使ってきたエディタの中で一番の使い勝手だと思っているのですが、一つだけ不満点が。
文字コードがUTF-8以外のものであるテキストファイルに対しても、起動直後は必ずUTF-8で表示してしまう、という仕様になっている点です。

例えば、

こんな感じでshift_jisのテキストファイルを作成し、保存。
このファイルを再度開くと

UTF-8として読み込まれてしまいます。
UTF-8以外の文字コードでなくても、右下の文字コードメニューから文字コードを切り替えることもできますが…

場合によっては文字が化けていることに気づかずに保存してしまい、大惨事になってしまうこともあります。
…というか文字コード推測できるならなぜ表示しない!!!と突っ込んでしまいました…w

一応VSCodeの開発者的にはさまざまな理由から”敢えて”自動で切り替わらないようにしているとのことでしたが、正直使い辛過ぎるのでなんとかならないかと方法を探したところ、方法を発見。
VSCodeの設定に

"files.autoGuessEncoding": true,

の一行を追記すればよいそうです。
VSCodeで文字コードを自動判別する – Qiita

これで再度先程のテキストファイルを開いたところ…

開いた時点で適切な文字コードが選択されるようになりました…!
これで誤った文字コードで保存してしまう事故も減りそうです。

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

正規表現の最短一致指定子としての”?”

 正規表現には”*”、”+”、”{m,n}”などの様な繰り返しの量指定子があります。これら量指定子はそのままの場合、最長のマッチになるようにマッチングを行います。具体的には下図です。
 
 ”(a+)(a+)”で文字列”aaaaa”をマッチさせました。m[1]にはグループ1である最初のカッコの”a+”にマッチしたaが、m[2]にはグループ2である二つ目のカッコの”a+”にマッチしたaが、格納されています。最長のマッチになる様にマッチングを行う、というのは、”m[1]=aaaa”とあるようにマッチ全体が成立する範囲でできる限り多くの文字列を含もうとする動作のことです。正規表現全体のマッチが成立しなくなるまで、マッチングを続けるとも言えます。逆に最短になるようにマッチを行う方法もあり、その指定子が”?”です。”*?”や”+?”の様に繰り返し指定子の直後に”?”をつけることで最短マッチになります。最短マッチの例が下図です。
 
 ”(a+?)(a+)”で文字列”aaaaa”をマッチさせました。先ほど同様にm[1]、m[2]にそれぞれのグループが格納されています。今度は”m[1]=a”とあります。最短になるようなマッチです。この場合、繰り返し指定子がマッチしたらすぐにマッチングを終了するという動作になります。そのため”a+”が成立する”a”一文字でグループ1の部分のマッチングが終了しました。
 最短一致指定子が有効なのは例えばタグの様な特定の文字で括られたものの検索です。”<.*?>“とした場合、<の次に初めて>が出た時点でマッチングを終了してくれます。逆にダメなパターンでありがちなのは”$”や”\z”の様な行末指定です。頻繁にマッチ終了と行末か否かの判断が繰り返されて実行時間が遅くなります。

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

アイコン素材集FLATICON

 フリー素材集というものはいくらあっても足りません。FLATICONはアイコン検索エンジンです。検索対象はFLATICONに登録されたアイコンのみですが、その数は2018/07/27時点で976,000と膨大です。そして登録されたアイコンの多くはフリー素材です。

 様々な人や団体が、FLATICONにアイコンを登録するだけあって、人気の指数やアイコンのパッケージ化、タグ付けといった便利なカスタマイズ要素が多々あります。ただ、アイコンの画風で違いを付けにくく信用や声望で成り立ってるようなのでクレジット表記、クリエイティブコモンズには特に注意が必要です。
関連記事
【フリー素材】アイコン素材なら商用利用可の「icooon-mono」がおすすめ
ウィキメディア・コモンズの紹介

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

【アプリ】症状の緊急度を判断できる全国版救急受診アプリ「Q助」

出来れば使う機会が来ないほうが良いものではありますが、ここ数日の猛暑のため、インストールしてみました。
消防庁が提供している、全国版救急受診アプリ「Q助」です。
もし、具合が悪そうな方や倒れた人がいた時に、救急車を呼ぶべきなのか様子を見るべきなのかを判断してくれます。

消防庁の公式サイトはこちらから。

全国版救急受診アプリ(愛称:Q助):総務省消防庁
http://www.fdma.go.jp/neuter/topics/filedList9_6/kyukyu_app.html

 

起動してすぐの画面がこちら。

その人の症状に従って、あてはまる項目を選択していきます。

診断が終ると、次のような診断画面が出てきます。
こちらは緊急の場合。

焦っている救急隊のイラストとともに、「119番に電話する」というボタンが出ています。

こちらは、そこまで緊急度が高くなかった場合。

できるだけ早めに医療機関の受診することを進めています。
恐らく、このあたりが救急車を呼ぶか否かの判断に困りそうだと思われますから、アプリでわかると良いですね。

他にも、緊急ではない緑バージョンの判断結果もありました。

 

以上、救急受診アプリのご紹介でした。
意識なしとかだったら、即救急車!と分かりますが、そうでないイエロー判断の時とかに重宝しそうですね。
冒頭でも書きましたが…正直、使わないことが一番良いのですが…。
ですが、連日の猛暑で熱中症になる方も多そうですから、万が一の時のためにインストールしておくと安心だと思います。
特に、高齢者や小さいお子さんがいるご家庭の方は、インストールしてみてはいかがでしょうか。

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

markdown(*.md)形式のファイルを開けるビュアーアプリ”markcat”

HTMLよりも簡単に書式付きの文章が書け、GitHubやBacklogなどの主要な開発コミュニティサイトなどでもつかわれる”Markdown”ファイルですが、よく使われている割には定番のビュアーなどがなく、標準の状態ではMarkdownのビューを見るには実際にMarkdownが動作するWebサービスなどに置くか、あるいはエディタなどについているMarkdownのプレビュー機能などを用いるしかありません。

しかし、内容を確認するためにわざわざWebサービスにアップロードするのも手間ですし、エディタのプレビュー機能もソースコードも一緒に表示されてしまうのは煩わしい上、間違えて触ってしまいそうで落ち着いて見れないという欠点(?)があります。

ということで、デスクトップ上でmdファイルを開いた際に、レイアウト込みかつソースを表示しない、いわゆる”ビューアー”を探したところ、よさげなアプリを発見しました。

markcat – エクスプローラーやFinderから素早く利用できるMarkdownビューアー – SOFTANTENNA BLOG

markcat というアプリです。

Windows(64bit)向けとmacOS向けが公開されています。
mac版はまだ触っていないですが、Windows版についてはインストーラーはなく、解凍すればそのまま使えます。

早速試してみます。

とりあえず適当にMarkdownファイルを作成。

これをmarkcatで表示してみると、

こんな感じで表示できます。

白基調のカラーテーマも用意されているので、どちらか見やすい方をえらぶことができます。

あとはOS側の設定で”.md”の拡張子がついたファイルをmarkcatと関連づけをしておけば、mdファイルをダブルクリックしただけでmarkcatが開くようになります。
とても便利です。

Markdownをもっと活用したい、と考えている皆さんは是非一度試してみてはいかがでしょうか。

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

【Excel】セルの数値を指定した桁数で四捨五入する方法

今日も今日とて、Excelについて。
今回は、セルの数値を四捨五入する方法についてです。
使う関数は「ROUND」です。

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

【エクセル時短】意外と知らない「数値の丸め」。基本のROUND系関数をマスターする!|Excel|できるネット
https://dekiru.net/article/15716/

 

使い方は下記のとおりです。

=ROUND([数値],[桁数])

上記のとおりに、第一引数に四捨五入したい数値を指定し、第二引数には四捨五入後の小数点以下の桁数を指定します。
なので、例えば第二引数に 2 を指定した場合、四捨五入後の結果は小数点第二位まで表示されます。

なお、第二引数が 0 の場合は、結果は整数になり、負の数が指定された場合は、小数点の左側 (整数部分)が四捨五入されます。

=ROUND(21.4, -1)

よって、上記の結果は1の位で四捨五入が行われるため、20 になります。

 

なお、切り上げ、切り捨てを行いたい場合は、それぞれ ROUNDUP 関数と、ROUNDDOWN 関数を使用します。
使い方は ROUND関数と同じで、第一引数に切り捨て、切り上げを行いたい数値を指定し、第二引数に切り捨てる、もしくは切り上げる桁を指定します。

 

以上、Excelで四捨五入を行う方法でした。
Excel自体にも、数値の表示桁数を指定する機能が付いてはいます。
が、表示形式を指定しているだけで、実際には数値はそのままなので、場合によっては計算に誤差が出たりします。
四捨五入後の数値で計算を行いたい場合は、ROUND関数を使って、この誤差が出ないようにしましょう。

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

フローチャート等のダイアグラムを気軽に書けるdraw.io

 この記事を書いている時点のwikipediaにおいてダイアグラムは次の様に紹介されています。

ダイアグラム(diagram)とは、情報を2次元幾何学モデルで視覚化した象徴的表現である。3次元の2次元への投影による視覚化も含む。関数などのそれはグラフと呼ぶ。

 ざっくばらんに言えば、言葉にするより図にした方が分かりやすいものを図にする、ということです。この手の作図でとりあえずでよく使われそうなのがpower pointです。実際、簡単な図程度なら少しの手間で望んだ図を作ることが出来ます。しかし、複雑な図になるほど極端に手間が辛くなります。図と矢印とその連結が単調なせいで複雑なダイアグラムを描いた時の入り組み方が恐ろしいことになりやすいです。draw.ioはその辺りを配慮してくれています。すぐに便利だと思えた機能には多段に直角以外で曲がる矢印、連結箇所の多い図形、多数用意されたダイアグラム向けの図形がありました。
 基本draw.io上の作図状態はgoogle driveに保存されますが出力はローカルを始め多様な場所にできます。”ヘルプ->ダウンロードする”からオフライン用実行ファイルがダウンロードでき、”ヘルプ->オフライン”からローカルのみで読み書きができます。作図結果の出力はPNG、PDF、HTML、URLなどなどと様々です。英語に抵抗があっても、右上の地球マークから好きな言語を選ぶことが出来ます。もちろん日本語もあります。

 下図は過去の記事で描いたダイアグラムです。

 これはpower pointで描きました。計ってはいませんでしたがそれなりに時間がかかっていたはずです。この図をdraw.io上で再現した結果が次です。
 


 おおよそ7分ほどで描けました。ストレスフリーでさっくり描けて楽でした。

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