2020-12-26

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

react

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

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

material-ui ButtonBase Sample - CodeSandbox

2020-12-25

Reactでlinear-gradientをやってみた

react

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があったが実際にはなかった

とっても便利なグラデーションCSSジェネレーター見つけた。
色、角度、形、大きさを変えられるのはもちろん、複数のグラデーションを重ねることもできる

Shapy | Gradient Generatorhttps://t.co/jY22TUNq9F pic.twitter.com/LT6L5eXfcr
— catnose (@catnose99) 2018年12月14日

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

github.com

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

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

2020-12-24

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ではできない

感想

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

2020-12-23

React Firebase入門　FirebaseAuthのToken（jwt）の発行と認証（php）

react

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

そう、私です。

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

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

この記事はReact Firebase入門シリーズです

よかったら他の記事も見てください。

2020-12-22

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

react

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

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

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

／#このすば2 再放送📢
📺TOKYO MX 25:35～
📺KBS京都 25:35～
＼

第5話「この仮面の騎士に隷属を！」#このすば #大泣きアクアもいいけど #プークスクス #このテンションのアクアも👍 pic.twitter.com/dBhTUjAhLP
— アニメ『このすば』公式ツイッター (@konosubaanime) 2020年8月12日

とか言われそう。。。

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

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

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

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

2020-12-22

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

react

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

この記事はReact Firebase入門シリーズです