カテゴリーアーカイブ TECH

takahashi 著者:takahashi

Webブラウザで動くVimとWebAssembly

ふとニュースを見ていたら、こんな記事を発見。

テキストエディター戦争は「Vim」がまた一歩リードか、Webブラウザーで動作可能に – 窓の杜

LinuxをはじめとしたOSでよく使われるCUIテキストエディタ”Vim”を、なんとブラウザ上で動作するウェブアプリケーションとして移植してしまった方がいるらしい。

ソースのページである
Vim を WebAssembly に移植した – はやくプログラムになりたい

というサイトから、デモページに飛ぶことができるようです。
実際にアクセスしてみました。

おおおすごい!
本当にVimがブラウザで動いてる!!!

まさかJavascriptで一から書き直したのか…!?!?
と思ってしまいますが、実はVimを”WebAssembly”という形式のバイナリにビルドすることによって動作を可能にしたとのこと。

WebAssemblyとは、ブラウザ上で動作するバイナリ形式の規格で、現時点ではC/C++やRustなどといった言語からバイナリファイルを生成し、WebAssemblyに対応したブラウザ上で直接実行できるとのこと。

この辺りの記事が詳しそうです。
【2017年4月版】WebAssemblyとは?〜実際にC言語をブラウザで動かす〜 – Qiita

記事の中にはUnityで作られたゲームをWebAssemblyでブラウザ上で動作させてしまうデモもありました。すげぇ…
ただ、現時点ではWebAssemblyからDOMの描画ができないようで、今回のVimの移植では、描画部分はjavascriptを利用しているとのことです。

Webプログラマなのにこういうこと言ってしまうのもアレですが、実は自分はJavascriptが”嫌い”です。
その理由の一つに、ブラウザによって動作速度が異なる(非常に遅くなる)、という点があります。
ライトなWebアプリなら全く問題はないのですが、ブラウザ側でどうしても重い処理をせざるを得ない状況になると、いつも大きな悩みの種になります。

今後、WebAssemblyのようにブラウザ上でバイナリを動作させられる環境が整えば、こういった重い処理を高速化する際の選択の幅が広がることになるので、個人的にはとても嬉しい話です。

また、CやC++を得意とした方が、Webプログラミングに参加しやすくなるという意味でも、非常にいい流れなのではないかなと思います。

是非実用的に利用できるレベルまで発展していってほしいですね…!

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

公式Web版Twitterでユーザー切り替えを可能にする拡張機能”Twitcher”

自分は普段からTwitterを利用していて、場合に応じて複数アカウントを切り替えて使用しています。

スマホアプリTwitterなどでは公式でこの”アカウントスイッチャー”の機能がついているのですが、Web版にはまだ実装されていません。
そのため、アカウントを切り替えるために毎回ログアウト、ログインを繰り返さなければならず、毎回IDも入力しなければいけないのでなかなか面倒です。

なんとかしてアプリ版Twitterと同じ使い勝手を同じにする方法ないかな、とさがしたところ、Chromeの拡張機能でありました!流石。

Twitcherという拡張機能です。

まずはストアから拡張機能をインストールします。

インストール完了すると、右上にメッセージが表示されます。
この状態で、Twitterに普通にログインします。

ログイン後にメニューを開くと…

“Add Account”という文字が追加されていますね。
ここをクリックすると、


再びログイン画面が表示されるので、今度は別のアカウントでログインします。


赤枠の部分にさっきまでログインしていたアカウントが追加されましたね!
このアカウントの名前をクリックすると、再び最初にログインしていたユーザーにID・PWの再入力なくスイッチできます。

公式のモバイル版Twitterアプリと全く同じ操作感でアカウントの切り替えができるので非常に楽になりました。

複数アカウント運用をされている方は是非試してみてはいかがでしょうか?

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

Cookieの罠。PHP(サーバー側)からCookieを取得・設定すると遅延する!?

今回、盛大にハマったので記事にします。

詳細はいろいろな事情があって公開できないので、それっぽいコードで説明します。
いま、PHPを使ったWebアプリを開発しているのですが、このアプリはいろいろな事情からCookieを多用する設計になっています。

そしてこのCookieは基本的にPHP側(サーバーサイド)で書き込みを行うようにしています。PHPで書いた方が処理が簡単だったからです。

フレームワークとしてFuelPHPを使用しているので、下記の関数でCookieの操作ができます。

//Cookieの設定
Cookie::set(クッキーのキー, クッキーに格納する値, 有効期限, cookieを有効にするWebページのパス, cookieを有効にするドメイン, $secure = セキュアな接続の時のみ cookie を送信するか否か。, http経由での接続でのみ有効にするか否か);

