REMPをhttps化した


2011年に@hika69@getsukikyuの3人で作ったREMPを重い腰を上げてhttps化(常時SSL化)した。重い腰だが一回作業を始めるとそれなりのテンポで進められたのでよかった。手を付けても進まなかったら辛い。Let’s Encryptを使ったのだけど、いろいろ事情*1があってゴニョゴニョした後、nginxに設定したのでスッキリしたやり方にしたい。と思いつつなかなか、なかなか。

やり方はともあれ、こういう形や手続きをもってWebサービスなりアプリが接続する先のAPIが運営されているということを把握できる様にしておきたい。職業としてインターネットを介したサービスを提供している会社に勤め、生業としているので。

www.remp.jp

*1:聞く人が聞くと呆れる可能性があるので詳細は割愛

REMPチーム忘年会


餃子の様子です。

会社の近くの中華屋さんでREMPチームの忘年会だった。

特にコースなどは頼まず食べたいものをどんどん頼もうスタイルで餃子、ビール、酢豚、紹興酒ピータン豆腐、レモンハイ、麻婆豆腐…(以下続く)… などと食欲をひたすら満たす感じでとても満足。

今年はCastoを作ったり、Casto用のcliツールを作ったりと今年もあれこれできてとても良かった。

ふと思ったけど、この面々で続けられているのは、とにかく「無理せず細く長く気が向いた時にガッとやる」ところが長続きできているコツかもしれないと勝手に思ってる。


REMP for smartphone


といってもスマートフォンアプリじゃないのが僕らのやり方です。

f:id:hideack:20131118233511p:plain

YouTube動画を連続再生できるWebアプリ REMP(http://www.remp.jp/hello)スマートフォンビューに対応しました。

PC上で作成したプレイリストをそのままスマートフォンでも確認できて再生もできます。是非お試しください!

Chrome拡張 "REMP it"

REMP用Chrome拡張 “REMP it” をリリースしました!Chromeで表示中のWebページ内にある複数のYouTube動画をプレイリストとして一度に取り込むことができます。インストールは URL から!2013-10-16 09:35:37 via YoruFukurou YouTube動画を連続再生できるWebアプリREMP用Chrome拡張 “REMP it” をリリースしました。 これを利用すると、Chrome拡張のアイコンをクリックするだけで、閲覧中のページ中に埋め込まれているYouTubeのリンクからREMPのプレイリストとして取り込むことができます。 インストールはC…


YouTube動画を連続再生できるWebアプリREMPChrome拡張 “REMP it” をリリースしました。
これを利用すると、Chrome拡張のアイコンをクリックするだけで、閲覧中のページ中に埋め込まれているYouTubeのリンクからREMPのプレイリストとして取り込むことができます。

インストールはChromeウェブストアから簡単にできますので是非お試しください。

初めてChrome拡張書いてみて

今回初めてChrome拡張を作ってみたのですが、最初とっきつきにくいところもあったのですが、一度概要を飲み込めれば比較的作りやすく、また情報もWeb上に大量に公開されているので参考になります。

注意点としては、Chrome拡張で定義するmanifestのバージョンが現在は2ですが、リリース当初の情報も数多く公開されているままの状態なので、その辺りを気をつけて参照する必要はあります。

Chromeで実際に配布したり、利用できる様にパッケージ化するのにはcrxmakeというGemを使うとrakeタスクですぐにパッケージを生成することが出来て便利でした。

具体的な実装の箇所で試行錯誤したのは、Webページ中のYouTubeリンクを列挙する処理で、このあたりは素直に以下の様な形で走査してます。

var parser = function(target, property) {
var $frames = $(target);
var ids = [], url, match, i;
var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
for (i = 0; i < $frames.length; i++) {
url = $frames[i][property];
match = url.match(regExp);
if (match && match[7].length == 11) {
ids.push(match[7]);
}
}
return ids;
}
linkVideos = parser('a', 'href');
iframeVideos = parser('iframe', 'src');
paramVideos = parser('param', 'value');

また、同一ページ中に複数の同じYouTube動画のURLが含まれることもあり得るので、このあたりは上記の複数の走査結果をunionさせるのにunderscore.jsarray function使って

videos = _.union(linkVideos, iframeVideos, paramVideos);

としています。またChrome拡張で表示されるポップアップのHTMLを生成する際のtemplateも利用しています。underscore.js 便利。

もろもろ実装した内容は、Githubのhideack / remp-chrome-extensionに公開しています。

何かリクエスト等あれば、上のgithub issueやコメント等で頂ければ幸いです。

REMPに任意のプレイリストを取り込むガジェット


REMP にプレイリストを取り込むガジェットを作ってみたりしている昼下がり。デザインは追って調整…。

下のボタンを押すとREMPにPerfumeYoutubeに上がっている公式動画がプレイリストとして取り込まれます。*1

*1:REMPにログインしている必要ありますが….

Youtube動画を連続再生できるREMPのその後(7) – IMEと連携しましたよ


大分時間が過ぎてしまったのですが、思い出した様にエントリ投下。

IME という素敵なプレイリスト共有サービス*1があるのですが、REMPで作成したプレイリストを出力できる様になりました。

REMPfacebookログインが必要で、ログインするとfacebookでつながっている友達の範囲で作成したYoutube動画のプレイリストをシェアできたり、そもそも個人でYoutube動画を連続再生したりお気に入りの動画集を作るのが主目的になっていたのですがIME で出力することで誰でも利用することができるプレイリストを作成することができます。

例えば、下の様な形プレイリストを作成できます。


Perfumeベスト / プレイリスト共有なら IME – Internet Music Explorer


さらなる素敵なREMP ライフを。

*1:と、書いていますがごく身近な同僚が運営しているという…

Youtube動画を連続再生できるREMPのその後(6) – トップページ少し変更


今後もう一段階変わる予定なのですが、新規流入等々の数字を見た結果、手短に変えられることをやってみようということで変えました。

http://instagram.com/p/aAQPtUSdbt/

今後、もう一段階ガラッと変わる予定。

連続再生できるので作業するときに音楽かけっぱなしにしたり、コーヒー飲みながら何気に眺めたりするのに便利ですよ。*1

REMPはこちらから。
http://www.remp.jp/hello

*1:多少ステマ感

GW前半


GW前半ですが、全く普段の週末と変わらない過ごし方をしております。
REMPでやれる作業を進めようかと運営関係者が閲覧できる管理画面などを作っておりました。最初はPadrinoのadminで作ろうと考えたのですが、結局スクラッチしました。

f:id:hideack:20130429163659p:plain

利用状況や再生されている動画のランキングやログインアクティブ数などをとれる様にして便利。あとは本体のチューニングもしていったり新機能出したりしていって、もっとたくさんの人に使ってもらえる様にしたい。

Youtube動画のプレイリストを連続再生できるREMPのその後(4) – twitter連携


いままで、REMPfacebook連携して、facebookで友達関係にある人の間でプレイリストを共有したり、自身のウォールに再生している動画の情報を流せたりしたのですが、今回からtwitter連携して自分が再生している動画の情報をツイートできる様になりました。

動画を再生しているYoutubeの埋め込みプレイヤーの下にボタンが追加されています。

あと、ツイートされた時には簡単に単体のビデオがリピート再生することができる専用ページが開かれます。
例えば下の様な具合になります。

http://www.remp.jp/video/youtube/V6Tsrg_EQMw

更に今も他に機能を追加すべく準備しているので引き続きささやかにご期待くださいませ。
REMPはこちらから。

http://www.remp.jp/hello