Next.js+microCMS+Vercel面白い - ゆーすけべー日記
Next.js と microCMS と Vercel が面白い。それぞれ面白いし、組み合わせるとさらに面白い。なにせ、メディアサイトがデプロイも含めて 2 時間で出来る。 Next.js + microCMS + Vercel すごいな。メディアサイト（中身スッカスカだけど）がものの 2 時間でデプロイまでできた。 https://twitter.com/yusukebe/status/1435708770705760256 ということで、メディアサイトを作りながら、Next.js と microCMS と Vercel の面白さをまとめる。 2 時間で作るメディアサイト 例として「ラーメンまとめ！」というメディアサイトを作ってみる。このサイトには ラーメン屋 ラーメン屋のまとめ記事 の 2 つの種類のコンテンツがある。「ラーメン屋」が「名前」「場所」「ラーメン写真」というプロパティを持
Core Web Vitalsを上げる - ゆーすけべー日記
「Core Web Vitalsを上げる」機会があったので、Core Web Vitalsについてまとめてみる。 これから書くことは今現在、僕が把握してることで、間違っていることがあると思うけど、そこはご愛嬌でお願いします。 1. Web Vitalsとは？ Web VitalsというのはGoogleが提唱したUXの指標である。GoogleはWebに対するUXのことを「ページエクスペリエンス」と呼んでいる。「Core Web Vitals」ってのは「Web Vitals」のサブセットになっているので、まずはそこを理解しておく必要がある。 なぜWeb Vitals？ 最近、Webのフロントのことについて調べることが多いのだが、やたらとこの「Web Vitals」もしくは「Core Web Vitals」という言葉に出会う。 「フロントの体験」としてWeb Vitalsが重要だからであると同時
Go言語でつくるインタプリタがグランドフィナーレを迎えました - ゆーすけべー日記
いよいよ「Go言語でつくるインタプリタ」がグランドフィナーレを迎えた。 そして、これで終わりだ。やり遂げた。これまでは私が誘う小さなお祝いを軽くあしらってきたとしても、いよいよ愉快なパーティ帽を被ってよい時間だ。 抜粋:: Thorsten Ball “Go言語でつくるインタプリタ” やったー。パーティーだ！ なんでこの本を読んだの？ 今までコンピュータサイエンをまともに学んだことがなかった。 大学生の時分、授業では「プログラミング」と銘打つものがあるくらいで、 Javaでアプレットを作ったり、Cでシステムプログラミングをしたりという程度だった。 あとは独学。あくまで目的達成のための学習。 GUIやWebアプリの高レイヤーの実装ばかりで、 中がどうなってるのかあんまり理解できてなかった（いわゆる電子工作は好きだったけど）。 で、なんとかやってきたんだけど、 コンピュータサイエンスを学んでい
Raku(Perl6)を書く - ゆーすけべー日記
YAPC::Kyotoのトークリストを見て、突然Rakuを書いてみたくなったのでいまさらながら書いてみた。 RakuとはPerl 6のこと。去年の10月にPerl 6からRakuへと改名された。 なぜ「いまさら」なのかというとPerl 6は20年くらい前に設計が始まり、 15年くらい前に動作可能な実装ができてたいからだ。 特に海外のPerlカンファレンスでは盛んにPerl 6の話がされていて、 2013年に行ったYAPC::NAでも 「Perl 6でWebフレームワーク作ったぜ！（遅いけどな）」みたいなトークがあった。 そして2015年のクリスマスにラリー・ウォールのもとリリースされた。 だから特別、目新しいものではない（とりわけ言語仕様）。 ただ、最近になってより実用性が高まってきたようだ。 ちなみにPerl 6はPerl 5とは互換性がなく全く別の言語と考えてよい。 以前Perl 6の
ゆーすけべー日記
ここ最近の僕の開発で指標になっているのは「システムとしてのクオリティを上げるか」であり、それって当然のごとく行われているかもしれなくて、いわゆる Quality Assurance = QA なんて言葉があったり、某社では Test Engineer の方がいたりするわけです。ただ、あまりにも僕としては「ずさんな」ところが多々あると考えています。「よしAを変更した → デプロイ → Bがエラー出てる」なんてことがないように「機能が望むように動作しているか」をテストコードで担保しようと努めている次第です。例えば、先日サービス内で使用している Flickr API の一部メソッドが正常に機能しない（ どんなに一般的な語彙で探しても検索結果が空で返ってくる ）なんてことがありましたが、テストコードのおかげで問題の切り分け、つまり、これは本当に Web API が壊れているのだ！ということがテスト
ゆーすけべー日記
依然としてPerlのWeb Application Framework=WAFは Mojolicious推し です。ボケてほどの大きなトラフィックを集めるようになったサービスでも使っている実績がありますし、自分で使っていてたまにバージョンアップの互換性で問題が出るくらいで、すっごく困った事が無いので重宝しております。今回は備忘録的な意味も兼ねて、Mojoliciousをある程度使用した時に便利なTips 8個を個人的にまとめてみます。え、何？「Mojoliciousっていったいどういうものなの？」「Mojoliciousって名前を聞いた事があるけれど使った事がないんだけど...」そんな方は9月に開催されるYAPC::Asia 2013で僕が入門チュートリアルな発表をやろうと企んでいるので、そちらへ足を運んでください！ちなみにトークはまだacceptされたわけではないので、以下のページのソー
Webアプリにおけるキャッシュ。オレオレ事例 - ゆーすけべー日記
Webアプリにおいて、アクセスやデータ量が多く/大きくなってくると、 バックエンドのパフォーマンスが低下しがちです。 MySQLなどのRDBMSにデータを置いている場合は適切に クエリーを改善する、インデックスを張る、といった策で解決する場合もありますが、 キャッシュを効果的に利用することでより高負荷に対応できる可能性があります。 また、外部APIへの問い合わせなど、どうしてもネットワークや他のリソースのレスポンスタイムに 引きずられる部分に関しては情報を手元にキャッシュしておくと何かとよいでしょう。 今回はWebアプリケーションのレイヤーで最近僕がどのようにキャッシュを使っているのか？ の事例を紹介しつつまとめてみたいと思います。 キャッシュについてとその基本 そもそもキャッシュとは、簡単にふわっと表現するならば、 「一時的に情報を手元の近い場所に置いておいて利用する手法、もしくはその一
miyagawanize2 - ゆーすけべー日記
はじめに miyagawa（宮川達彦）さんはスーパーギークの一人です。昨日のLL Decadeでも基調講演なさってました。 誰しもmiyagawaさんのようにコードを書きたいと思っているはずです。 しかし、僕たちは彼のようにはなれません。なぜなら「紫色の何か」が欠けているからです。 紫色の何か これは一体なんなんでしょうか？僕には分かりません... けれど、miyagawaさんのようになるには必要なものです。 そこでmiyagawanize2というWebアプリを作ってみました。 miyagawanizeの基本 miyagawanizeでは以下のモジュールを使います。 use Imager; use Image::ObjectDetect; ImagerはPerlらしく画像処理をするためのモジュール。 Image::ObjectDetectはOpenCVの物体検出の部分をPerlから利用でき
勉強会・カンファレンスに行こう〜YAPC::Asia特集 - ゆーすけべー日記
IT、特にWeb系の人達は勉強会が大好き！今回は勉強会やカンファレンスに行った事がない人向けに、 勉強会とはなんぞや？を説き、少しでも「行ってみたいな」と思わせ、 YAPC::Asia 2012というイベントに誘導するという一人ステルスマーケティングな記事を書いてみたいと思います。 ＊注意＊ YAPC::Asia主催であるJPAさんから決して何かもらってるわけではありませんw！ むしろ僕が所属する（株）ワディットがスポンサーしてるくらいですから！ 勉強会、カンファレンスとは？ 読んで字のごとくみんなで集まって勉強する会、に代わりはないのですが、IT系の勉強会には特定の形式があります。 まずは 発表型 。参加者のうちスピーカーが決められた時間発表を行い、残りの参加者が話を聞きます。 発表時間はYAPC::Asiaの場合、20分と40分があります。大抵質疑応答も含みます。 また、後述するLig
実装までにする7つの企画作業 - ゆーすけべー日記
メルマガ「ゆーすけべーラジオ」にてWebサービス/アプリをつくるにあたっての僕なりのエッセイを連載中です。先週は実装前に行う企画作業についてまとめてみたのですが、評判がいいので、折角ですしBlogで公開させていただきます。特に複数名でのものづくりに参考にしてみてください！ 何度か述べている通り、Webサービスにおいて「何を」つくるかは最も重要なことであり、いくら崇高な技術を持っていても「何を」つくるかによって、その技術が生きるか死ぬかが決まってきます。何をつくるかをしっかり決めることにより、実際に本番用のコードを書く実装の段階にも確信が持てますし、リリースした際のフィードバックも活きてくるでしょう。世の中でよく使われているサービスやアプリを見るとアイデアに富んだ今まで無かったと言われるような「何」がしっかりとしたものが多いと思います。 こうしたサービスの企画をつくるに当たっては各自の流儀に
Webアプリのパフォーマンスアップ作戦 - ゆーすけべー日記
予定している機能を実現するアプリが完成するだけでWebサービスが成り立つわけではありません。 運用の最中にパフォーマンスにまつわる問題が出てくる可能性があります。 それは突然大きなトラフィックがやってきたというような時だけではありません。 知識が無いうちですと、いざ運用に乗せてみるとずいぶんとサイトの読み込みが遅いといったケースが発生することもあります。 僕はいくつかのエロサイトを管理しているのですが、 その中に月間700万PVのアクセスをいただいている「サイトA」があります。 サイトAの場合、トラフィックもそこまで無かった当初からパフォーマンスに関する問題がいくつか発生し、 その都度調べては実践で試して対策をしてきました。また、できる限り少ないリソースでの運用を目指しています。 今回はWebアプリのパーフォマンスアップ作戦として、 サイトAでの運用経験からのいくつかの方針やTipsを紹介
全裸で学ぶMVC事始め - ゆーすけべー日記
一般的なWeb Application Framework（WAF）ではMVCという設計及び実装における概念が取り入れられています。 MVCに従ってつくるのが全てではありませんが、 WAFを使うと共に、一度はMVCを用いたWebアプリの開発経験はしておいた方がよいと思います。 MVCはモデル（Model）、ビュー（View）、コントローラ（Controller）の3つの単語を組み合わせた言葉で、 この3つで概念が成り立っています。 クライアントがWebに対してリクエストをした時に、これら3つがそれぞれ連動して結果を返します。 一般的には以下のような処理経路をたどります。 クライアントがWebサイトにリクエスト コントローラがリクエストの処理を行い、モデルとビューを動かす 必要に応じてモデルを呼び出す 結果のデータをビューに渡す ビューがHTML化などをしたものをクライアントに表示する MV
CSS Frameworkを持つ - ゆーすけべー日記
例えば、Webサービスのフロントエンドのコードを書き始める時にまず何をするでしょうか？ デザインスケッチや画像を元にHTMLとCSSを記述していくことになると思います。 少なくとも僕はそうですね。 理論的にはHTMLだけでもWebサービスを作ることはもちろんできますが、 見た目を少しでも調整したいとなるとCSSが必要になります。 例えばCSSを使わないHTMLの場合、いくら単純なレイアウトだとしても、 デフォルトのリンクの色を変えたかったり、フォントを変更したかったり、 要素ごとの余白をどうにかしかったりと最低限の要望が出てきます。 こうした最低限のCSSに対するニーズは共通化して自分なりのCSS Frameworkとして持っておくとよいと思います。 近頃、一からCSSを記述しなくなったのもこうした考え方のおかげです。 今Web上で配布されて利用可能なCSS Framworkが非常に増えて
無ければつくる - ゆーすけべー日記
車輪の再発明 車輪の再発明という言葉があります。ある目的を果たすためのライブラリや先行事例があるにも関わらず、 同じことを叶えるためについつい自分で作ってしまう行為を指します。 例えば、SinatraというRubyの特徴的なWebアプリケーションフレームワークがありますが、 そのPerlバージョンを作ろうとすれば、 他にもDancerやMojolicious::Liteといった似たようなものが、 Perlのライブラリには存在していて「 でも、いいっか！ 」と制作に入るのがまさに「車輪の再発明」な感じです。 車輪の再発明は一般的に非効率だと言われ推奨はされません。 ただ、僕は勉強のためならばよいと思ってSinatraライクなフレームワークを作ってたりもします。 既存の似たようなものを参考にできるため、学ぶことが多いです。 状況によっては再発明は効果的なこともあると思っています。 とはいえやは
データ表現についてわかった瞬間 - ゆーすけべー日記
データの表現と操作 Webサービス等に必要な言語取得についてです。 プログラミング言語を勉強しようという時にデータの表現方法を把握した瞬間に、 「パッ」とその言語に対する理解が明るくなった気がします。 プログラミングは、抽象的に言えば、目的を果たすために「データ」を「操作する」プログラムを書く行為と呼べるでしょう。 例えば二つの数字を足し算するプログラムを考えてみます。これは「4+3=7」などを機械的に行ってくれるものです。 プログラム内の流れはこのようになるでしょう。 二つの数字を受け取り、それぞれデータとして保持する 二つのデータを足し算して結果というデータに入れる 結果を出力する 実例を見た方が早いと思います。 この足し算プログラムをエラー処理とかすっ飛ばして分かりやすいPerlのコードにするとこのようになります。 use strict; #おまじない use warnings; #
30分、JavaScriptで作るWebサービスのモックアップ - ゆーすけべー日記
Instagramは日本のユーザーも多く、日常を切り取った写真がほとんどで、 またお洒落なものも混じっているのでたまに眺めると気持ちがホッコリしたりします。 特定のキーワードでInstagramの最新の写真を検索したい時があります。 例えば、みんなが今どんな「ご飯」を食べているのか、今日の「日の出」はどのような具合なのか、 がInstagramの写真を通して分かるかもしれません。 Instagramの写真検索サービスを探してみると、 Instagram自身が検索機能を提供してないので他の第三者が作ったサービスがいくつか出てきます。 使ってみたところ、もう少し自分で見た目やら機能を変えてみたいなーなんて思いました。 そこで、「Instagramの今の写真を検索できるサービス」といういわばWebサービスを作りたい欲求にかられます。 今回はこのようなちょっとした欲求から考えた「Webサービスのモ
一人で作る！Webサービスに必要な知識とか能力 - ゆーすけべー日記
作りたいものが決まったら調査をしましょう。特に技術的なことについてです。 ここで言う技術というのは、「自分が作りたいことが世の中の利用可能な技術で実現できるか？」を意味します。 その際に「自分のスキル」と「世の中の技術」を分けて考えるといいでしょう。 アイデアを実現するために「利用可能な技術が無い」ケースはあきらめればいいですし、 「あるけれども自分にスキルがない」ケースは頑張ればいいのです。 設計は紙に書いちゃうくらい簡素なもので最初はいいかもです。個人個人のスタイルがあるので。 ユースケースという「ユーザーがシステムに対して振る舞う行為」を図にすることと、 扱うデータには何があるのかを列挙して構造化することは最低限行います。 2. 開発 いよいよ開発です。Perl、Python、Ruby、PHP... 何を使うにしろ以下の知識が必要になると思います。 言語に対する理解 WAF DB フ
iPhone「アプリの設計パターン」についてまとめてみる - ゆーすけべー日記
iPhoneアプリの良いアイデアが出たので、これから作り始めようというところである。 さて、iPhoneアプリ開発童貞ってわけではないが、今までただ闇雲に作っていた感があるので、 実際にXcodeを起動してコードを書き始める前の設計をどうしていこうかと考えている。 ソフトウェアの作成はじめてではもちろん無いのでだいたい勝手は分かるものの、 iPhone特有の設計思考が必要な気がして、文献を漁っている。 ところが、世に出回っているiPhoneアプリ本にはUIKitをいじくるだけの解説ばかりではないか！ で、つまるところ設計について有益だと思えたのは以下3つの文献だった。 「iOSアプリケーションプログラミングガイド」Appleのサイトからダウンロードできる 「iPhoneアプリ設計の極意 - 思わずタップしたくなるアプリのデザイン」のfladdictさんの章 「iOS開発におけるパターンによ
これだけは使ってるMacアプリ10個 - ゆーすけべー日記
Evernoteが好きではない。Macのアプリがイケてないからだ。 変なリッチテキストみたいな奴で編集しなくてはいけなかったり、 Webページからコピペした文字がスタイルを継承しちゃったり、 そもそもMarkdownに対応してもらいたかったり。 だから巷で騒がれるほど、Evernoteはあまり使っていない。 その代わりと言ってはなんですが、お気に入りのMacアプリもあります。 今回はMacのApp Storeからダウンロードできるアプリの中でも、 僕が個人的に「今なら絶対入れる」というものを10個厳選して紹介します。 文章書くのに便利だったり、ちょっとしたライフハック的に使えたり、 クリエイティブな活動に必要だったりするもの達です。では、行ってみよう。 1. DAYONE Day One - Mac Journal Application for iPhone, iPad and Mac
シンプルなもう一つのCSS Framework「inuit.css」 - ゆーすけべー日記
ワディットのHPを改修する際に使ったんだけど、最近気に入ってるCSS Frameworkが「inuit.css」。CSS Frameworkは便利なんだけどどうしても使っていると「それっぽさ」が出ちゃうので（特にTwitter Bootstrapなんかｗ）こまめにみんなが使ってないようなものを探している。 inuit.cssそれ自体は非常に簡素なもので、コアのcssオンリーだとgridレイアウトすら対応してない。ただHTML5の要素の記述もある。特徴としてデフォルトで使っても文字が非常に読みやすいことがあり。大きさ、フォント、マージン、色非常にバランスよく配置、設定されている。また、イメージをマージンつけて左側に回り込ませて配置するといったちょっとしたユーティリティな使い方ができる。img要素にclass="left"を付ければOK。 <p> <img src="http://yusuke
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