//Cookieの呼び出し
Cookie::get(クッキーのキー, クッキーが取得できなかった時に返す値);

詳しくはこちらを参照してください。
Cookie クラス – FuelPHP 日本語マニュアル

で、例えば下記のようなコードを書いたとします。

$a="hoge"
$result = Cookie::set("testkey",$a); //Cookieの送信に成功すればtrueを返す。
$b = Cookie::get("testkey",""); //書き込んだCookieを取得。

echo $result;
var_dump($a); //①
var_dump($b); //②

としたときに、$resultが”true”になっていれば、①と②の出力結果は同一のものになる、のが期待する動作なのですが、場合によって、②の時点での$bの値が”hoge”ではなく””になってしまうという事態が今回発生しました。

そんな馬鹿なと何度も確認したり、Cookie::setする前に対象のキーを削除したりいろいろ試したのですが、解決せず。

ここでふと、Google Chromeに、自分が保持しているクッキーの一覧が表示できる機能があったことを思い出し、こちら側でも確認してみました。

調査したいページを開いた状態でChromeの開発者ツール内のApplicationタブを開き、左側カラムの

Storage->Cookies->対象のサイトのURL

と辿っていくと、そのURLで保存されているCookieの一覧を見ることができます。

PHPがわの表示といっしょに、こちらの値の変化も確認していたところ、ブラウザ側で見たCookie”testkey”の値にはちゃんと期待した値の”hoge”という文字列が見えていました。

サーバーサイドからブラウザにCookieを渡す場合、実際にはHTTPのレスポンスヘッダに値を入れてブラウザに渡しています。
ブラウザからWebサーバーに対して接続した際に、基本的に応答が返ってくるまでに少し時間がかかります。

よくよく考えれば、サーバーに対しての通信で多少の遅延が発生するのなら、ブラウザへ値を保存する際に遅延が発生しても不思議ではないですよね。

今回はこの遅延が原因で、サーバーサイドで値がうまく取れなかったのではないか、と結論付けました。

