カテゴリーアーカイブ Webサービス

takahashi 著者:takahashi

簡単にWebアプリをPWA化できるように手助けしてくれるサイト”PWABuilder 2.0″

Microsoftが提供するWebサービスのPWA化支援サービス”PWABuilder”をアップデートした”PWABuilder 2.0“を公開したようです。

Microsoft、「PWABuilder 2.0」をリリース ~既存サイトの“PWA”移行を支援 – 窓の杜

WebサービスのPWA化を助けてくれるツールとのことですが、実際どんな感じなのか試してみました。

まず、アクセスすると上の写真のような画面が表示されます。

ページの赤枠のところに、PWA化したい自分のサイトのURLを入力し、”Start”をクリックします。

すると入力したURLのサイトの解析が始まります。

判定が終わると、スキャンしたサイトの現状の”PWA対応度”がはじき出されます。

今回は例で自分のサーバーで動かしているMastodonをスキャンしてみましたが、ManifestとSecurityの項目はクリアしているものの、Service Workerについては不足しているという結果が出ました。

でもService Workerってどうやって作ればいいんや…という話になりそうですが、上画像の”Choose a Service Worker->”をクリックすると

こんな感じで、用途に合わせたService Workerのサンプルコードまで提示してくれます。

これだけでもかなり便利なサービスですが、実はもう一つありがたい機能が。
右上の”Build My PWA”ボタンを押すと…

なんと入力したURLをアプリ化するための、各OS向けのプロジェクトまで自動生成してくれます!!!

例えばAndroid版のPWAパッケージを選択した場合…

Androidアプリの開発に使うAndroid Studioでプロジェクトとして読み込めるひな形を自動生成してくれます…!

つまり、これをAndroid Studioに読み込ませて、必要なカスタマイズだけ施せば、それでもう自分のサイトをAndroidアプリ化できてしまうということです。これはスゴイ…!

ちなみに、Windowsストアアプリ版のプロジェクトも入手できますが、

PowerShellの制限を解除した上でこの”test_install.ps1″の中身を実行すると…

なんとアプリとしてインストールできてしまいました!!!
そしてこのアプリを実行すると…

なんとなんとそのままWindowsアプリとして実行できてしまいました…!!!

勿論、ちゃんとアプリとして動作させるにはもう少し調整が必要かとは思いますし、ストアアプリとして公開するには署名等の手続きも必要ではありますが、何もしなくてもここまでのものを吐き出してくれるので、初めてでもかなり効率的に開発ができそうですね。

# これもうWin10に限定すればElectron必要なくなるのでhゲフンゲフン

他にもGeo Location APIなどの機能をPWAに搭載する際の記述方法も確認することができます。

見た感じ、かなり強力なツールになっているので、これからPWAに対応したサイトやアプリを作ろうと思っている方は是非一度試してみてはいかがでしょうか…!

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

【Chrome】任意のJavaScriptを自動実行するChrome拡張であるScriptAutoRunnerの紹介

ScriptAutoRunner – Chrome ウェブストア
 ScriptAutoRunnerはあるページに移動した時に自動でJavaScriptを実行するChrome拡張です。これを使うとページを開いてブックマークレット、ページを開いてブックマークレット、ページを開いてブックマークレット、……という作業から解放されます。
 使い方はインストールして、オプションからコード記述画面へ移動。対象ページのドメインと実行コードを記述するのみです。例えば次の様に使えます。

 このブログの右サイドバーにのみ使われているクラスcol-md-4から右サイドバーを参照、style.display=’none’で画面上から削除。メインコンテンツでのみ使われているクラスcol-md-8でメインコンテンツを参照、メインコンテンツのクラスを空にすることで、クラスにかかったstyleによる横幅指定を解除。これが自動実行のため次の様になります。

 ページを開くたびにサイドバーが消えて、記事に集中できるようになりました。

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

【Webサービス】Base64に変換した画像をデコードできるサイト「Base64デコード」

