「Bulma」の記事 - Crieit

BulmaとNuxt/Content(というかPrism.js)の相性が結構辛い

2021-01-26T20:25:54+09:00

環境

nuxt: 2.14.6
nuxt/content: 1.9.0
prism-themes: 1.5.0
nuxt-buefy: 0.4.3

デザイン大崩れ

Nuxt/Contentを使っていて、かなり苦戦した。特にNuxt/Contentが内包している、Prism.jsでコードのハイライトを出そうとしたときが辛かった。

これ、酷くない？

最初、何か設定をミスったのかと思って、prismの導入あたりのドキュメントを見ても問題ないし、じゃあ、何かのバグかっていうと、突拍子もなさすぎて訳わからん。
しばらく悩んで気がついた。
Bulmaのスタイルが当たってるんだ。
どうやらnumberというクラスが競合しているようだ。
（正直、このnumberクラス、ドキュメントにもないし、初めて見た。そして、何というか、今後使うことなさそう……）
他にもtagというクラスが競合するらしい（未確認）。

cssに関しては大の苦手なので、具体的な施策を提示する自信がないのですが、
とりあえず、Bulmaのスタイルより優先度上のセレクタで上書きする感じで無理矢理やりました。

結構いました。

調べてみたら同じ理由で困った人がちらほら。
Bulmaをやめてしまった人までいる。
みんな困ってるんだね。

他にも

Nuxt/Content側の話で、見出しがやけに右に寄るなあ、てのもあった（画像2行目）

見出しのリンク（h2 > a > span）にiconというクラスが割り当てられていて、そこにBulmaのクラスが当たって幅を持ってしまっていた。
まあ、そもそもNuxt/Contentは「こういう感じで生成するから自分でデザインしてね」なので良いのだが（自分ではなくBulmaが勝手にやってしまった、というのはあるけど）

感想

Nuxt/Contentもprismも自分の預かり知らないところでHTMLを構成するので、意図せずCSSフレームワークと競合するのはしんどいなあという感想です。
Nuxt/Contentは上記の通りなんだけど、prismは元々のデザインがあるから辛いなあと。
あと、これでBulmaを辞めるという決断になると、同時にbuefyを辞めるという事になるので、結構辛いなあ。

自分の理想の教室を、友達とリアルタイムで一緒に作れるウェブサービス「みんなのきょうしつ」をリリースしました。

2020-06-05T22:29:21+09:00

さっき投稿した記事で、4日前に「musico」というウェブアプリをリリースしたことについて書きましたが、

好きな楽曲について語り合うウェブサービス「musico」を作ってみました。
https://crieit.net/posts/musico
musico | find track you like and talk about it

実は昨日、もう一つウェブアプリをリリースしましたｗ
その名も「みんなのきょうしつ」。

みんなのきょうしつ

開発の動機

このアプリは、もともと３月のコロナ禍による一斉休校をきっかけに、いきなり会えなくなった友達とオンラインで再開して貰い、小中高生のみなさんに、社会の混乱からのストレスを一時的にでも忘れてもらえたら良いなという思いで、二日間ぐらいでガッと基本的な機能を作って公開しようとしていたものでした。ですが、その後なかなか着手する時間が取れず、限定的な公開にとどめて、ほぼ動いていない状態が続いていました。

開発頓挫、からの突貫リリースへ

そんななか、先日の「musico」の開発と公開をきっかけに、テンションとモチベーションがひさびさに爆上がりしたので、この機を逃す手はないと思い、一念発起して昨日・一昨日をかけて最低限の機能を実装し、公開していみました。

どんなアプリ？

このアプリでは、教室を模した座席表的なものに、自分の好きな人やモノの名前と写真を登録していき、自分の理想の教室が作れます。

さらに、URLを共有することで、別の場所にいる友だちとオンラインでリアルタイムで共同編集することが出来ます。（動画は開発中に撮影したものです）

動作ムービー

また、「記念撮影」機能で作った教室の画像を作成・ダウンロードしたり、各種SNSに手軽にシェアすることが出来ます。（写真は友人が作った「あつまれどうぶつの森」のキャラクターが集まる教室です）

https://class-room.fun/classrooms/8jVBr7suU0In1vbE3Ze8

地味にインスタ映えしたりしますｗ

技術的なこと

技術スタック的には「musico」と同じくFirebase+Vuejs（Nuxtjs）という、構成です。「musico」はUniversalモード（SSR）で作りましたが、こっちはSPAとして開発し、OGP取得部分のみCloud Functionsで作りました。

しかし、Firebaseめっちゃ便利ですね〜。

こっちもあんまり凝ったことはしていないのですが、OGPの動的生成あたりとか、記念写真機能あたりについて、あとで技術的なことを書こうかなと思っています。

