masalibの日記

システム開発、運用と猫の写真ブログです

React Material UI入門5 ButtonBaseがかっこいい件

ButtonBaseはMaterial UIに入っているコンポーネントで 画像を並べてCoolにしてくれる物です。 本当に便利なのサイトのトップで使いたいと思います

動きはないですが。全文をみたい人はこちら

material-ui ButtonBase Sample - CodeSandbox

続きを読む

Reactでlinear-gradientをやってみた

www.youtube.com

linear-gradientについて紹介されていた。 やっすんのサイトでも使われているみたいなので真似てみた。 ちなみにソースとか公開してくれないので自分で調べるしかなかった

テキストにlinear-gradientをつけるのは簡単だった。 単純につけるだけだった。

    display: block;
    font-size: 48px;
    text-align: center;
    background-image: linear-gradient(270.97deg,#ffe580 -21.36%,#ff7571 -2.45%,#ea5dad 26.84%,#c2a0fd 64.15%,#3bf0e4 108.29%,#b2f4b6 159.03%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

ブロックが難しかった。

<a href="https://masalib.hatenablog.com/" target="_blank" rel="noopener noreferrer" class="ProductCategories-abox-6">
    <img src="https://firebasestorage.googleapis.com/v0/b/learn-firebase-masalib.appspot.com/o/images%2Fsite%2Fs-DSC00325.jpg?alt=media" 
        class="ProductCategories-aboxImage-7"
         alt="箱入り娘、にゃー">
    <div class="ProductCategories-aboxDiv-8">
        <div class="ProductCategories-aboxDivText-9">箱入り娘、にゃーちゃん(キリキリ!!)</div>
    </div>
</a>
.ProductCategories-abox-6 {
    width: 324px;
    height: 240px;
    margin: 10px;
    display: flex;
    padding: 2px 0 0;
    position: relative;
    background: linear-gradient(269.16deg,#ffe580 -15.83%,#ff7571 -4.97%,#ff7270 15.69%,#ea5dad 32.43%,#c2a0fd 50.09%,#9867f0 67.47%,#3bf0e4 84.13%,#33ce43 105.13%,#b2f4b6 123.24%);
    box-shadow: 0 0 3px 1px rgba(0,0,0,.2);
    align-items: center;
    border-radius: 5px;
    -ms-flex-align: center;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-direction: column;
    -webkit-align-items: center;
    -webkit-flex-direction: column;
}
.ProductCategories-aboxImage-7 {
    width: 320px;
    height: 180px;
    border-radius: 10px 10px 0 0;
}

.ProductCategories-aboxDiv-8 {
    width: 320px;
    height: 56px;
    padding: 4px8px12px;
    background: #000;
    box-sizing: border-box;
    border-radius: 0010px10px;
}
.ProductCategories-aboxDivText-9 {
    color: #ffffff;
    display: -webkit-box;
    overflow: hidden;
    margin-left: 10px;
    text-decoration: underline;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-decoration-color: #fff;
    -webkit-text-decoration: underline;
    -webkit-text-decoration-color: #fff;
}

ProductCategories-abox-6のafterでlinear-gradientを設定してみたが認識せず・・・よくわからなかった。

そもそもlinear-gradientの説明が少なかったので調べてみると結構前からある技術なのね saruwakakun.com

ジェネレーターがあるというTwitterがあったが実際にはなかった

調べてみるとgithubで公開されていた。

github.com

vueだった。テキストとボックスのプレビュー画面がほしいと思った。 そしてreactで作り直したいなと思った。時間がある時にやりたい

最後にreactですがソースを見たい人はこちらから確認できます

zenn.devを使ってみた

いつもは「はてなブログ」で発信をしているのですが シリーズ系の記事を書いているとわかりにくと感じていました。

しかも最近は「はてなブログ」に書いても「はてなブックマーク」に掲載されにくいという状況です。 (昔は「はてなブックマーク」に掲載されやすいから書いていたんですが・・・残念)

ちがうプラットフォームにチャレンジしてみたいと思います。

zenn.devとは

markdown形式で記入できるブログのプラットフォームサイトです。 メインを技術系になっていて、Qiitaの次に有名なところです。 Qiita一強の時代は終わったかな?

現在、入力しているもの

私が、書いているのは本です。あとで記述しますが、 ブログ形式ではなく本みたいにまとまって記入できるのです

zenn.dev

もしよかったら「いいね」ボタンを押してください

表紙の画像は自前で作るみたい・・・

f:id:masalib:20201224030117j:plain

いつものにゃーの画像です。

よかった点

2020/12/24の時点で私の独断と偏見でみた よかった点と悪かった点について記載します。

  • はてなブログ」と違ってシンプルでいい感じです。
  • つくった本を有料化する事ができます。 技術本を書籍にしている人ならいいと思います。ただニッチな本なのであまり期待できないかと
  • 本を書いている人はあまりいない。がんばれば常にトップに載る事が可能かと思う。
  • 本をgithubと連動させて、更新できる。また私はやっていませんが本を書いていると履歴管理とかが必要になるのでそこをgithubに任せされるのはいいと思う。「はてなブログ」もgithub連携がほしい。

わるかった点

  • imageタグが使えない。
  • iframeタグが使えない
  • リアルタイムプレビューがない
  • 文字を選択した時の色が気に食わない
  • 絵文字がない

imageタグが使えない。

独自のタグをかかないといけないので、面倒くさい。 ちなみにQiitaはimgタグが効いたのでなぜ認識してくれないのか・・・よくわからない

iframeタグが使えない。

codesandboxなどを使って連携したい時にはてなブログならそのままiframeで入れる事ができる。 これも独自のタグをかかないと認識しない。codesandboxのiframeのところから独自タグ用に抽出してかかないといけないので面倒くさい 独自タグがない場合は、どうしようのレベル。Qiitaも効かないのでここは仕方がないのかな

リアルタイムプレビューがない。

はてなブログやQiitaではあったのに・・・プレビューのボタンを押さないといけない間違いに気がつくまでに時間がかかる。

文字を選択した時の色が気に食わない

デフォルトの色がグレーです まじで見にくい。

はてなブログとQiitaの場合

f:id:masalib:20201224025634p:plain

zenn.devの場合

f:id:masalib:20201224025650p:plain

chromeの設定変えれるけど面倒くさい

絵文字がない

はてなブログの場合はawsiconの絵文字を無理やり使うことができますが zenn.devではできない

感想

編集部分に関しては、ちょっと不満はあるけど 「本を作る」という点が魅力的なのでがんばってみたいと思う

React Firebase入門 FirebaseAuthのToken(jwt)の発行と認証(php)

Firebaseのみで完結させてもいいのですが やっぱりRDBが使いたい!!mysqlが好き!!graphqlが使いたい人がいます

そう、私です。

Firebaseは便利なんだけど、StorageやFirestoreとか一癖も二癖もある作りになっています。 またFirebaseの学習コストもそこそこかかります。それを他の人に学習を強いるのは、組織としてはいけていないです。

外部のシステムと連携して作るプログラムを作りました。 普通の人はNode.jsやGoで作るらしいのですが私は底辺プログラマーなのでPHPで作りました。 (公式のサンプルソースpython、node.js、Go、JavaC#なので次は別の言語で作る。)

この記事はReact Firebase入門シリーズです 1-1-1・ Firebase初期設定とFirebaseAuthのSignUp
1-1-2・ 「react-hook-form」を入れてみた
1-1-3・ AuthのSignUpの通信エラー対応
1-2 ・ FirebaseAuthのログイン処理
1-3 ・ FirebaseAuthのログイン認証とログアウト処理
1-4 ・ FirebaseAuthのパスワード初期化処理
1-5 ・ FirebaseAuthのメールアドレスの有効化
1-6 ・ FirebaseAuthのメールアドレスとパスワード変更
1-7 ・ FirebaseAuthの表示名変更
1-8 ・ FirebaseAuthの拡張項目追加
1-9-1 ・ FirebaseAuthのTwitter認証
1-9-2 ・ FirebaseAuthのTwitter認証(既存ユーザー向け)と解除
1-10 ・ FirebaseAuthのGoogle認証(既存ユーザー含む)と解除
1-11 ・ FirebaseAuthのToken(jwt)の発行と認証 今ここ
2-1・ FirebaseStorageのファイルアップ:基礎
2-2・ FirebaseStorageのファイルアップ前に画像の切り抜き
2-3・ FirebaseStorageのファイルアップの移動
2-4・ FirebaseStorageのファイル圧縮
3-1・FirestoreのCRUD
3-2・Firestoreのデータ取得補足
3-3・Firestoreのページネーション処理
3-4・Firestoreのコレクション(テーブル)のJOIN
4-1・Realtime Databaseでchatアプリ(書き込み)
4-2・Realtime Databaseでchatアプリ(一覧取得)
5・ FirebaseのHosting(デプロイ)
6-1・ Cloud FunctionsでHello,world
6-2・ Cloud Functions(エミュレータ)でHello,world
6-3・ ユーザーの作成時にCloud Functionsを実行
6-4・ Cloud Functionsでメール送信
6-5・ Cloud Functionsでslackに通知する
よかったら他の記事も見てください。

続きを読む

ESlint、Prettierを入れていない事に気がついて後悔

今更ながらReactのアプリを開発するならVS CodeでESlint、Prettierを使用した方に気がついた。

コードのタブとかもちゃんと設定できるみたい。 そんな事も知らないのかよ

プークスクス、プークスクス

とか言われそう。。。

今どきのブログだとtypescriptばかりでjavascriptは少ない。
今作っているアプリが一段落しららまじでtypescrptに移行する。

react(JS)で組む場合は以下
* https://harkerhack.com/vscode-react-eslint-prettier/

react(typesctipt)で組む場合は以下
* https://qiita.com/ryosuketter/items/46e2f726e0d83ed8d7ea

設定したあとにvscodeJSONファイルを修正しないと動かないので以下を参照する
* https://qiita.com/ayatokura/items/4301e0d1d8b339f722eb

React Firebase入門 FirebaseStorageのファイル圧縮してアップ

テストをしていたら画像がファイルサイズが大きい事に気が付きました。 Firebaseを無料で使っていくためにはファイルサイズは小さくした方がいいです。 Functionsで画像の圧縮をしたかったが、Google先生が用意しているサンプルがtypescriptで記載されていた。 いずれはtypescriptに移行しないといけないけど、今じゃない気がするので画像圧縮ライブラリー(blueimp-load-image)を導入して対応した。

この記事はReact Firebase入門シリーズです 1-1-1・ Firebase初期設定とFirebaseAuthのSignUp
1-1-2・ 「react-hook-form」を入れてみた
1-1-3・ AuthのSignUpの通信エラー対応
1-2 ・ FirebaseAuthのログイン処理
1-3 ・ FirebaseAuthのログイン認証とログアウト処理
1-4 ・ FirebaseAuthのパスワード初期化処理
1-5 ・ FirebaseAuthのメールアドレスの有効化
1-6 ・ FirebaseAuthのメールアドレスとパスワード変更
1-7 ・ FirebaseAuthの表示名変更
1-8 ・ FirebaseAuthの拡張項目追加
1-9-1 ・ FirebaseAuthのTwitter認証
1-9-2 ・ FirebaseAuthのTwitter認証(既存ユーザー向け)と解除
1-10 ・ FirebaseAuthのGoogle認証(既存ユーザー含む)と解除 2-1・ FirebaseStorageのファイルアップ:基礎
2-2・ FirebaseStorageのファイルアップ前に画像の切り抜き
2-3・ FirebaseStorageのファイルアップの移動
2-4・ FirebaseStorageのファイル圧縮 今ここ
3-1・FirestoreのCRUD
3-2・Firestoreのデータ取得補足
3-3・Firestoreのページネーション処理
3-4・Firestoreのコレクション(テーブル)のJOIN
4-1・Realtime Databaseでchatアプリ(書き込み)
4-2・Realtime Databaseでchatアプリ(一覧取得)
5・ FirebaseのHosting(デプロイ)
6-1・ Cloud FunctionsでHello,world
6-2・ Cloud Functions(エミュレータ)でHello,world
6-3・ ユーザーの作成時にCloud Functionsを実行
6-4・ Cloud Functionsでメール送信
6-5・ Cloud Functionsでslackに通知する
よかったら他の記事も見てください。

続きを読む

React Firebase入門 Realtime Databaseでchatアプリ(一覧)

Firebase Realtime Databaseを使ってChatのアプリを作りたいと思います 書き込みよりも難しいのは一覧取得でした。

この記事はReact Firebase入門シリーズです 1-1-1・ Firebase初期設定とFirebaseAuthのSignUp
1-1-2・ 「react-hook-form」を入れてみた
1-1-3・ AuthのSignUpの通信エラー対応
1-2 ・ FirebaseAuthのログイン処理
1-3 ・ FirebaseAuthのログイン認証とログアウト処理
1-4 ・ FirebaseAuthのパスワード初期化処理
1-5 ・ FirebaseAuthのメールアドレスの有効化
1-6 ・ FirebaseAuthのメールアドレスとパスワード変更
1-7 ・ FirebaseAuthの表示名変更
1-8 ・ FirebaseAuthの拡張項目追加
1-9-1 ・ FirebaseAuthのTwitter認証
1-9-2 ・ FirebaseAuthのTwitter認証(既存ユーザー向け)と解除
1-10 ・ FirebaseAuthのGoogle認証(既存ユーザー含む)と解除 2-1・ FirebaseStorageのファイルアップ:基礎
2-2・ FirebaseStorageのファイルアップ前に画像の切り抜き
2-3・ FirebaseStorageのファイルアップの移動
3-1・FirestoreのCRUD
3-2・Firestoreのデータ取得補足
3-3・Firestoreのページネーション処理
3-4・Firestoreのコレクション(テーブル)のJOIN
4-1・Realtime Databaseでchatアプリ(書き込み)
4-2・Realtime Databaseでchatアプリ(一覧取得) 今ここ
5・ FirebaseのHosting(デプロイ)
6-1・ Cloud FunctionsでHello,world
6-2・ Cloud Functions(エミュレータ)でHello,world
6-3・ ユーザーの作成時にCloud Functionsを実行
6-4・ Cloud Functionsでメール送信
6-5・ Cloud Functionsでslackに通知する
よかったら他の記事も見てください。

続きを読む