最近、Base64 関連の記事ばかりですみません。
よく使うサイトがあるので、ブックマーク代わりにまとめ。
タイトルにもある通り、Base64 に変換した画像をデコードできるサイト「Base64デコード」です。
要は、テキストデータを画像に戻してくれるサービスです。

サイトは下記から確認できます。

Base64デコード
https://tomari.org/main/java/base64d.html

 

ページにアクセスしてもらえれば分かりますが、かなりシンプルなサイトなので、操作が分からないということはないかと。
ページ中央に「base64デコードするデータを貼り付ける。」と書かれたテキストエリアがあるので、そこに変換したいBase64データを貼り付けます。
で、あとは「表示」ボタンを押すだけです。

データ量にもよりますが、少し待てば変換された画像が表示されるはずです。
なお、コピーミスなどでデータが間違っている場合は、破損した画像ファイルが表示されるので、その際は変換前のデータを確認してみてください。

 

以上、Base64データに変換した画像ファイルをデコードして表示できるサイトのご紹介でした。
ブックマークしておけばいいものを、度々忘れてしまうのでこうしてまとめておきます。
ご活用いただければ幸いです。

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

ライブラリ等の英語ドキュメントの和訳サイトにほんご。の紹介

| にほんご。
 コード中でライブラリを用いるために英語ドキュメントの中身を理解する必要がでてくる時があります。google翻訳は便利ですが、ソースコードや固有名詞の和訳するべきでない部分も和訳することがあります。自分自身で和訳しながら読むのは日本語を読むより時間がかかります。”にほんご。”はそういった英語ドキュメントを和訳しているサイトです。ドキュメントの内容は最新ではないですが最終更新日が2019.01.25と精力的に活動しています。
 にほんご。では多くのオプションを持ち、成熟したライブラリのドキュメントのAPIを扱っています。最近ではChart.jsのページが特に役に立ってくれました。

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

Google+が4/2に終了。サービス終了に備えてできることまとめ。

GoogleのSNSサービス”Google+”が4/2にサービス終了予定となっています。

終了する理由としては、利用者の増加が見込めなくなった点、そして、 “Google+ People API” の不具合が原因で非公開設定にしている個人データ(名前、メールアドレス、職業、性別、年齢など)に開発者がアクセスできてしまう事件が発生し、トドメになってしまったようです。

“世界中の情報を整理する”ことを野望とし、実際に世界中の情報を整理するというかもはや牛耳る勢いで様々なサービスを出してきたGoogleですが、そんなGoogleであっても他の巨大なSNSサービスに勝つことができなかったという事実に無常観を感じます。

なお、G Suite (有料の企業向け) 版Google+は継続される予定のようです。

利用者が伸びなかったとはいえ、Google+を愛用していたユーザーは一定数いるはずです。
そんなユーザーの皆さんには、せめてデータをバックアップしておきたい、という方もいらっしゃるかと思います。

ありがたいことに、GoogleはGoogle+に限らずGoogleアカウントを利用したあらゆるサービスのデータのバックアップを取得することができる仕組みを用意しています。

バックアップを取得するには、まずGoogleアカウントの”自分のデータをダウンロード“ページへ移動します。

すると、バックアップ可能なGoogleのサービスの一覧が表示され、バックアップを取得したいサービスにチェックボックスを入れる画面が出てきます。

Google+のみをフルバックアップしたい場合はこの4項目にチェックを入れておけばよさそうです。

バックアップを取得する際には形式や取得方法などのオプションを選ぶことができます。

オプションを指定したら”アーカイブを作成”をクリックします。

アーカイブ作成中の画面へ移行します。
僕の場合はデータ量が少なかったのですぐにダウンロード可能な状態になりましたが、Google+に多くの投稿をしていたユーザーの場合はアーカイブが準備されるまで、かなりの時間がかかるかもしれません。

“ダウンロードリンクをメールで送信”を選択した場合、準備が完了するとメールが送信され、その中にある”アーカイブをダウンロード”をクリックするとこのような画面になります。

ダウンロードしたzipファイルを解凍すると、このような形でデータが格納されていました。

Twitterのエクスポートと違い、画像ファイルなどもすべて出力してくれるのはありがたいですね。
投稿もスタイルこそなかったものの完全な状態で保存できていました。