…ということで、Cookieの値を保存・取得する際は、多少遅延が発生する可能性があるのでCookieを扱う際は注意が必要かも…というお話でした(;´∀`)

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

[間もなくGoogle ChromeでSSL必須化。確認しておくべきこと。] WebサイトSSL化の際に潜む罠

前回の記事では、WebサイトのSSL化に必要な証明書について説明をしました。今回は証明書に加えてサイトのSSL化に必要なこと説明します。

実は、サイトのSSL化を行うためには、単にSSL証明書をインストールして”https://”でアクセスする…だけではダメな場合があります。

例えば、httpsのサイトにアクセスした際に画像の赤枠のような盾のアイコンが出てくることがあります。

実はこれ、Chromeによって、セキュリティ上の問題でサイトの一部のコンテンツをブロックした際に表示されます。

なぜブロックされたのかは”開発者ツール”を開いてみるとわかります。
F12を押してみてください。

画面の端に、赤枠のような部分が出てきます。
これが開発者ツールです。

たとえば、このページの1行目のエラー。
内容を簡単にいうと”このサイトはhttpsでアクセスしているのに、同サイト内にhttpでアクセスしているリンクが混ざっている。”

といった感じになります。
実は、サイト自体へのアクセスはhttpsになっていても、サイト内に含まれている画像、css、javascriptなどへのリンクがhttpになっていると、基本的にブロックされてしまいます。

これは、リンクされているコンテンツが不正に乗っ取られた場合、アクセス先のサイトがたとえhttpsであったとしても表示を改変されたり、入力した情報が盗まれてしまう場合があるためです。

こういったセキュリティ上の問題も確実に防止するために、Chromeをはじめとする最近のブラウザでは、httpsサイト内にあるhttpリンクをブロックする様になってきています。

ではどのように対策すればいいのか、というところですが、先ほど書いたようにjavascript、css、画像などへのリンクがhttp://で書かれてしまっていることが原因なので、それらをすべてhttps://で始まるように書き換えてしまえばOKです。

ただし、リンク先がSSLに対応していないと、httpsに書き換えただけでは利用できません。その場合はまずリンク先のサイトをSSLに対応させる必要があります。
また、もし自分で触ることのできないリンク先がSSLに未対応の場合、残念ながらSSL対応させたサイトでは利用できません。

代替えの方法を用意する必要があります。

少しでも参考になりましたら幸いです。

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

chromeがインラインインストール機能を削除

Google Chrome を使っていると、例えばセキュリティソフトなどをインストールした際、いつの間にか拡張機能が追加されていることがあります。
この機能は”インラインインストール”と呼ばれており、Chrome ウェブストアを経由することなく拡張機能をインストールする(させる)ことが可能になっていました。

ところが最近、このインラインインストールの機能を悪用する開発者が増え、Googleへの苦情が増加していたようで、しばらくは悪質な拡張機能とそうでないものを判別することで対応していたようですが、とうとう、全面的に廃止が決まったようです。

Google、Chrome拡張のインラインインストール廃止へ – スラド
Google、Chrome拡張機能のインラインインストールを終了へ 悪用への苦情受け – ITMedia

インラインインストール廃止は3段階で進められる。まず、6月12日以降に新規公開された拡張機能では既にインラインインストールが無効化されており、chrome.webstore.install()メソッドを呼び出そうとすると自動でChromeウェブストアにリダイレクトされるようになっている。9月12日以降は既存の拡張機能でもインラインインストールが無効となり、Chromeウェブストアへのリダイレクトが行われる。12月初めに安定版リリース予定のChrome 71では、インラインインストール用のAPIメソッドが削除されるとのことだ。

ということで、現時点で新規にインラインインストールされる拡張機能についてはインラインインストールさせようとすると自動でChromeウェブストアに誘導され、最終的にはChrome 71のリリース時点で機能そのものが無効となるようです。

ただ、ユーザーの許可を求めずにいきなりインラインインストールさせてくる無作法なアプリもあり、時にはインストールされていたことすら気づかないこともあったので、ユーザーがインストールされる拡張機能を確認した上でインストールできるようになることは、とてもいいことではないかなと思います。

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

CUI版Gitでパスワードを一時的に保存する方法

普段、Tortoise GitやSourceTreeなどのGUIのGitツールを使ってGitを操作しているのですが、ふとしたきっかけでCUIでGitを操作しないといけない瞬間があったりします。

最近のGitは、http経由で接続した際に、ちゃんとパスワードを聞いてくれます。

ただ、pullやfetchなど、リモートリポジトリへの問い合わせが発生するたびに聞かれるので、入力するのがちょっとめんどくさいときがあります。

今回は、入力した認証情報を一定期間キャッシュさせ、認証情報を再入力する回数を減らしてみたいと思います。
方法は簡単。

コマンドラインに、以下の一行を入力して実行するだけ。

git config --global credential.helper cache

注意しないといけないのは、このコマンドはユーザー単位で実行する必要があるという点。
root権限で実行しても、全ユーザーに適用されるわけではないので気を付けてください。

このコマンドを一度実行することで、次回からは一度認証情報を入力すると、キャッシュの有効期限が切れるまで再入力する必要がなくなります。

キャッシュの保持時間を指定することも可能です。

git config --global credential.helper 'cache --timeout=保持秒数'

上記のような手順を行った後、再度git pullしてみます。

こんな感じで、認証情報を聞かれることなく操作できました。

他にも、OSの機能などど組み合わせて、アカウント情報を永続的に保持するオプションなどもあります。
詳しくは下記サイトを参照してください。

git を https 経由で使うときのパスワードを保存する – Qiita

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

GitHub、Microsoftに買収される

以前からちらほら噂がでていたMicrosoftによるGitHubの買収ですが、ついに現実のものとなりそうです。

Microsoft、GitHubを買収か──Bloomberg報道 – ITMedia
Microsoft、GitHubを買収か? – Tech Crunch
マイクロソフトがGitHubを買収か、交渉が再開したとの報道 – THE BRIDGE

GitHubはソースコードの分散バージョン管理システムである”Git”をベースに、成果物に対する不具合報告や議論をする機能(Issue)、Gitプロジェクトのフォークなど、多くの人でソフトウェアなどを開発・共有していくのに必要な機能を提供する高機能な開発者コミュニティサービスです。

GitHubが特徴的なのはその料金体系で、GitHub内の自分のプロジェクトのソースを誰でも見えるように設定した場合に限り、無料で機能を利用できる(つまり、ソースを非公開にする場合は有料となる)となっており、オープンソースコミュニティが使いやすい仕組みになっているため、マイナーなものからNode.jsのようなメジャーな物まで今やかなりの数のオープンソースプロジェクトがGitHubを開発スペースとして利用しています。

最近では、GitHub前提で構築されているパッケージ管理システム(自動でGitHubからソースやバイナリをダウンロードし、利用可能な状態にしてくれるツール)も多く、もはやGitHubは”オープンソースの要”といっても過言ではないと思います。

今回、Microsoftに買収される可能性が出てきたということで、個人的に気になるのが”中立性”の問題。
オープンソース業界全体において、”自由な開発”が担保されているかどうか、というのは常にセンシティブな話題です。
例えば、もしもの話ですが、GitHub買収後にMicrosoftが自社の経営戦略にそぐわないGitHub上のプロジェクトを排除しようと思えば恐らくできてしまうでしょうし、そうでなくても、GitHubのサービスをMicrosoftのサービスに特化させたような仕様に変更してしまえば、GitHubを使う他の企業やプロジェクトに対しても不公平が生じてしまう可能性がでてきます。

最も、昔と違って最近のMicrosoftはオープンソースに対してかなり友好的かつ積極的な印象で、Microsoft自身も最近はオープンソースアプリをリリースしたり、自社製品に取り入れたりするようになったので、恐らく上記のようなことが起こらないように慎重な配慮をしていくのではないかと個人的には思っています。

ただ、飽くまでMicrosoftはプロプライエタリな製品がメインな企業なので、今後オープンソース業界全体がどのような反応を見せるのかはとても気になるところです。

個人的には、なんだかんだ言って開発者の多くがWindowsなどのMicrosoftの製品を使ってますし、今までのGitHubにプラスαされる形でより開発しやすくなるような機能が追加されていったらいいな、と思っています。

GitHub

そもそもGitHubとは一体何か? – Tech Crunch

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

NHKラジオがRadikoでリアルタイム配信の試験を開始

先日、ふとRadikoを立ち上げたところ、NHK系列のAM/FM局が選局リストに追加されていました。

NHKはもともと、独自のサイマル放送サイト”らじるらじる“で配信していて、例えば、スマホで今いる地域のラジオ局を可能な限り網羅しようとする場合は、Radikoアプリとらじるらじるアプリの両方を入れる必要がありました。

そんなNHKとRadikoですが、NHKと民放連との共同ラジオキャンペーンの一環として、2018年4月12日から2019年3月末まで、全国47都道府県でradiko.jpからNHKラジオが聞ける実験配信を開始したとのこと。

radikoでNHKラジオの実験配信、4月から全国で 無料でライブ聴取可能 – くらテク

ということで、当分の間は多くの地域でRadikoアプリ一つでNHKも含めた各局のラジオを高音質で聞くことができます。

折角なので、普段ラジオをあまり聞かないよ~という方もこの機会にラジオの魅力を再発見してみてはいかがでしょうか?

Radiko.jp

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

Windows版Twitterアプリが久々の更新

先日、TwitterのWindows向けアプリが超久々にアップデートされました。

Windows 10向け「Twitter」アプリが刷新、“Progressive Web App”として生まれ変わる – 窓の社

Twitter for Windowsはここ最近まったくといっていいほどアップデートされておらず、一部新機能も利用できない状況でした。
個人的にはMac版Twitterクライアントと同様に廃止になるのかな…と思っていたのですが、先日突如としてアップデートが降ってきました。

上記の記事にも書かれていますが、このアップデーはおそらくWindows10にPWAの機能が実装されたことによるものだと考えられます。

Windows 10における“Progressive Web App(PWA)”は、Webアプリをネイティブアプリのように使えるよう、UWPアプリとしてパッケージ化したものと言える。一般のUWPアプリと同様、「ストア」アプリからインストールし、[スタート]画面やタスクバーにピン留めして起動可能で、独立したウィンドウをもつが、実質は「Microsoft Edge」上でWeb版“Twitter”を表示しているに過ぎない。

つまり、一見WindowsネイティブなUWPアプリに見えるわけですが、実際はただアプリ内でEdgeブラウザを呼び出して特定のサイトを表示している形になっているようです。
かといってブラウザ版と同じというわけではなく、アプリならではのメリット(UWPアプリの”共有”機能や通知など)も享受できるという仕組みです。所謂AndroidやiOSアプリの”ハイブリッドアプリ”と同じような仕組みです。

恐らく、開発コストの少ないWebベースのアプリであれば、公開し続けられるだろうという判断になったのだと思います。

ただ、Webベースであればアプリを公開できるということなら、既存の仕組みでElectronなどもありますし、macやlinux版もリリースしてくれればよかったのに、と思わなくもありません。

いくらWebを表示しているだけとはいえ、ブラウザを開くことなくワンクリックでアクセスできるかどうかでかなり使い勝手が変わってきます。
Windows以外のデスクトップOS用のクライアントも復活してほしいですね。

Twitter – Microsoft Store

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

google play music から youtube remix

年内に Google Play Music が終了するらしい記事。

「Google Play Music」、年内に終了し、ユーザーは「YouTube Remix」に統合か? – ITmedia NEWS

自分の持ってる CD をせっせと Google Play Music へアップロードして使い始めたばかりなのに。

勿論、自分のCDなので無料枠ですがw

YouTube Red のウェブサイトをみる限りでは同様の音楽機能がありそうですが、まだ日本では利用出来ない様です。同額で有料動画サービスもできる様になるよ、ということか。

無料枠はあるのだろうか。心配です。有料化になり辛い時代になりましたね。

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