それではまた。

好きな楽曲について語り合うウェブサービス「musico」を作ってみました。

2020-06-05T19:26:08+09:00

突然ですが、先々週に行われたweb1weekという1週間でウェブアプリを作って公開するオンラインハッカソンに参加しました。

（5/18～5/24）１週間でWebサービスを作るイベント - お題「Like」

と、言いたいところだったのですが、実は2日目以降、家庭内のインシデント対応やそれに起因する自身の体調不良で、全く開発を進めることができませんでした（汗）

昨日あたりから、体調含めて状況が落ち着いてきたので、遅ればせながら開発を進め、ガっと最低限の所まで作り込み、勢いでドメイン取って公開してみました。

以下、今回開発したウェブアプリについて。

お題は「Like」でしたので、好きな楽曲についてあーだこーだ語り合えるサービスを作ってみました。

「musico | find track you like and talk about it」（何故か英語ｗ）

フリーワードで楽曲を検索して、その楽曲にLikeやコメントをすることができます。

現時点での機能は以下、

未ログイン時

楽曲を検索、またはコメントがある楽曲リストを閲覧できる
楽曲のコメントページを閲覧できる
楽曲のプレビュー再生ができる（ファイルがあるもののみ）
Spotifyで楽曲を聞くことができる（別タブでウェブ版を表示）

ログイン時

上記に追加して、
- 楽曲にコメントできる
- 楽曲にLikeできる

動作ムービー

https://youtu.be/sDVK6O61_S0

各楽曲、コメントごとのページをSNSにシェアすることも出来ます。

https://musi-co.fun/tracks/6K53GM9W6Vle5KBwGFVnZM

開発時の様々や動機はなどは下記のハッカソンのボードに書きました。
https://crieit.net/boards/web1week-202005/musico

技術的なこと

技術スタック的にはFirebase+Vuejs（Nuxtjs）という、マネージドなサーバレス環境とコンポーネント思考なリアクティブフレームワークを組み合わせたJAMstackな流行りの構成です。

最初はホスティングにNetlifyを選択したのですが、SSR周りやFirestoreなど他に使ってるサービスとの兼ね合いも考えて、Firebase全乗っかりな構成にしました。

UIは最近良く使ってるBulmaのコンポーネントをほぼほぼそのまま使ってる感じです。

本業ではAWSがっちり使って、コンテナとかサーバレスとかマネージドサービスを組み合わせたサーバサイド寄りの開発が多いので、個人開発ではフロントエンド寄りの技術を選定しがちですね（汗）

あんまり凝ったことはしていないのですが、開発時に得た知見は今後すこしずつ書いていこうと思っています。

それではまた。

PS.

祝Crieit初投稿！！

熨斗（のし）の王様を作ったときに気をつけたこと

2019-10-13T23:43:10+09:00

まとめ

のし王というWebサービスを作った。
のし作成サービスが既に存在する中で、下記に気をつけたというお話。
- サービス作成のきっかけになった不満点・ニーズをもれなく仕様に落とし込む
- 仕様策定時は技術的な楽さに甘えず、ユーザー体験を優先する
- 上記を実現するため必要最低限の技術を選定する

不満点の解消、ニーズを仕様に落とし込む

ちょっとした贈り物に「のし」をつけたかった。
既存サービスは、以下の点で不満が残った。
- 「のし紙」のテンプレート（背景画像）だけが提供されており、Wordなどに貼り付けた後、自分で文字を描かないとダメだった
- Web上で任意の文字まで入れられるサービスでは、最後になるまで仕上がり具合がが分からなかった
- 最終画像にサービス名のロゴが入ってしまい、贈り物には不向きだった
- フォントがしょぼかった
- 水引き（背景画像）や表書き（御礼などの上部の文字）をどう選んでよいか分からなかった
不満点の解消をもれなく仕様に落とし込んだ。
- 背景画像と任意の文字を組み合わせてPDFで出力できるようにする
- 最終出力結果には広告を入れない
- 有料でもカッコいいフォントを採用する
- 用途に応じて自動で「水引き」と「表書き」が選択できるようにする
マッスルの神様＝マ神　→　熨斗の王様＝のし王

ユーザー体験を最優先する

	技術的な楽さを優先	ユーザー体験を優先
文字描画	ユーザー自身がWordなどで描画	Webサービス上で描画
仕上がり確認	プレビュー不可 or プレビューボタンクリックで表示	リアルタイムプレビュー表示
水引き、表書き	ユーザーの選択したものを表示	用途を選ぶと最適な水引き、表書きを自動で選択
描画フォント	無料の範囲で選択可能	有料で質の良いフォントが選択可能
ユーザーが泥酔状態	酔いが冷めてから使う	泥酔状態でも直感で使える

