SemanticUIでイマドキの横スクロールを実現する

2019-01-12T16:24:34+09:00

SemanticUIが好きでずっと使っています。

特にCard componentは使い勝手がよく、しょっちゅうお世話になるのですが、これをイマドキの横スクロールで使いたい。

というわけで数行のCSS魔改造で実現してみるという小ネタです。

完成品はこちら

CodePENに上げてるのでよければ見てみてください。

See the Pen Horizontal Scrollable Cards with Semantic UI by o_tomomichi (@tomomichi) on CodePen.

やってること

デフォルトのCards componentに、独自のscrollingクラスをつけています。
HTML側でいじってるのはこれだけ。

あとはスマホサイズのときのみscrolling内のcardが横スクロールするよう、CSSを上書きしています。
元のCSSがflexを設定してるので、no-wrapにしてる感じです。

まとめ

という感じでイマドキの横スクロールUIができました。

これが本当に使いやすいかどうかは議論の余地ありですが、個人的にはけっこう好きです。
（あんまり数が多いと絶対見ないので、多くても5〜6個くらいまでが使いどころじゃないかと）

SemanticUI、とてもよいのでよければ使ってみてください。
おしまい。

2011年の個人開発を支えた技術

2018-12-04T07:33:09+09:00

この記事は、「個人開発サービスに用いられている技術 Advent Calendar 2018」4日目の記事です。

2011年（なんともう7年前！）に、初めての個人開発で「booklovesmusic（ブック・ラブズ・ミュージック）」というサービスを作りました。

個人的に思い入れが強くサービスが死んでからもドメインを維持してたのですが、さすがにキリがないので今年で更新をやめることにしました。
色々整理してると当時の状況を思い出して懐かしくなったので、供養の意味も込めて2011年当時の個人開発環境を振り返ってみようと思います。

これから開発しようという方には何の参考にもなりませんが、ちょっとでも懐かしい気持ちになってもらえれば本望です。

※当時新人エンジニアだった自分の開発環境なので、当たり前ですがこれが当時のスタンダードというわけではありません。またここで挙げてる技術や環境がレガシーというつもりもまったくありませんので誤解なさいませんように。。

その前にサービスを追悼する

🤔どんなサービスだったの？

booklovesmusicは、読書にぴったりの音楽をおすすめしてくれるサービス、というコンセプトでした。

具体的には、好きな本を選ぶとその本に紐付いたYoutubeのプレイリストが表示されるので、それを聴きながら読書を楽しむことができます。

本とプレイリストの紐付けは完全にユーザー投稿型です。
サイト上で好きなYoutubeの動画（音楽）をいくつか選ぶとAPI経由でYoutubeのプレリストを作成し、そのプレイリストと本を紐付ける、という仕様になっていました（がんばってるな。。）

☠️一瞬のアクセスと、死

リリース後にいくつかメディアでも取り上げていただき、ありがたいことにデビュー作にしてはそれなりのアクセスがありました。

https://www.lifehacker.jp/2012/05/120507booklovesmusic.html

しかし、当たり前ですがほとんどのユーザーは投稿じゃなくて閲覧しかしなくて、いくら本を検索しても紐づくプレイリストが存在しないという状態でした（そりゃそうですね）。

結局リリースから半年くらいは追加開発しながら運用を続けて、最後は誰にも使われなくなってフェードアウト、、という感じでこのサービスは一生を終えました。南無。

いま振り返ると反省点ばっかりですが、最初から期待値を下げて開発するのが定番になった最近の自分からすると、当時の勢いみたいなのがうらやましかったりもします。

当時の開発状況

というわけでこのbooklovesmusicを開発していた2011年当時の環境を、できるだけ思い出して書いてみようと思います。
不正確な記述もあるかと思いますがご容赦ください。

🛠言語/フレームワーク

booklovesmusicはPHPで開発していて、フレームワークとしてCakePHPを使っていました。まだ1系だったのかな。

https://cakephp.org/jp

このちょっと前にプログラミング覚えたいと思って未経験の求人を探してたのですが、当時Web界隈ではほとんどPHPの求人ばっかりだったと思います。で自分も無事に新人エンジニアとしてPHPから入門しました。

仕事では確かZendベースの独自フレームワークを使ってて、モダンな環境を知りたい！と思ってRailsインスパイアなCakePHPを使ってみたはず。

ControllerとかModelとか大量に作られるフォルダの意味が全然わからず、最初はかなり絶望したのがいい思い出です。。
この経験のおかげで後にRailsさわったときのハードルが多少下がった気がするので、まったく無駄というわけではなかった、と思いたい。

💻ローカル環境

マシンは買ったばかりのMacBookPro（Mid2010）を使っていました。
メモリを増設したりSSDに換装したりして、けっこう最近まで使ってた愛用マシンです。

ローカルサーバーは象のアイコンでおなじみのMAMPを使ってましたね。便利だったよMAMP
🐘

エディタは確かmiエディタ（旧名ミミカキエディット）を使ってたはず。

その頃会社のマシンはWindowsで、Eclipseが推奨されてたけどどうしても好きになれず、途中からはもっぱらサクラエディタを愛用してました。WindowsではXampp使ってましたね。

https://sakura-editor.github.io

⚙インフラ

インフラはレンタルサーバーで、ロリポップの当時の最安プラン（月200円くらい？）を使っていました。
仕事の研修で使ってたので、同じ環境に揃えたんですね。

ロリポップ！レンタルサーバー｜WordPressの表示速度No.1

