カテゴリーアーカイブ TECH

takahashi 著者:takahashi

日本全国の神様の所在地が一目でわかるWebサービス”神さまマップ”

日本には古来より、”八百万の神々”というあらゆるものに神様が宿っている=無数の神様がいる、という考え方があり、いろんな神様を祀った神社が日本全国各地に存在しています。
神社によって祀られている神様もさまざまであり、どんなご利益があるのかも神社によってさまざまです。
そんな全国の神社の所在地や地域ごとの多さを、地図上から一目で確認できるサービスがニュース記事で紹介されていました。

全国の“神様分布”地図で一目瞭然 「神さまマップ」ホトカミが公開 – ITMedia

試しに神社が多そうな京都・奈良あたりを出してみます。

流石、赤くなっている場所が多いですねw

他の地域で神社が多そうなところも見てみます。
毎年10月には全国の神様が集まるという出雲大社がある島根県出雲市周辺。

神社が集中していることを示す赤い部分は少ないですが、出雲市周辺はしっかり赤くなっています。

そして意外だったのが首都圏。

かなり赤い地域が多いです。
首都は人だけでなく神様も集まっているようですね。

ちなみに、会社のある浜松市周辺ですが、

赤くなる程ではありませんが実は多くの神社があるんです。
ちなみに、位置情報ゲームのIngressも浜松市はそのポータルの多さから”聖地”と呼ばれることがあるようですが、

ポータルが多い理由もうなずけますねw

神さまマップ – ホトカミ

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

さわやかに予約システムが導入されていた!?

静岡県民なら一度は食べたことのあるさわやかのハンバーグ。

 

県外からのお客さんも多く、休日昼に近所のさわやかを通る時は必ずといっていいほど行列を目にします。

 

そんなさわやかにもついにスマートフォンを使った予約システムが導入されたようです。

今まではボードに名前を書いて待っていたのですが、あまりに長いと外で買い物したりして時間つぶしますよね。でもいつ呼ばれるか分からない、名前飛ばされたらどうしようって不安にかられてしまいます。

 

でも、導入された予約システムを使えば自分の番がいつなのか簡単に知ることができるみたいです。

 

使い方は二つあり、一つ目は受付の発券機を使って人数を入力します。機械にも番号が保存されるので、券を持っていれば飛ばされることがなく確実に自分の番がきます。(せっかく書いた名前がスルーされるってよくあるみたいです。)

 

二つ目は、QRコードをつきます。これを読み込んで自分が今何番目かを知ることができます。人がいっぱいでに外に出たいなって時に使えば、自分が後どのくらいでよばれるかをスマホで確認することができます。

 

自分はつい最近知人から教えてもらったので、地元のローカルなレストランがこんな近代的なシステムを使っているのにびっくりしました。

機会があれば覗いてみたいと思います。

 

 

 

 

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

やりたいことはある!!!…だけどなかなか進まない。そんな人のためのWebサービス”進捗ノート”

趣味などで達成したいことがある!
…でもついついサボってしまってなかなか進まない。

なーんて経験あったりしませんか?
皆さんも一度は経験があるかとは思います。
こういう時って”つぎこそは!”と思っても何故かなかなか進まないんですよね。

最近、自分も含めそんな悩みを抱えているかたの強い味方になりそうなWebサービスを見つけたのでご紹介したいと思います。

その名も”進捗ノート

自分の計画や実行中の物事の進捗を公開して、進捗度合いを報告できるWebサービスです。
シンプルですがありそうでなかったアイデアのつまったサービスになってます。

使い方は簡単。
まずは自分のTwitterアカウントでログインします。

マイページから、新しいプロジェクトを作成します。

プロジェクトは、自分が挑戦する”物事”ごとに一つ作ります。

プロジェクト作成後、マイページから、プロジェクトの詳細や状態などを編集できます。

現在のプロジェクトの状況に合わせてステータスが設定出来たり(構想中・進捗中・お蔵入りetc…)

プロジェクトの公開範囲を指定できたりなど、オプションも充実していて、自分に合った使い方ができるようになっています。

それぞれの進捗に対してウォッチ(≒フォロー。ほかのひとのプロジェクトをお気に入り登録して、状況を自分のホーム画面で閲覧できる)したり、応援メッセージを送ったりできるようになっています。

逆に、自分のプロジェクトの進みが悪いときは”進捗どうですか?”メッセージをもらうことも可能。お互いに励ましあいながら目標達成できる、素敵なWebサービスとなっています。

やりたいことができても、いつも途中で止まってしまう。

そんな悩みを抱える皆さん、今回こそは進捗ノートで”目標達成”してみませんか?

進捗ノート

なんというやる気製造サービス……! 創作物について気軽に進捗報告できる「進捗ノート」が創作勢にありがたい – ねとらぼ

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