仕様の実現方法を考える

使用した技術
- Webサービス上で文字描画しPDF出力
  - 水引きの種類や表書きなどの情報をブラウザ上で選択させる
  - サーバーでPDFを作成してダウンロードさせる(Golang/Google App Engine)
- リアルタイムプレビュー表示
  - サムネイル描画サーバー(Golang/Google App Engine)を準備
  - 水引きの種類や表書きなどの情報が変更されたらAjax(jQuery)でサーバーからサムネイル画像を取得し、ブラウザ上に即時反映
- 用途を選ぶと最適な水引き、表書きを自動で選択
  - Bulma-ExtensionsのQuickViewで用途一覧を表示
  - 用途を入力させて絞り込み(jQuery)
  - 用途クリックで「水引き」と「表書き」を最適なものに変更(jQuery)
選定理由
- 仕様実現に際して最低限／シンプルなものを選ぶ
- 最新の技術よりも枯れて安定した技術を選ぶ
- なるべくメンテナンスが不要なものを選ぶ

nuxt-buefyの色をBulmaのデフォルトと同じにする

2019-05-24T20:28:38+09:00

Nuxt.jsでBuefyを使うためにnuxt-buefyを入れると、Buefyでテーマカラーが変更されているためBulmaとは違う色になってしまう。それをBulmaのデフォルトの色にする方法。

まずnuxt.config.jsにてnuxt-buefyを読み込んでいるところで、オプションを使ってBuefyのCSSを読み込まないようにする。

    ['nuxt-buefy', { css: false }],

あとはひとまずデフォルトの色を定義したvariables.scssのようなものを作っておく。

$primary: hsl(171, 100%, 41%) !default;

$info: hsl(204, 86%, 53%) !default;
$success: hsl(141, 71%, 48%) !default;
$warning: hsl(48, 100%, 67%) !default;
$danger: hsl(348, 100%, 61%) !default;

$light: hsl(0, 0%, 96%) !default;
$dark: hsl(0, 0%, 21%) !default;

最後にapp.scssの先頭でこれとBuefyのscssをimportする。

@import 'variables';
@import '~buefy/src/scss/buefy-build.scss';

細かい部分はチェックできていないがこれでなんとなくデフォルトのBulmaの色っぽくなった。

ニュースをランダムにガチャで読める「ガチャっとニュース」を4時間でリリースした話【個人開発】

2018-12-01T14:27:52+09:00

じぇいです！こんにちは。

ニュースをガチャすることで、ニュースをランダムに読める「ガチャっとニュース」をリリースしました！

https://gachat-news.herokuapp.com/

【拡散希望】ニュースをランダムにガチャして見れる「ガチャっとニュース」をリリースしました㊗️情報の偏りが問題になるこの世の中でランダムにニュースを見れたなら、偏りも減るのでは？と思って作りました楽しめるようにガチャ風にニュースが出るようになってますhttps://t.co/95AlF0d9Tr
— じぇい👨‍💻 (@jyouj__) November 29, 2018

ぜひいろんな人に触ってもらいたいのでリツイートしてもらえると泣いて喜びます:stuck_out_tongue_closed_eyes:

作った背景

上のツイートにも書いてあるように、情報の偏りを無くそうと思いました。ただランダムにニュースを閲覧できるようにしても面白くないので、ガチャというエンターテイメント性を入れました。

ガチャしてニュースを読むという新たなアプローチ方法です！

製作期間

水曜日3時間、木曜日1時間の計4時間で完成させました。

水曜日にメインの機能であるNewsAPIでニュースをランダムで取得するコードや大まかなサイトのレイアウトを作成しました。

木曜日はTwiiterでシェアされる画像の設定や細かいレイアウトを作成しました。

ガチャっとニュースってどんなサービス？

「ガチャっと」というボタンを押すとランダムでニュースが一つガチャされます。

1ページで完結している、シンプルなサービスです。

もちろんスマホ対応してます。

使ったもの

Django
- 使い慣れているから、サクッとできる
- Flaskとかでもよかったかも
Bulma
- 1ページだけだけどレイアウトはそれなりには整えたかった
- サクッとCSS適用できて便利
- モーダルウィンドウやボタン、画像サイズの部分で活躍しました
jQuery
- モーダルウィンドウの表示の部分で活用しました
- 小さな機能ならjQueryで十分
News API
- 国別、カテゴリー別など様々なニュースを取得できるAPI
- newsapi-pythonというパッケージがあってよかった
- 最新のニュースを常に取得できるのもいい！

