500点出す！ - ゆーすけべー日記
「Web Speed Hackathon 2022」という「非常に重たいWebアプリをチューニングして、いかに高速にするかを競う競技」があります。 リモート参加で11月1日から27日まで開催されています。 ここで言う「高速」とはCore Web Vitalsのスコアが高いことを言い、Lighthouseのスコアをベースにした500点満点の争いです。 ISUCONのフロントエンド版ですね。 以前にも同じ課題で「学生向け」と「社内（サイバーエージェント）向け」が行われたらしく、まだ500点を出した人はいません。 そこで僕は「満点を出したい」と思い、初日から、いやむしろフライングしていたからその前から頑張ってきました。 そして、先日（17日）、ついに500点満点を出しました！ たぶん、レギュレーションはクリアしている、はずです（もし違反してたらすいません…）。 自動で行われる「Visual Re
CDNのエッジで実行する系が面白い
先日の Next.js Conf で Vercel は Next.js の新しいバージョン「12」をリリースした。 興味深いのは、Vercel は同時にEdge Functionsというサービスを開始したことだ。 Edge Functions – Vercel 謳い文句のひとつに Push your functions to the edge とあるように、「エッジ」で実行される「関数」を提供するプラットフォームである。 ここで言うエッジとはなにかというと、Vercel は明言していないが CDN のエッジのことだ。 Vercel の例のように「CDN のエッジで実行する系」が増えている。例えば以下の 7 つだ。 Cloudflare Workers Fastly Compute@Edge AWS CloudFront Functions AWS Lambda@Edge Deno Depl
君はPornhubを知っているか - ゆーすけべー日記
Pornhubをご存知だろうか。 答えは当然Yesだろう。 ところがその本当の実態について我々は理解しているだろうか。 WikipediaのPornhubページには興味深い事柄が書いてある。 YouTubeに次ぐ世界第2位の動画共有サイト 360度動画を提供しており、PlayStation VRで視聴できる 上下運動で発電できるリストバンドを発明した 宇宙空間でポルノを撮影すると発表した VPNHubというVPNサービスを開始した これらのいくつかを恥ずかしながら私は知らなかった。 この恥ずかしさがモチベーションとなり、私はPornhubのポルノ以外のことを調べた。 出てくるものはアダルトコンテンツばかりだったが、 以下の3つのページに出会うことができた。 Pornhub Insights :: Digging deep into the data Interview with a Por
Oppai-Detect3 - ゆーすけべー日記
Oppai-Detectとは？ 画像のおっぱい部分を自動認識させる挑戦である。 目的 筆者はおっぱいが好きだ。そこでおっぱい画像をたくさん集めたい。 例えばその際に収集の精度を高めたいと思う。 そこで、おっぱい部分を自動で検出したらそれが可能になると考える。 応用例 Oppai-Detectの社会的に貢献できる応用例は以下である。 放送禁止画像の検出（画像投稿サイトなど） スパム画像対策 青少年向け、サイトフィルタリング また、これを逆手に取ればおっぱい画像が勝手にたくさん集まるという筆者の企みもある。 手法 Intelが開発・公開したオープンソースの画像処理ライブラリ「OpenCV」を使用した。 これはパターン認識としての物体検出（Object-Detect）の機能を備えている。 画像認識において、学習（Training）と検出（Detection）がOppai-Detectにおいて重要
Android端末を持ってなくてもエミュレータでGoogle Play配布アプリを動かす - ゆーすけべー日記
iPhoneをずっと使っているのでAndroid端末、僕持ってないんですよねー。とはいえAndroidの環境でアプリの動作確認をしたかったりします。Nexus7のWifiモデルを買ってもいいんだけど、早急にGoogle Playで配布されているアプリをAndroidで検証したかったので、調べつつそれが出来ないかやってみました。結果、Android SDKの中にあるAndroidのエミュレータで動かすことに成功したので、その行程を紹介します。現時点で出来るってことで今後不可能になるかもってのと、自己責任でお願いします。 Android SDKが用意されていることを前提として、ざっくりと行程を紹介すると BlueStacksというソフトをインストールする そのソフト内でGoogle Playからダウンロード出来て動かせる、ただ使い難いのでSDKのエミュレータを使う Device IDなるAnd
Webアプリにおけるキャッシュ。オレオレ事例 - ゆーすけべー日記
Webアプリにおいて、アクセスやデータ量が多く/大きくなってくると、 バックエンドのパフォーマンスが低下しがちです。 MySQLなどのRDBMSにデータを置いている場合は適切に クエリーを改善する、インデックスを張る、といった策で解決する場合もありますが、 キャッシュを効果的に利用することでより高負荷に対応できる可能性があります。 また、外部APIへの問い合わせなど、どうしてもネットワークや他のリソースのレスポンスタイムに 引きずられる部分に関しては情報を手元にキャッシュしておくと何かとよいでしょう。 今回はWebアプリケーションのレイヤーで最近僕がどのようにキャッシュを使っているのか？ の事例を紹介しつつまとめてみたいと思います。 キャッシュについてとその基本 そもそもキャッシュとは、簡単にふわっと表現するならば、 「一時的に情報を手元の近い場所に置いておいて利用する手法、もしくはその一
たった一つのツイートでひたすらアイドル水着画像を集める - ゆーすけべー日記
元★ネタ たった10行のコードでひたすらアイドル水着画像をあつめる - UT Startup Gym たった3行のコードでひたすらアイドル水着画像をあつめる（Rubyだよ） - maeharinの日記 たった数行のコードでひたすらアイドル水着画像をあつめるのをGoutteで書いてみた - iakioの日記 やること なんだかよく分からないタイトルだと思うけど、間違っていないと思う！ 目的の仕様としてはNAVERまとめに張られた水着写真のimgタグを持って来て、 imgタグだらけの.htmlをダンプすれば嬉しいよね〜っていうスクリプトを少ない行数で書けるか？ 他の言語ではどう書くのか？みたいなことなんだけど... Perlでワンライナー書いてたら、Twitterのツイートに収まる文字数、つまり140文字以内になった。 コードをツイートするって言うと、なんか昔miyagawaさんが変態的なこと
ゆーすけべー日記
サキとは彼女の自宅近く、湘南台駅前のスーパーマーケットで待ち合わせをした。彼女は自転車で後から追いつくと言い、僕は大きなコインパーキングへ車を停めた。煙草を一本吸ってからスーパーマーケットへ向かうと、ひっきりなしに主婦的な女性かおばあちゃんが入り口を出たり入ったりしていた。時刻は午後5時になる。時計から目を上げると、待たせちゃったわねと大して悪びれてない様子でサキが手ぶらでやってきた。 お礼に料理を作るとはいえ、サキの家には食材が十分足りていないらしく、こうしてスーパーマーケットに寄ることになった。サキは野菜コーナーから精肉コーナーまで、まるで優秀なカーナビに導かれるように無駄なく点検していった。欲しい食材があると、2秒間程度それらを凝視し、一度手に取ったじゃがいもやら豚肉やらを迷うことなく僕が持っているカゴに放り込んだ。最後にアルコール飲料が冷やされている棚の前へ行くと、私が飲むからとチ
ゆーすけべー日記
以前出版社の方から「本を書かないか？」というお話をいただいて早2年以上。 紆余曲折ありましたが、来る11月20日（火）に本を発売することになりました！ 本の名前はズバリ「Webサービスのつくり方」です。 Amazonでは既に予約可能な状態になっています。 どんな本なのか？を特徴と共に紹介しましょう。 1. Webサービスをつくるプロセスを網羅的に 僕は今まで大小合わせてWebサービスを何個もつくってきました。 「つぶして」しまって今では見れないものが多く申し訳ない点もありますが、 サービスをつくることは非常に楽しいことです。 僕の専門分野はおそらく「Webアプリケーションエンジニア」ではありますが、 特に小粒なサービスの場合においては企画をつくったり、プロモーションしたり とWebサービスをつくって運用する全ての行程＝プロセスを一人で踏んでいくことになります。 こうした網羅的なノウハウが一
YAPC::Asiaで発表＆ベストトーク賞1位をいただきましたー - ゆーすけべー日記
世界最大級のPerlの祭典「YAPC::Asia 2012」に参加＆トークして来ました。 そして参加者の投票で決まるベストトーク賞をいただきました！ 60個ほどのトークの中での1位です！ありがとうございます＞＜ どうやらベストトークの賞品が「YAPC::NA または YAPC::Europe へ派遣」ということで、 来年ヨーロッパもしくはアメリカのYAPCに行って発表してきます。 発表する際、エロ禁止って言われたので、 それ以外のネタを探りつつ、エロネタをなんとかごまかして喋れないかなーと策略をこれから 練ろうと思います。楽しみです。 ベストトーク賞は確か前々回のYAPC::Asiaで導入されました。 過去賞をもらった人たちを見て、僕も今年なんとかして取りたかったものです。 そこで割と狙いにいって1位になっちゃったんで、嬉しいという思いと、うまくいったという達成感と、驚きが、 混ざった気分
Rubyやってみる！（新おっぱいスクリプトもあるぉ） - ゆーすけべー日記
某プロジェクトでRuby on Rails使うっていぅんで 「アジャイルWebアプリケーション開発」本なんて買ってチュートリアルとかやってます。 ただ、Ruby自体なにも分からないので、Rails覚えてもどれだけできるかがよく分からなす。 ってことでRubyを勉強する！と先ほど書いてみた4つのスクリプトをご紹介。間違ってたらツッコミよろしくおくんなまし。 とはいえ簡単なやつだよ！でも新しいおっぱいダウンロードスクリプトもあるよ！ open-uri.rb まずは、Perlで言うLWP的なもの、つまりHTTPクライアントでこの日記のHTMLを取得してみるよー。 あら、簡単だねっ。 require "open-uri" html = open("http://yusukebe.com/").read; p html twitter-search.rb お次に「お得意の」APIを叩く系をやってみる
実装までにする7つの企画作業 - ゆーすけべー日記
メルマガ「ゆーすけべーラジオ」にてWebサービス/アプリをつくるにあたっての僕なりのエッセイを連載中です。先週は実装前に行う企画作業についてまとめてみたのですが、評判がいいので、折角ですしBlogで公開させていただきます。特に複数名でのものづくりに参考にしてみてください！ 何度か述べている通り、Webサービスにおいて「何を」つくるかは最も重要なことであり、いくら崇高な技術を持っていても「何を」つくるかによって、その技術が生きるか死ぬかが決まってきます。何をつくるかをしっかり決めることにより、実際に本番用のコードを書く実装の段階にも確信が持てますし、リリースした際のフィードバックも活きてくるでしょう。世の中でよく使われているサービスやアプリを見るとアイデアに富んだ今まで無かったと言われるような「何」がしっかりとしたものが多いと思います。 こうしたサービスの企画をつくるに当たっては各自の流儀に
イカ娘でTwitter OAuth認証 - ゆーすけべー日記
Webサービスのログイン方法の一つに「Twitterログイン」が最近多く見られるようになってきました。 サイト上でのユーザー登録無しでTwitterアカウントを引き回すことも工夫によってはできますので、 ユーザーや開発者にとって手間が省けるという利点があるのではないでしょうか。 今回はアニメ「イカ娘」を題材とした簡単なWebアプリを作りつつTwitterのOAuth認証の流れと実装を見ていきましょう。 Twitter OAuth認証の流れ Twitter OAuthでは主にキーと鍵のペアの値がいくつかでてきて混乱しがちなのでイカ、おっと間違えた、以下にまとめておきます。 「コンシューマトークン、コンシューマシークレット」 アプリケーション固有のキーと鍵。Twitter Developerのページで発行される。アプリケーション開発者以外に知らせてはいけず、通常は設定ファイルなどに記載してアプ
Webサービス、最初の宣伝 - ゆーすけべー日記
Webサービスのプロモーション？について個人的にまとめてみます。 Webサービスができたら想定するユーザーに使ってもらわないと寂しいところです。 そこでWebサービスを多くの人に知ってもらうための宣伝をしましょう。 今回はサービスを作った作者が一人でできる範囲を考え、 以下の3つの手段を使った初期のプロモーションについて僕なりのやり方を紹介します。 プレスリリース 自身のBlogでの紹介 Twitterでの拡散、はてなブックマークでの注目 今まで僕は個人で、もしくは「会社名義だけれども一人で」WebサービスやiPhoneアプリを作った際に、 上記のツールを使いながら意図的に宣伝を行い効果測定をしてきました。 プロモーションのプロではもちろん無いながらも工夫と、ある程度の努力をしています。 中には全く不発のもあり、とはいえ、それはサービス自体がそもそも面白くないケースがあったりで、 だんだん
全裸で学ぶMVC事始め - ゆーすけべー日記
一般的なWeb Application Framework（WAF）ではMVCという設計及び実装における概念が取り入れられています。 MVCに従ってつくるのが全てではありませんが、 WAFを使うと共に、一度はMVCを用いたWebアプリの開発経験はしておいた方がよいと思います。 MVCはモデル（Model）、ビュー（View）、コントローラ（Controller）の3つの単語を組み合わせた言葉で、 この3つで概念が成り立っています。 クライアントがWebに対してリクエストをした時に、これら3つがそれぞれ連動して結果を返します。 一般的には以下のような処理経路をたどります。 クライアントがWebサイトにリクエスト コントローラがリクエストの処理を行い、モデルとビューを動かす 必要に応じてモデルを呼び出す 結果のデータをビューに渡す ビューがHTML化などをしたものをクライアントに表示する MV
月10万稼ぐにはiPhoneアプリ開発が一番速かった - ゆーすけべー日記
実は大学時代の同期であるgamellaが面白いエントリーを書いていました。 題名は「ニート革命再々考とWebだけで月10万円稼げる力」。 ニート革命、つまり職がないときにじゃーどうするの？という問題について、こんなことを書いていた。 ... 最近はもう考え方が結構変わっていて、 とりあえずWebで月10万円稼げる方法を何とか見つける！というのが直近の答えなのかなーと思う。 ... 僕なりの解釈だと、Webだけで10万円を稼げれば、 住む場所によってはレバレッジが効いて場所と時間に束縛されないんで自由な生活できるんじゃね？ってとこです。 すごい同意です。特に今だったら日本円を稼いで東南アジアに住むなんてプランはありありだと思います。 また10万円という単位も一つの目標としてよい設定値だと思います。 さて、僕は、諸々の事情があって日本に住んでいますが、 Webだけで10万以上稼ぐことはしていま
これだけは使ってるMacアプリ10個 - ゆーすけべー日記
Evernoteが好きではない。Macのアプリがイケてないからだ。 変なリッチテキストみたいな奴で編集しなくてはいけなかったり、 Webページからコピペした文字がスタイルを継承しちゃったり、 そもそもMarkdownに対応してもらいたかったり。 だから巷で騒がれるほど、Evernoteはあまり使っていない。 その代わりと言ってはなんですが、お気に入りのMacアプリもあります。 今回はMacのApp Storeからダウンロードできるアプリの中でも、 僕が個人的に「今なら絶対入れる」というものを10個厳選して紹介します。 文章書くのに便利だったり、ちょっとしたライフハック的に使えたり、 クリエイティブな活動に必要だったりするもの達です。では、行ってみよう。 1. DAYONE Day One - Mac Journal Application for iPhone, iPad and Mac
Markdownで文章を書こう！ - ゆーすけべー日記
みなさんはどのようなエディタでどのような記法で文章を書いていますか？ 状況によるとは思いますが、WordとかMacのPagesで文章を書いているという方や Evernoteでメモを取っているという方、または、Blogの投稿フォームに綴っている方、 様々だと思います。 僕も書くものによってはPagesやEvernoteも使うのですが、一番文章を書く手法が「プレーンテキスト＋Markdown」というものです。今もこの手法で書いています。Blogを書く時、雑誌の原稿を書く時、はたまたメルマガの原稿を書く時、全てにおいてこのやり方は今の僕にとってベストです。 プレーンテキストである利点 そもそもプレーンテキストとはWikipediaによると、 プレーンテキストには文字情報以外の情報は一切含まず、テキストデータのみで構成されている。バイナリデータや文字の整形情報を持たないので、最低限の機能しか持たな
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