エクスポートがちゃんとできることは分かりましたが、そうはいってもサービスの終了というのはなかなか大きな影響を与えるものです。

利用者の得られなかったGoogle+ですが、同じGoogleから独立したNiantic社で開発・配信されている位置情報ゲーム”Ingress“では、Google+がエージェント(Ingressでは参加ユーザーのことを”エージェント”と呼ぶ)同士のコミュニケーションや公式からのアナウンス情報を受け取るのに欠かせないツールとなっていたようで、少なからず影響を受けるようです。

そんな状況を鑑みてIngress公式では、新たな”専用のSNS”へ移行する、という計画を立てているようです。

『Ingress』Google+終了後どうなるの!? グローバルコミュニティマネージャー アンドリュー・クルーグ氏に対策を訊く – ファミ通

新しいSNSでもGoogle+同様の役割を担わせることができるのか、注目ですね。

Google+の順次閉鎖開始まで残りわずかです。

Googleは公式アナウンスで”2019 年 3 月 31 日より前にダウンロードを開始してくださいますようお願いいたします。”としています。

Google+を使用中のユーザーの皆さんは早めにデータのエクスポートや他サービスへの移行をしておいた方がよさそうです。

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

【Laravel】Laravel付きのPHPオンラインテストページImplode.io

Implode.io
 Implode.ioは簡易なPHPをテストする環境を持ったwebサービスです。Implode.ioにはコードを簡単に書き、共有できるような環境が整っています。Implode.ioの特長はフレームワークLaravelを使えることです。図の様にフレームワークを指定することで組み込まれているクラス、関数などが使えます。

 図のNewからセットを選ぶとモデルやテンプレートを試すこともできます。

 下図中の赤丸部分の画面上部にある検索ボックスから今まで大勢に作られてきたコードを探せます。

 これでLaravelのみに関わるテストでも、開発中のコードを触ったり余計な計算資源を食ったりせずに済みます。

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

JR東海のHPがリニューアル 列車の現在位置や運行状況をリアルタイムで確認可能に!

JR東海が突如としてHPをアップデートし、とても便利な機能が追加されました!

運行情報のリニューアルについて- JR東海

JR東海、運行情報をリアルタイム提供=ツイッターも活用-16日から – 乗りものニュース

アップデートされたのはJR東海HPの運行情報ページ。

アップデートにより運行情報を閲覧する画面が見やすくなり、さらに新機能として、”全列車の位置をリアルタイムに表示する機能”が追加されました。

新しい運行情報を閲覧するには、トップページ左側に出ている”運行情報”の欄からアクセスできます。
新幹線、在来線と別れているので、見たい方のバナーをクリックします。

まず、新幹線の場合を見てみます。

運行情報の新幹線のバナーをクリックすると、JR東海管轄内の路線図が出てくるので、運行状況を確認したい駅名をクリックします。

するとこのように、どの電車がどの場所にいるのかが図で表示されます。

読み込み時点のリアルタイムの情報が表示されます。より新しい情報を取得するには、右上の更新ボタンをクリックします。

在来線もほぼ同様の表示になっています。


これなら、自分が乗る予定の電車が今どのあたりにいるのか一目でわかっていいですね。

JR東海の駅は次の電車まで10分~20分ほど待つこともよくありますが、今どの場所に電車がいるか分かれば、あとどれぐらい待てばいいかも分かるのでとても便利ですね。

ちなみに、運行状況画面では遅延証明書をネット上で取得することができる機能もありました。

こちらはもともとあった機能なのか、今回追加された機能なのかは把握できていませんが、もし自分が学生自体の時にこの遅延証明書機能を使えていたら、駅の窓口が閉まってても困ることはなかったのになぁ、と思いました。

こんな風に、交通面の情報もどんどん便利になって、いろいろな情報が手に入るようになるのはとてもありがたいですね。

旅行のときや電車の遅延で困ったときなど、是非活用してみてはいかがでしょうか。

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

スマホに入れるだけで手軽に防災情報が手に入れられるアプリまとめ

