読者です 読者をやめる 読者になる 読者になる

ピティナ開発者ブログ

全日本ピアノ指導者協会のIT担当者が気まぐれにつづる技術系中心のブログです


Firebaseで「この記事は現在●人が閲覧中」を実装

Hiroyuki Noguchi Firebase

はじめに

しばらく前からプライベートでは登録したまま放置していたFirebaseを使ってみました。

firebase.google.com

きっかけは、以下の記事。

tech.plaid.co.jp

確かに、「●人が閲覧中」が手軽に実装できれば面白そうだなーと思って触りはじめてみたら、上記の記事には具体的な実装例までは書かれていなくて、なんとなく「やってやる、やってやるぞ!」(CV:島田敏)な気持ちになってきたので、意地で実装しました。
今、右下に表示されていると思います(Smoochのチャットボタンの真下あたりに)

Firebaseを使う準備

まずはFirebaseに登録!
登録はほんと簡単で、Googleアカウントがあれば何も入力する必要もなく、そのまま完了します。
続いて、アプリを作成する~という過程に進んでいきますが、このあたりまでは特に解説必要ないかな……と。
WebのSDKを選ぶとJavaScriptコードが発行されるので、指定通りにページのフッタの方へinitializeコードを設置しましょう。

とりあえず書き込む

じゃあ、具体的にデータベースへの書き込みをおこなってみます。

続きを読む

OS X El Capitanでvagrant upできなくなった!

Ai Nakazawa 環境構築 Mac

初めまして。開発チーム唯一のMacユーザNakazawaです。
今回不可思議な現象に出くわし、なんとか解決できたのでその一部始終を記してみます。

とりあえず起動時のエラーをなんとかしたい

これまでOS X El CapitanにてVagrant+VirtualBoxでローカル環境をつくり、機嫌よく作業していました。 が、ある日突然OS起動時に

CoreTelephony Trace File Error

というダイアログが出るようになり、「?」と思いながらvagrant upしようとしたところまたエラー。 どうやらVirtualBoxが立ち上がらないようです。

試しにVirtualBoxのみ起動しようとすると

COMオブジェクトの作成に失敗しました。アプリケーションを終了します。

シーン・・・。まさかまた諸々の設定をやり直すのか・・と 悲しみが胸を去来しましたが、 そのあたりの心の問題は割愛し、 結論から言うと、OSをmacOS Sierraにアップデートしたところ、起動時のエラーはなくなり、 VirtualBoxも立ち上がるようになりました。

状況が許せばこれが手っ取り早い方法かもしれません。

続きを読む

Riot.jsとjQueryのページロード時間比較

Riot.js Masato Hirata JavaScript

こんにちは。最近は長袖一択の新人社員平田です。前回もRiot.jsについての記事を書きましたが、ふと疑問に思ったので今回はRiot.js、jQueryを使った簡単なDOMの生成速度について検証してみました。

動作環境

riotjs.com

Riot.jsのバージョンは、比較的最近まで2.3だったと思っていたら、最新バージョンはいつの間にか2.6.4になっていました。開発が活発に行われていることの証左ですね。

今回は長い文字列を一文毎に区切り、一文が長い順に並べたあとに、カードパネルでそれぞれを囲んだものを表示するものを作りました。 長い文字列として採用したものは、何故かこのブログでよく使われる方丈記で、9400文字程度あります。

続きを読む

FileMakerのフィールド定義「索引>デフォルト言語」設定による検索速度の差異比較検証

Hiroyuki Noguchi FileMaker

はじめに

FileMakerのフィールド定義「索引」「デフォルト言語」設定による検索速度検証以前に以下の記事を書いたのがもう半年前なんですね(遠い目)

ptna.hateblo.jp

この時に用意したファイルを応用して、引き続き、FileMaker(以下:FM)での「少しでもパフォーマンスを改善するにはどうしたらいいか?」を考えていきましょう。

今回は、データベース管理 > フィールド定義 > データの格納 > 索引における、「デフォルト言語」によって、検索速度にどう違いがでるのか、というのがテーマです。

われわれは日本人なので、日本語にローカライズされたFMProを使っていますから、フィールド作成時のデフォルト言語の設定は、「日本語」になっています。
ここの設定を変更することができますが、日本語が取り扱えるものとして、他の選択肢としては「Unicode」に限られますね。
なので、「日本語」と「Unicode」のどちらの設定にするかでパフォーマンスの差異を比較してみます。

なお、検証環境は、 FileMaker Pro Advanced 15.02 になります。

準備

まずは前回同様に、一つのテーブルに、二つのテキストフィールド a b を作成します。
それぞれ、フィールド定義で、索引のデフォルト言語を「日本語」「Unicode」に設定します。

続きを読む

Riot.js+jQuery UIでのtrelloライクなGUIの作成

Masato Hirata JavaScript Riot.js

こんにちは、半袖と長袖の切り替えタイミングが良くわからない新入社員の平田です。 今回はRiot.jsをメインに、ドラッグ&ドロップのある簡単なGUIの作成について書いてみます。

Riot.jsについて

最近乱立しているJSフレームワークの一種です。Riot.jsをどのように使うかということについては、Qiitaの記事ですが、 Riot.js ことはじめが参考になります。

qiita.com

また、Riot.jsの公式ホームページにも使い方の詳細が載っています。ただ、ちょっと難しいので実際に作る段になってから参考にしています。

riotjs.com

他のJSフレームワークを使ったことがないのですが、個人的には学習コストが低く、ライブラリのサイズも小さいことが大きなメリットかなと思っています。あとは「パット見でなんとなく把握できる」ということも大きいですね。小規模なアプリケーションならわざわざCakePHPRailsのプロジェクトを作らなくてもRiot.jsでかなり自由に開発ができます。

カスタムタグの作成

Riot.jsでは予め「カスタムタグ」という形でDOMを作っておいて、 それを読み込む場所にそのままカスタムタグを書く流れになっています。実際に自分で作ったタグをその場所に生成することをマウントと呼びます。

続きを読む
この記事は現在0人が閲覧中