NewsAPIについては僕自身が使い方をブログに記事書いてます(笑)

［Django］NewsAPIを使ってニュースサイトを作ってみる
 ［Django］NewsAPIを使って色々なニュースを取り出してみよう

Github
- 使わない選択肢がなかった
Heroku
- とりあえず無料のを使った
- サーバーの知識なくてもOKなのありがたい

最後に

今回で二つ目のサービスのリリースとなります。個人で色々開発する上のメリットは思い立ったらすぐ形にできたり、自分の気分の乗るときに作れるところだと思います。

まだまだ開発するぞ！

Qiitaにいいねくれたら舞って喜びます:sunglasses:

お読みいただきありがとうございました！

【個人開発】リレー式小説投稿サービス"Hundread"をリリースしました！

2018-11-03T22:40:22+09:00

じぇい(@jyouj__)です！

一週間ちょっとでリレー式小説投稿サービス"Hundread(ハンドレッド)"をリリースしました！

このサービスはもともと6月に行われたStartup Weekend Okayamaにて発表し、優勝したものです。

その後、別のサービスの開発で全然作れていなかったのですが、急に作りたくなってきてデザインを考え直し、急遽一週間ちょっとで作りリリースすることができました！

リレー式小説サービス"Hundread"をリリースしました！！Hundreadは自分が投稿した小説をツイッターにシェアして続きを他の人に書いてもらうことができます！もちろん、他の人の小説の続きを書くこともできちゃいます！ぜひ、使って拡散してください！https://t.co/qEbytWUukM
— じぇい👨‍💻Punizm作ってます (@jyouj__) October 31, 2018

個人開発ではあるものの、様々な方にDMでわからないことを教えていただき無事リリースしました。本当にありがとうございます。

どんなサービスなの？

Hundreadは

小説を投稿してツイッターで共有するとそのツイートを見た誰かがその続きを書いてくれる小説投稿サービスです。

もちろん他のユーザーの小説や文章の続きも書くことができます。

使ったもの

・Django
　Pythonのフレームワーク。一番なれてる。

・Bulma
　CSSのフレームワーク。モバイル対応も簡単でデザインもいい感じにできるので、これに頼りきりでした。

・Twitter API
　Twitterアカウントでログインできるようにしました。

・fontawesome
　とにかく便利

・Github
　使うよね:sunglasses:

・Heroku
　インフラ関連の知識がないので助かりました。hobbyプランにすると独自ドメインでもSSLになるのでとにかくありがたい。ただ、staticfileの扱いでハマってしまった。。。

助けられた記事

https://torina.top/detail/337/
　DetailViewとCreateViewの組み合わせを参考にさせていただきました。

https://qiita.com/okoppe8/items/76cdb202eb15aab566d1
　Herokuでのデプロイの時に参考にさせていただきました。

https://blog.mktia.com/how-to-use-environment-variables-on-heroku/
　Herokuで環境変数の設定をする際に参考にさせていただきました。

https://qiita.com/kenjikatooo/items/07c3d911210a4ca96781
　Herokuで独自ドメインを設定する際に参考にさせていただきました。

また、困っているDjango関連の質問をDjango-jaというグループにして、助けてもらいました。

最後に

僕は新しい文化を創造することを常に追求してます。

是非ともHundreadを遊んで、拡散してください！

ちなみに......

Hundreadというサービス名は

手(Hund)で書き、読む(read)

と

100の英単語であるHundred

をかけた造語です笑

お読みいただきありがとうございます！

「Bulma」の記事 - Crieit

BulmaとNuxt/Content(というかPrism.js)の相性が結構辛い

環境

デザイン大崩れ

結構いました。

他にも

感想

自分の理想の教室を、友達とリアルタイムで一緒に作れるウェブサービス「みんなのきょうしつ」をリリースしました。

開発の動機

開発頓挫、からの突貫リリースへ

どんなアプリ？

技術的なこと

好きな楽曲について語り合うウェブサービス「musico」を作ってみました。

未ログイン時

ログイン時

動作ムービー

技術的なこと

PS.

熨斗（のし）の王様を作ったときに気をつけたこと

まとめ

不満点の解消、ニーズを仕様に落とし込む

ユーザー体験を最優先する

仕様の実現方法を考える

nuxt-buefyの色をBulmaのデフォルトと同じにする

ニュースをランダムにガチャで読める「ガチャっとニュース」を4時間でリリースした話【個人開発】

作った背景

製作期間

ガチャっとニュースってどんなサービス？

使ったもの

最後に

【個人開発】リレー式小説投稿サービス"Hundread"をリリースしました！

どんなサービスなの？

ログイン画面

トップページ

モバイルにも対応

使ったもの

助けられた記事

最後に