東日本大震災から今日でもう8年も経つのですね。
自分は直接被災をしたわけではありませんが、連日放送されていたニュース映像を見て、非常にショックを受けてたことを今でも思い出します。

今回は、そんな災害について考える節目の機会ということで、”インストールしておくだけで災害時に役立つアプリ”をいままでご紹介したものも含めてまとめてみました。

・災害の直前から役に立つアプリ

1.とりあえずこれだけ入っていればOK! あらゆる防災情報を受信できるアプリ Yahoo!防災

Yahoo!防災はYahoo! Japanが無料で提供している防災情報受信アプリです。

緊急地震速報は勿論、

あらゆる防災情報を受信することができます。
緊急地震速報では受け取れない”国民保護情報”や洪水、火山情報などを受信できるのも、よくできている部分ですね。

また、個別に音量やマナーモード中の通知、通知音の設定などができるのもおすすめポイントです。

ただ、最近利用者数が多くなってきているのか、たまにプッシュ通知が遅れて届く場合もあるようです。
あくまで補助目的として考えた方がいいかもしれません。

また、避難所を検索・登録できる機能もあります。

2.加速度や地震波形など、詳細な情報も表示できる地震監視アプリ 強震モニタEx

3.本格的な緊急地震速報を受信できるアプリ Signal Now Mobile

ストラテジー社の提供する高度利用者向け緊急地震速報受信ソフトのスマートフォン版です。
緊急地震速報を受け取るためには月額108円の情報料が必要ですが、気象庁で定められた演算方式をもとに独自計算して正確な震源地や到達予測を通知してくれます。

・災害直後から役に立つアプリ

1.どのスマートフォンからも無料でインターネット経由でAM/FMラジオを聴くことができるアプリ Radiko/NHKらじるらじる

スマートフォンにラジオを受信する機能がついていなくても、これらのアプリをインストールしておけば、インターネット経由で無料でラジオを聴くことができます。
また、インターネット経由なのでラジオ電波経由で聞くよりも音声がクリアです。

なお、通常視聴できるラジオ局は地域で限定されていますが、月額350円支払うことで全国のラジオ局のラジオが聞ける”Radikoプレミアム”も利用可能です。

ただし、インターネット経由での配信の特性上遅延が発生するので、ラジオの緊急情報も遅れて届く点に注意が必要です。

2.ウェザーニュースタッチ

ウェザーニュース社の公式スマホアプリです。

メインの機能は月額会員にならないと使用できないものもありますが、天気や警報、地震情報などは無料でさっと確認ができるので便利です。
地震直後の津波などの警報や、進度の確認に役に立つではないでしょうか。

また、ウェザーニュース社も緊急地震速報機能をリリースしており、月額会員になることで利用することができるようです。

3.Twitter

最早身近な存在のTwitterですが、実は災害時に非常に役に立つツールです。

まず地震が来たときに必ず情報を交換しているユーザーがいますし、地震の速報をTwitterに流している地震速報系のアカウントも多数存在しています。
また、政府をはじめとする公式の情報を受け取ることもできます。

そして震災があったときは、救助や救援物資をリクエストしたり、災害の状況を交換する重要なツールになります。

東日本大震災の時も、テレビで津波の情報が流れた際に”逃げて!!!”というツイートをしている方もたくさんいましたし、Twitterを救助要請のツールとして使っている方もたくさんいました。

SNSなのでデマや誤った情報が流れることもあり、一概にいいとはいえない面もありますが、速報性が高く、一気に不特定多数の人に情報を伝えることができるという意味ではとても効率がいいので、とても役に立つのではないかなと思います。

自分からつぶやく必要は必ずしもないので、アカウントの登録だけでもしておくといいかもしれませんね。

いざ地震や災害が起こったとき、いかに早く正確な情報を入手できるかがとても重要だと思います。

スマートフォンの普及もあって、さまざまな情報を誰でも手に入れることが可能になってきてますし、アプリを入れるだけでも備えができるのであれば是非やっておいて損はないのかなと思います。

