こんな感じになる。
何故……？と思ったが、下記のサイトに原因が書いてあった。
book-reviews.blog
Chromeの拡張機能の一覧からReact Developer Toolsをクリック 設定画面の下の方、ファイルの URL へのアクセスを許可するがオフになっているのでONにする Chrome Developer Toolsを再起動する
実際に試してみた。
表示される様になった。
大分ご無沙汰しております。実に7年ぶりですね。 こちらで宣言したサービス開発を頑張っていくに際して、その軌跡をこちらに書いていこうと思います。
ご無沙汰しております。
— WEB Engineer Architect Tips (@weaps_net) 2024年1月2日
この年末年始から家庭内サービス開発をしてみようと思い、活動を再開しました。リモートワークで弛んだお腹の改善もしたいという思いから、トレーニングした成果を管理出来るようにしたいなと考えています！
皆さまお知恵をお貸し頂けると幸いです。私も成果報告していきます。
下記のサイトによると、Next.js 13 の仕様らしい。 zenn.dev ※新たに App Router が追加されたかららしいが、12以前を知らないため、残念ながらその前はどうだったかは分からない
上記のようにソースコードを変更して画面をリロードすると、下記の様になる
CSSを何処で適用しているわけでもないのに、理由が分からない。
色々調査して見たところ、 src/app/globals.css を削除するとデザインが適用されないようだ。
glocals.css というものを頼りに検索をおこなうと下記のサイトが見つかった。 y-hiroyuki.xyz 曰く、
global CSSとは、Next.jsで使用するクライアント側の全ページで適用されるcssのことを指しています。 global CSSを使用することで「header、footer」など共通部分のcssを一度打つだけで全ページで適用させることができます！
とのこと。だが、その後の文章を読むに
pagesディレクトリ直下にapp.jsを追加して下さい！ 既にある方はこの記事で構造を学んで頂ければと思います！ app.js import '../styles/global.css'
export default function App({ Component, pageProps }) { return
} 中身は上記のようにして下さい！
とあるので、どうやら何処かでインポートをしている様だ。
プロジェクトからglobals.cssというファイル名で探すと下記の記載が見つかった。
layout.tsxファイルにimportしている記述がある。
この行をコメントアウトするとCSSの反映が無くなったため、このtsxファイルがデフォルトで読み込まれているように見える。
下記のサイトを読むに zenn.dev
appディレクトリ配下で layout.tsx ファイルを定義するとLayoutとして定義できます。 例えば、以下のようなLayoutを定義することができます。
との記述がある。やはりNext.js13 の機能の様だ。
色々と記載しているサイトを見つけたが hello.shelfy.co.jp こちらのサイトを参考にすることにする。
こちらも色々とサイトを見てみたが、いわゆるデファクト的な構成は見つけられず……(探し方が悪いのかと思いますが、、、) qiita.com ここを参考にして、
// page.index.tsx const Page: NextPage = () => (
); こんな風にするのが良さそう。
先日まで『炙り〆鯖＋男山』という名前で好き勝手書いてきました当サイトですが、 大変有り難いことに、思いのほか大勢の方がご覧になっておりました。
そこでこの度、一念発起しまして、SEOも意識して 『WEB Engineer Architect Tips』という名前でサイトをリニューアルしました。 ドメインも新たに『weaps』を取得し、はてなダイアリーからはてなブログへも移行しました。
閲覧いただいている皆さまにとって、今まで以上に意味のある情報を届けていこうと考えています。 FrontendからBackend、仮想技術・ProvisioningやDevOps、そして出来れば人工知能など。 様々な旬の技術を摘まみ食いしつつ、読者の皆さまと高めあっていければと思います。
改めまして、今後、『WEB Engineer Architect Tips』をよろしくお願いいたします。
@tsuyoring 拝
お久しぶりです、@tsuyoring です……実に1年近く振りの投稿ですね。
さて、実は今回の記事。WordCamp Tokyo2015のリレーブログの10日目として執筆しています。
前回の投稿でもくもく勉強会に参加して以降、
そのコミュニティの圧倒的な熱量に魅せられ、加速度的にWordPressに傾倒しておりました。
今までの投稿と違い、今回は番外編として。
WordPress利用者の立場から個人サイトの移り変わりと思い出話をしてみようと思います。
Windows95が世に出て、パソコンと言うものが広く知られるようになって。
その後「フレッツISDN」で漸く個人の家庭が常時インターネット接続できるようになりました。
私が初めてインターネットに触れたのは1999年。
GaiaXが提供していた無料WEBサイト作成サービスから始めました。
この頃はGaiaXだけでなく、LYCOS、Infoseek、Exciteなど様々な会社が
無料のWEBサイト作成サービスを提供していましたね。
ITバブルが弾ける前の時期で、運営側に不思議な熱気があったと記憶しています。
ユーザー視点でも、インターネットという未知の世界で
人々が自分の土地を持つような感覚を味わえるのが良かったのか、
ユーザーはユーザーでとても盛り上がっていましたね。
一部のユーザーの中には、上記のような会社が作ったサービスだ
デザインや機能に不満を感じる人達も居ました。
彼らは個別にWEBスペースをレンタルし、独力でHTMLを記述してサイトを彩りました。
「KENT-WEB」や「忍者ツールズ」の言葉に懐かしさを感じる人も多いのではないでしょうか。
個人サイトをもっと簡単に格好良く作りたい！簡単に更新したい！
というニーズに応えるように、CMSと言うものが出現しました。
そう、WordPress……ではなくて(^^;)
この頃の絶対王者はMovable Typeでした。他に有名どころでは、国産品のtDiary。
どちらも初期だけあってまだまだ荒削りでしたが、WEBの未来を感じさせるには十分な代物でした。
2005年位からはSNSが流行出しました。
色々な種類のサービスが存在してはいたのですが、mixiの人気は凄まじかったですね。
これまでの個人サイト作成者が「自己表現としてサイトを作りたい」人達だけでした。
ですが、SNSの利用層はそこだけではありませんでした。そう、一般層を巻き込んでいったのです。
個人的には、日本におけるWEB利用のターニングポイントだと感じています。
そういった背景もあり、個人のネットユーザーのほぼ全てがそこに集まった感がありました。
SNSと同様にユーザー同士のネットワークを重視する・させるブログサービスが増えてきました。
アメブロやLivedoorブログ、そして本サイトが利用しているはてなダイアリー。
SNSのクローズな環境ではなく、もっとオープンに人々に情報を発信したい。
そんなユーザー達が飛びついたのがこういったサービスでした。
時代は再びCMSに流れていっていると感じています。そして、その主役にいるのがWordPressです。
今までよりもより敷居が低く、簡単に、それでいて素敵なサイトを作ることが出来る。
その上、通常では出来ないことでも、プラグインを利用することで機能を追加することが出来る。
私はこの20年近く、Webサイトを（個人として）作り・使い続けてきましたが、
もっとたくさんの人が自分を発信していける世界が来たら良いのに、と以前は思っていました。
インターネットが始まって、人々が気軽に発信をすることが出来るようになったけれど、
本当に発信できているのか？技術のある一部の人しかその恩恵を受けられていないんじゃないか？と。
その答えの1つが、WordPressだと思っています。
「More Publishing」（もっともっと、発信を。）WordPressの根本にある思想です。
今回のWordCamp Tokyo2015のキャッチコピーも、奇しくも「More Publishing」。
来週末、2015/10/31-11/01は、是非とも神田ベルサールに遊びに来てみてください(^^)
こんばんは。@tsuyoringです。
去る11月08日(土)に、「WordPressもくもく会 at コエド第１回」に参加してきました。
開発環境の作り方やインフラ系の話が多い本サイトですが、趣向を変えてWeb業界の勉強会のレポートとなります。
#元々、私はWeb畑出身なので、久しぶりに懐かしい世界の空気に触れたかった、というのが参加した趣旨です。笑
##Chefの記事の続きにつきましても、完了次第UP致します。雑記ばかりですみません。苦笑
会場を提供している「コワーキングスペース茅場町Co-Edo」が、
この日から別フロアに拡大しての営業とのことで、会場のセッティングをしながら始まりました。
今回が1回目ではあるのですが、幹事の方々始め顔見知り同士の方々もいらっしゃったようでした。
和やかな雰囲気で始まったと記憶しています。私が到着した際もとても気さくに対応いただきました。
IceBreakとして自己紹介を軽くして、その後は個々人が自分の作業に没頭します。
#もくもく会」の名前の由来は、1人でもくもく作業をする所からきています。
今回、なんと私の隣の席の方がWordPressのCore開発のComitterでした。ときどき教えてもらいながら作業しました。
途中スポンサーの方の計らいでピザの差し入れがありました。
こういう心遣いは本当嬉しいですよね。美味しく頂きながら、再度しばしの歓談。
食後はまた1人1人もくもくと時間まで作業。最後に作業内容や感想を端の方から発表して終了となりました。
やはりこういう勉強会だと、家で作業するとの違い作業のスピードが上がります。人に聞けるのも良いですね。
ハマっての時間ロスが防げる、というのも大きいかなと。
さて、もくもく会が終わった後は懇親会。近くのお洒落なレストランでお酒をいただきました。
希望者を募っての会でしたが、半分以上の方が参加……もとい、帰ったのは数人ではないでしょうか。
本体の会よりもこちらの方が印象に強かったかもしれません。笑
実際にフリーで働いている方、PHPに関する本を執筆されている方、素敵なデザインをされる方、などなど。
どの方の話にも血が通っていて深みがあって、為になる・心に残る話ばかり。
WEB業界なのでフットワークの軽さは勿論のこと、皆さまとても熱く、温かく。有意義なひとときでした。
素敵な会に参加出来たことへの感謝で一杯です。
勉強会、参加するのは勇気が居るかと思いますが、一歩踏み出せば何かしら世界が広がりますよ(^_^)
”Wifiを使ってPCでのんびり作業をするならお勧めの場所があるよ”
そんな話を聞き、言ってみました。渋谷にある「Factory」。
場所的には渋谷と表参道の間くらい。
個人的にお世話になってる鞄屋HerzのRezo店の目の前にありました。
#もう何回も前を通っているはずなのに、こんな素敵なお店に気付かなかったとは不覚です。
中に入ってみると、仕事の商談等で使えそうな低めの席が少々と、
私立図書館ライクなテーブル＋椅子が10個ほど。
暖色系の小さなライトがいくつも設置されていて、落ち着けそうな雰囲気でした。
また、音楽は私が行ったときにはアッパーな感じでした。
もし環境音楽が掛かって居た日には、眠ってしまいそうですね。
このお店はカフェではあるのですが、飲物を１つ頼めば、
あとはお金を払わなくても居続けられるようです。電源も使い放題。太っ腹ですね。
私はしたことはありませんが、食べ物の持ち込みなんかも出来るようです。
日曜日はお休みとのことですので、例えば週末起業家の方は利用するには厳しそうです。
平日に自由に動くことが出来る、IT系・WEB系ノマド民な方にはお勧めではないでしょうか。
昨今、インフラのコード化が叫ばれています。
今までWEBサービスの開発者は、当然の様にサーバー上のOSで開発/運用をおこなってきました。
ですが、この”Immutable Infrastructure”という考え方はそれを一変させました。
・サービス提供サーバーの仮想化
・サーバー構築の自動化（コード化）
というキーワードを元に、特定のツールを使えばどのようなOSやスペックのサーバーであっても、
全く同じ環境を即座に構築することができるようになりました。数年前から考えると、恐るべき進化ですよね。
この技術はどのように実現されているのでしょうか？そして、どのように使って行けば良いのでしょうか？
本連載では、この技術を”ざっくり理解・利用できる”ようになることを目標として紹介いたします。
VirtualBox、Vagrant、Chefといった新時代のInfra系ツールを用いて、自動仮想環境構築をおこなっていきましょう。
「仮想OSをWindowsやMacなどの物理環境上で使う」ためのツールです。
例えば、今使っているノートパソコンの環境がWindowsだとします。
そして、CentOSを使って見たいと考えたとします。すると、
１．VirtualBoxをWindowsにインストール
２．VirtualBox上でCentOSを起動
この2Stepを踏むだけで、仮想的にCentOSを使う環境が出来てしまいます。
※分かりやすさのために「物理環境上」と記載しておりますが、
正確に言うと、VPSやクラウドなどの仮想環境上でも本ツールを使うことはできます。
「仮想OSを簡単に利用するためのフロントエンドツール」です。
※現在では更にツールとしてのスコープを広げているようですが、簡単のためここではこう記載します。
仮想OSはVirtualBox単体でも使うことは出来ますが、
・ネットワークの設定などは、仮想OSを作る度に手動でおこなう必要がある
・VirtualBoxはGUIでの動作が前面に押し出たツールである
ということもあり、仮想OSの利用をもっと簡単に、できれば自動で行いたいという需要がありました。
そこで使われるようになったのが、Vagrantです。
Vagrantを使えば、ネットワークなどの環境構築をコードを用いてより簡単に実施することができます。
また、仮想OSとホストOS（VirtualBoxをインストールしている土台となるOS）の間でのファイル共有をすることができます。
この機能を使うと、次に紹介するChefとの組み合わせをおこなうことでより絶大な効果を発揮することができます（後述）。
「仮想OS上に自動でソフトウェアのインストールや設定をおこなってくれるツール」です。
サービスを作る際には、nginxやMySQLといったミドルウェアから、
Railsといったフレームワーク、td-agentなどのツールまで様々なものをインストールするかと思います。
こういったものを全て自動でインストールすることが出来、設定もおこなってくれたら、これ以上なく楽ですよね？
それを実現するためのツール、それがChefです。
具体的には、用意しておいたRecipeと呼ばれる手順書を元にして、全て自動でおこなってくれるのです。
ここで、Vagrantで事前にホストOS上で手順書の設定をおこなっておけば、
仮想OSの立ち上げからサーバーの環境構築に至るまで全てを自動でおこなってくれます。
それぞれのツールの関係性を表すと、以下の様な絵になります。
いかがでしたでしょうか？
それぞれのキーワードは断片的に聞いたことがあっても、実際にその関係性を理解するのは中々難しいかと思います。
今回は「へーそういうもんなんだな」程度に理解しておいて、
次回以降、具体的にオペレーションをしながら、どういう関係性なのか？を体感していきましょう。