AWSとかもまだそこまで一般的じゃなくて、個人開発だとレンタルサーバーは割と一般的な選択肢だったような気がします。知らんけど。

ちなみにメディアで取り上げてもらったときはアクセスが集中して一瞬でサーバーが落ちたのですが、なんとこのときはまだ「サーバーが落ちる」という概念を知らなかったです（すごい）。

ロジックが間違ってないのに動かないのはおかしい！と思っているうちに波が去って、よくわからないうちに復帰してました。
わからないことがあったら詳しい人にちゃんと聞こう（大事）。

📦デプロイ

男は黙ってFTP、です。
毎回プロジェクトフォルダ全体を、レンタルサーバーのディレクトリにFTPで上書きアップしていました。

後述するようにバージョン管理はまだ導入してなかったので、いま思うとよく無事にプロジェクトを維持してたなーという印象。
しかし実際何とかなってたので、まぁがんばれば何とかなるんだなという知見を得ました。

FTPのクライアントソフトは黄色いアヒルのCyberduckを使ってました。

🔗バージョン管理

もちろんまだ導入していませんでした。
当時は世間的にもまだgitが今ほど普及してなくて、Subversion（SVN）の方が主流だったような。

とぼけた亀がマスコットのTortoiseSVNを仕事では使ってたので、バージョン管理の概念自体は知ってたはず。
まぁ趣味開発だしそこまで必要性を感じなかったんですかね。。なかなか男らしい決断です。

https://tortoisesvn.net/

バージョン管理がない上に当初はステージング環境もなかったので、デプロイして動かなかったときは悲惨です。
これはどう対応してたかというと、定期的にプロジェクトフォルダ全部コピーしてバックアップ取ってたような記憶があります。
本当によく管理できてたな。。

でもいま振り返ると、余計な学習コストを増やさなかったのはいい判断だった可能性もワンチャンあるんじゃないかと🐶
すべてが初めてだったので、全部まともにやってたらとても完成しなかったはず。。

🤖ステージング環境

というわけで、何回か本番デプロイして動かない！という経験をしたあとに、ステージング環境を作るということを学びましたw

レンタルサーバーでステージング用にディレクトリをもう1個切って、本番アップする前にそっちにアップするようにしたんですね。
これで随分デプロイに安心感が出たような気がします。

しかし一部本番とパスが違って動かないところがあって、特定の処理はステージング用に書き換えたりしてたような記憶が。
本番とステージングのソースに乖離が出てたので、ステージングでは動いたのに本番では動かなかったり。ステージングとは。。

🎨デザイン/CSS

最後はデザインまわりの話。
この頃からデザインも完全にひとりでやっていて、覚えたてのPhotoshopで画面イメージ作ったりしてました（もう使い方わすれた。。）

CSSフレームワーク

CSSもフレームワークは使ってなくて、完全に手探りでフルスクラッチです。
ちょうどこの頃にBootstrapが登場して話題になり始めてたような気がするけど、このときはまだ使ってませんでした。

https://getbootstrap.com

次のプロダクトで使ってみて、あまりの便利さに衝撃を受けたのを今でも覚えてます。
最近はずっとSemantic UIがお気に入りです。

レスポンシブ対応

当時はまだまだガラケーも残ってたけど、スマホも普及期に入ってたはず。（仕事でガラケーの公式サイトも大量に作ってたな。。）

仕事ではPCとスマホで完全にviewを分けることが多かったけど、ぼちぼちレスポンシブデザインなんてことも言われ始めてた気がします。

が、booklovesmusicは完全にPCオンリー。スマホ対応を後回しにして、その「後」が永遠に来なかったパターンですね。
あるある。

仕事ではもちろんスマホ対応もしてたのですが、この頃はまだ全体的にPCファーストで作って、それをスマホ対応するっていう空気感だったような気がします。今では完全に逆のことが多いですね。

アイコンとか

あと個人的に今と大きく違うのは、ちょっとしたアイコンとかもこの頃は全部Photoshopで自作してました。えらい。まぁ他に選択肢を知らなかったんですが。。
今だと良くも悪くもfontawesomeとかで済ましちゃってますね。

https://fontawesome.com/

自作のアイコンが全部微妙にいびつで歪んでるのが、いま見ると非常にほほえましいw

まとめ

という感じで、いま振り返っても何で作りきれたのか不思議なくらい、初めて尽くしの開発でした。しかし楽しかった…！

さすがに7年もやってると当時よりは技術も上がって（そしてそれ以上に環境がよくなって）作りたいものを思い通りにつくれるようになってきました。
でも一方で、中途半端に技術と知識がついてリリースまでの動きが遅くなってるのも年々感じます。

バージョン管理もしてないのにライブラリの中身を手動で書き換えて強引に動かしていたあの頃の情熱を思い出して、来年はもっと個人開発もバリバリやっていきたい所存です。
まぁそのライブラリのバージョンが上がった瞬間に追従できなくて死んだので、やっぱり最低限の知識はあった方がいいと思いますけど😇

ちなみに、booklovesmusicはこれでサービス終了しますが、もしコンセプトに共感してリメイクしたいという方がいたらぜひ@kame_f_no7まで連絡もらえるとうれしいです。

そこまで好きなら自分で作れよって感じなんですが、残念ながらぼくは本読むときに音楽聞かないんですよね（なんで作ったw）

個人開発はドッグフーディングが一番なので、ぜひ本と音楽が好きな方に引き継いでもらえるとうれしいです。

おしまい。

ほげにしの投稿 - Crieit

SemanticUIでイマドキの横スクロールを実現する

2011年の個人開発を支えた技術