過去に起きた災害を忘れないことは凄く大事だと思います。一方でそういった災害からなるべく多くのことを学び、万が一次の災害が起きた時に生かせるようにしておくことはとても大事なのではないかなと思います。

防災対策を見直す際の参考になれば幸いです。

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

【サービス】文字色と背景色の組み合わせがアリかナシかを判定してくれる「Accessible Brand Colors」

便利そうなサイトを見つけたので、うっかり忘れないようにまとめ。
文字色と背景色の組み合わせが「アリ」か「ナシ」かを判定してくれるサイト「Accessible Brand Colors」です。

サイトへのリンクはこちら。

Accessible Brand Colors by Use All Five
https://abc.useallfive.com/

このサービスを紹介していた記事はこちらから。

無料でデザイン上「アリ」な色の組み合わせをサクッと確認できる「Accessible Brand Colors」レビュー – GIGAZINE
https://gigazine.net/news/20190304-accessible-brand-colors/

利用方法も掲載しているので、こちらも合わせてご確認ください。

 

サービスの利用方法ですが、まずページにアクセスすると下記が表示されます。

あとは、右枠に2種類の色を選択するだけです。
画像だと既に選択済みですが、今回はなんとなくオレンジと緑を選択しました。
色を選択し終わったら、下の黒いボタン「Get Started」をクリックして、色の相性を判定します。

結果はこちら。

AAA が一番良く、続いて AAAA18 と続き、一番悪い評価は DNP です。
今回私が選択した色の組み合わせの評価は、DNP で、どちらを背景色・文字色にしても、悪い組み合わせになるようでした。
右のエリアに全ての組み合わせ(と言っても、今回は2パターンですが)のサンプルがあるので、パッと見て分かりやすいですね。
確かに、緑を背景色にしても、オレンジを背景色にしても、どちらも文字が読みづらいです。
流石にこの配色をチョイスることはないと思いますが…配色に悩んだ時に、こうして客観的に評価してもらえるのはとてもありがたいですね。

また、ここからさらに色を追加し、文字色・背景色の組み合わせを増やすこともできます。
色を追加しすぎて見にくい時は、AAA ~ DNP の左横にあるチェックボックスからチェックを外すと、その評価をされた色の組み合わせがグレーアウトするので、分かりやすくなります。

 

以上、背景色・文字色の組み合わせを評価してくれるサービス「Accessible Brand Colors」のご紹介でした。
私のように、配色センスに自信のない方は是非ご活用ください。

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

異世界の魔法使いのためのニュースサイト “MAHO ONLINE”

インターネットを利用する人口が増えたことに伴い、様々なニュースサイトが作られ、現在では膨大な数のサイトが日々たくさんの話題を提供しています。
そんなニュースサイトの中に、どうやら異世界のものが紛れ込んでしまったようです。

Maho ONLINE – 賢い魔法使いのための総合ニュースメディア

こちらで紹介されている出来事が起きている世界は、どうやら現実とは異なる仕組みによって動いているようで、現実のニュースサイトでは見ることがないであろう摩訶不思議なさまざまなニュースが紹介されています。

ちなみに、Twitterの公式アカウントもあり、ニュースの更新情報をつぶやいているようです。

たくさんの魔法使いたちがPCやスマホに向かって日々記事やTwitterの更新をしているのでしょうか?
そんな光景を想像したらちょっとクスっとしちゃいますよね。

あ、でもハリーポッターのような世界の魔法使いたちだったらあながち違和感ないかも…w

・・・

種明かしすると、こちらのサイトは虚構新聞のようないわゆる”ジョークニュース”サイトです。
ただ、こちらは虚構新聞のような現実に基づくパロディネタではなく、魔法の存在する世界、という一貫した世界観があります。(とはいえ、世界観を保ちつつ現実世界をパロディにしたネタもあって面白いです。)
ファンタジー好きとしては、異世界のニュースをのぞき見してしまったような感覚になれてとても楽しいです。

現実のニュースに少し疲れてしまった時、少しばかり異世界のニュースを覗いてみるとリフレッシュできるかもしれませんね。

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