カテゴリーアーカイブ TECH

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)
takahashi 著者:takahashi

Appleの発表会 “Apple Special Event It’s show time.” いよいよ今夜未明にスタート

Appleの春の発表会である”Apple Spetial event” 今回は”It’s show time.”というタイトルで行われるようです。

Apple Special Event – Apple

今回はハードではなく、何らかの定額制サービスを発表するのではないかという見方が大きいです。

【今夜2時から】Appleイベントで発表されそうなものまとめ! 動画サービス、ニュースサービス and more! – GIZMODO

一方、ガジェット専門ニュースサイトのGIZMODOさんの記事では、加えて新型iPod Touchが発表されるのではと予測しているようです。

えて新型iPod Touchが発表されるのではと予測しているようです。

果たして各ニュースサイトが予測する内容通りの発表がなされるのか。
それともだれも予想していなかった何かが発表されるのか。

楽しみですね。

なお、公式放送に合わせて、同時翻訳を行うYoutubeチャンネルもあるようですので、英語わからん…という方はチェックしてみてはいかがでしょうか。

“It’s show time.” メディアイベント日本語同時通訳

Appleスペシャルイベント「It’s show time」のライブ中継サイト一覧(日本時間3月26日午前2時〜)- gori.me

  • この記事いいね! (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

テレビでもラジオでもない放送形態 i-dio (アイディオ)音楽好きにはうれしいサービスかもしれない。

TVでもラジオでもない、第三の放送形態として、”i-dio”というサービスが始まっているのをご存知でしょうか。

i-dio


新放送サービス『i-dio』は、地上アナログテレビ放送終了後に空いた周波数帯 (VHF-Low帯=99MHz~108MHz)を利用して創設された、既存のテレビでもラジオでもない全く新しい”第3の放送”です。受信機をお持ちであれば、契約などは原則必要ありません(今後有料サービスが個別に提供されることがあります)。
「i-dio」は、映像・音響・データなど、デジタルデータなら何でも送ることが可能です。また放送波で送信するため、通信とは異なり、輻輳もなく、不特定多数に情報を送ることができます。好きなときにコンテンツを楽しむことが出来る、蓄積型放送も予定しています。

http://www.i-dio.jp/service/

ということで、はじめからデジタルデータで送信することを前提にしており、映像も音声も送ることができ、なおかつ音声放送は高音質で送ることも可能とのことです。

なお、現在は音楽を中心としたコンテンツを配信するチャンネルが多いようです。

i-dioを受信するには専用のチューナーが必要ですが、現時点で既に(Radikoのような) サイマル放送も行わており、専用アプリからインターネット回線を経由して放送を聞くことも可能なようです。

TS PLAY by i-dio

TS PLAY by i-dio

VIP Co.,Ltd.無料posted withアプリーチ

従来の浜松で聞けるラジオ放送のうち、音楽メインのチャンネルといえば平日の”ラジオ日経第二”ぐらいしかなかったので、音楽好きにとってはありがたいサービスかもしれません。

興味のある方は一度試してみてはいかがでしょうか。

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

Google Chrome でオフライン時に出てくる恐竜をオンライン状態のままで出す方法

GoogleChromeに仕組まれているイースターエッグの一つに、インターネット回線がオフライン時に出現する恐竜があります。

この状態でスペースキーを押すと

こんな風に、障害物走ゲームが始まります。

単純ですが結構中毒性があって、自分の場合、それとなくやり始めてもいつの間にか熱中してしまうこともあります(苦笑
そんなこのイースターエッグですが、唯一の難点が”オフラインでないと見ることができない”という点。

ふとした拍子に”あの恐竜の障害物走ゲームをやりたい”と思った時、一度Chromeをオフライン状態にしないといけません。

しかし、OS側を操作して物理的にオフライン(例えばWi-Fiを切る、LANケーブルを抜くなど)にしてしまうとシステム全体に影響してしまうので、ちょっとやりたくないですよね。

実は、OS側は一切触ることなく、Chromeの特定のタブだけオフライン状態にする裏技があります。

Chromeで新しいタブを開いた状態でF12キーを押してみてください。

すると、画面の一部分に赤枠のようなエリアが表示されます。

これは、Webサイトの動作のデバッグなどに使われる”開発者ツール”と呼ばれる機能で、Web開発者が開発を行う際に便利な様々な機能が搭載されています。

その開発者ツールの右上あたりに縦に点が3つ並んだアイコンをクリックするとメニューが表示されます。

メニューの中から

“More tools”->”Network conditions”

という項目を選択すると、下記画像のような画面が表示されます。

この中にNetwork throttingという項目がありますが、実はこれ、ネットワークの状態をエミュレーションしてくれる機能となっていて、通信速度を携帯回線と同様にしたり、オフライン状態にしてしまったりすることができるようになっています。

プルダウンメニューからOfflineを選びます。

これで、実際にはインターネットにつながったままの状態で、特定のタブだけオフラインにすることができました。

これでインターネットにつないだまま、いつでもどこでもこのイースターエッグを楽しむことができますね。

オフライン状態は先ほどの Network throtting のプルダウンメニューから”Online”を選ぶか、タブを閉じることで解除できます。

ちなみに、今回紹介したネットワークの状態のエミュレーションは、Webアプリ側で非同期通信(Webページの読み込み完了後に後から通信して情報を追加取得するような仕組み)機能を付けた場合の動作のデバッグにも利用することができます。

たとえば、通信に失敗しても、javascriptがエラーで停止することなく例外処理ができるか、などを実際にチェックしたり…などのテストに使えます。

興味がある方は是非試してみてください。

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