//tips
//smart contract
Card機能を加えるがこれはbootstrapのものなどは使えないよう。
Next.js独自の方法で確認してみる。
import JobCard from '../components/Jobcard'
const Jobs=({jobList})=>{
return(
<div>
{jobList.map((job)=>(
<JobCard job={job} key={job.id} />
))}
</div>
)
}
などと作成していたが、もっさりした完成形になりそうなので、他の方法を模索。
Material-UIを使うと綺麗にできそう。
npm install @material-ui/core
下記を見つつ実装。
https://amateur-engineer-blog.com/how-to-use-material-ui-with-nextjs/#toc5
サンプルコード貼り付けでなんとか動作は確認できたが中身がどうなっているのか検証して部分的に使用できるようにしたい。また下記の綺麗なcardも使えると思うのでそれをどう反映していくかも考える必要がある。
https://demos.creative-tim.com/nextjs-material-kit/documentation/cards
Material-UIは、Googleの提唱するマテリアルデザインを実装したReactコンポーネントとのこと。
CSSのスタイルシートをJavaScriptコードに書き込むCSS-in-JSを採用しており、それをコンポーネントに提供する関数がmakeStyles()となる。
makeStyles(styles, [options]) => hook
戻り値の関数から、コンポーネントに関連づけるスタイルシートのオブジェクトがつくられることになる。
styles(Function | Object)はスタイルをつくる関数、またはスタイルオブジェクト。テーマを参照する場合には、関数で定めて、第1引数に渡す。
関数の引数に渡すスタイルシートはオブジェクト。クラス名はプロパティとし、設定は入れ子のオブジェクト。その中にプロパティと文字列の設定値を加えるかたち。
const フック関数 = makeStyles({
クラス: {
プロパティ: 文字列の設定値,
// 他のプロパティの定め
},
// 他のクラス
});
const useStyles = makeStyles((theme) => ({
//rootクラス
root: {
//プロパティ
'& > *':
//文字列の設定
{
margin: theme.spacing(1),
},
},
}));
スタイルシートをmakeStyles()の引数にして呼び出すと、フック関数(useStyles)が得られる。
const useStyles = makeStyles({
app: {
textAlign: 'center'
}
});
関数コンポーネントの中でフック関数を呼び出せば、classオブジェクトがつくられるので。スタイルシートに定めたクラスの参照を取り出して、render()が返すテンプレートのclassName属性に与えるかたちでmakeStylesの内容を反映させる。
const useStyles = makeStyles({
app: {
textAlign: 'center'
}
});
function App() {
const classes = useStyles();
return (
// <div className="App">
<div className={classes.app}>
</div>
);
参考：
https://qiita.com/gumiTECH/items/9e0f3172b8f85e93cbbe
まだいまいち使い方がわからないので再度別ページにて確認するもcssを書いている。
Cssを使うのはわかっているが美しいcssを作るのは難しいので、その補助ツールを探しているのだがなかなか見つからない。
Nextプロジェクトのstyleフォルダのhome.module.cssの中に下記を発見。
こちらを使用する方法を考える。単純にclassName={styles.card}を使えば良いだけなのではないか。
.card {
margin: 1rem;
padding: 1.5rem;
text-align: left;
color: inherit;
text-decoration: none;
border: 1px solid #eaeaea;
border-radius: 10px;
transition: color 0.15s ease, border-color 0.15s ease;
max-width: 300px;
}
こちらを記載するもバグのような形で表示される。
<a className={styles.card}>
<h2>Documentation </h2>
</a>
直接cssの.cardを変更してみる
border: 1px solid #eaeaea;を消すこと枠線のバグは消えることがわかったが、カードの枠そのものも無くなってしまうので検討が必要。
border: 1px solid #eaeaea;
border-radius: 10px;
transition: color 0.15s ease, border-color 0.15s ease;
max-width: 300px;
を調整することになるか。
solid指定により、borderを「見える化」。border-radius は CSS のプロパティで、要素の境界の外側の角を丸めるもの。CSS トランジションは、 CSS プロパティが変化する際のアニメーションの速度を操作する手段を提供するもの。max-width は CSS のプロパティで、要素の最大幅を設定。
ここは問題ないのかもしれない。
周りの部品を操作。
<div className={styles.grid}>
<a className={styles.card}>
<h2>Documentation →</h2>
<p>Find in-depth information about Next.js features and API.</p>
</a>
</div>
とすることで枠線がきちんと表記できた。
{styles.grid}で囲めていなかったのが問題だったよう。
Gridの方を理解する。
.gridとされているが、gridレイアウトとは関係なく、独自に定義されたものになりそうなので、内容を読み取る。
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
max-width: 800px;
display は CSS のプロパティで、要素をブロック要素とインライン要素のどちらとして扱うか、およびその子要素のために使用されるレイアウト、例えば フローレイアウト、グリッド、フレックスなどを設定するもの。
flex要素は、ブロック要素のように動作しつつ、そのコンテンツをフレックスボックスモデルに従ってレイアウト。
justify-contentの値は全てのflex要素をセンター揃えにする。ここはjustify-content: start;でよさそうなことがわかる。
flex-wrapはフレックスアイテムを単一行に押し込むか、あるいは複数行に折り返してもよいかを指定。折り返しを許可する場合はwrap。
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout
だいぶまともな感じになったがなぜか.grid内の.cardの横幅が端から端まで使えていない。max-width: 100%;はどちらにも設定している。
次にtwitterのタイムラインを表示させる。色々探っていくと標準の埋め込みツイートは使用せず、静的にツイートを埋め込む方法で実装した方が良さそうなことがわかった。タイムラインは断念しなければならないのかは要確認とする。
https://coderrocketfuel.com/article/add-twitter-card-data-to-a-next-js-and-react-website
SSRとは、Server Side Rendering(サーバーサイドレンダリング)の略称で、クライアント側でJavaScript等を動かしてHTMLを生成するのではなく、サーバー側でJavaScript等を動かしてHTMLを生成すること。
SSGとは SSGは Static Site Generation の略で、静的サイト生成のこと。 SSGではビルド時にサーバ側でデータを取得してHTMLを生成し、リクエストに対してそれを返す。 事前にHTMLを生成するため、CDNにキャッシュさせることができ、SSRよりパフォーマンスに優れるそう。
SPAとは「Single Page Application」の略で、単一のページでコンテンツの切り替えを行うWeb アプリケーションのこと。
この辺り勉強になる記事があったので下記掲載。
参考：
https://zenn.dev/luvmini511/articles/1523113e0dec58
Next.jsは基本的にすべてのページをPre-rendering。ページがブラウザにロードされるときにその JS コードも実行され、reactコンポーネントも初期化され、アプリの反映が始まる。反映とは<link>コンポーネントなどのメインのコンポーネントに紐づいて発動される他のコンポーネントの内容の反映が始められるということ。
Reactの場合はこのhtmlの事前読み込みがないため、jsの読み込みと同時に全ての作業を行う必要があり、重くなる。
ロードするページが外部データに全然依存していないなら単に静的なhtmlを生成すればよく、外部データに依存する時はgetStaticProps関数を使うとのこと。getStaticProps関数については後でガッツリいくことになりそう。
SNSのタイムラインページのようなタイムラインやマイページなど接続するユーザーによって変わる画面は SSRが適切。
meta要素は、「検索エンジン」（Google）や「ブラウザ」（GoogleChrome等）にWebページの情報を伝えるHTMLタグのこと。これも出てくる。
<meta name=”description” content=”〇〇〇”>
〇〇〇の中にページの要約を入れると、これが検索結果に表示される
<meta name=”viewport” content=”width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0, viewport-fit=cover”>
用途に合わせ、横幅を固定する方法や、倍率を可変させたりなど様々な記述方法があり
<meta property=”og:url” content=” ページの URL” />
SNSでシェアされた時に目立たせたい要素をOGPに設定
Snsのapiを活用していくために、Headには下記のようなものを設定していくことになる。
{/*<!-- Google / Search Engine Tags -->*/}
<meta itemprop="name" content={props.title || defaults.title} />
{/*<!-- Facebook Meta Tags -->*/}
<meta property="og:title" content={props.title || defaults.title} />
{/*<!-- Twitter Meta Tags -->*/}
<meta name="twitter:title" content={props.title || defaults.title} />
一旦、シンプルなツイート組み込み方法を模索していく。
https://hyper-text.org/archives/2020/12/static_tweets_to_next_app.shtml
https://www.to-r.net/media/next-meta-tags/
https://static-tweet.vercel.app/
