Pug

booksch.hatenablog.com TEST : 新しいLOGO by DALLE3 BooksChannelの新しいLOGOのTEST 「Pug」 新しいLOGOのTEST : Pug ImageFormat : JPEGWidth : 4 096 pixelsHeight : 4 096 pixelsColor space : YUVChroma subsampling : 4:2:0Bit depth : 8 bitsCompression mode : LossyStream size : 6.25 MiB (100%) MediaInfo 14年間…長くパグ犬を飼っておりま…

皆さん「たんかん」って食べたことありますか。 簡単に言えば「南国のみかん」。 鹿児島より南の地域で栽培されています。 時期で言えば２〜３月に出回り、 みかんよりもまんまるく小型で、 皮はちょっと固くてむきにくく、 色がちょっと悪かったりするんですけど、 中身は驚くほどジューシーで甘いんです。 私が以前奄美を旅した時に出会って以来、 こよなく愛するフルーツとなりました。 ただ、なかなか東京で売っていないのです。 スーパーにはないのです。 （最近はあったりする） だから見つけたら必ず買います。 山ほど買います。 これを買い占めと言うのかもしれません。 そんな貴重で最高に美味いフルーツを 口いっぱい…

Node.jsとVS CodeでHTML・CSSの開発環境を作ってみました。タスクランナーのGulpを使わずに、npm scriptsでPugとSassの変換処理を自動化してみました。また、ファイルに変更があったら自動でブラウザを更新するようにしました。 やりたいことは4つで、1.PugからHTMLへ変換、2.SassからCSSへ変換、3.1と2の自動化、4.ブラウザの自動更新です。 前提 下準備 npm scriptsで自動コンパイルする 並列処理 ディレクトリの構成 自動でブラウザを更新する まとめ 課題 参考サイト 前提 OS:Linux Mint 21 Node.jsのパッケージを使っ…

Pugは、HTMLの拡張言語です。pug-cliを使って、Pugを試します。Pugはそのままではブラウザに表示されません。HTMLに変換する必要があります。 インストール 準備 DOCTYPE宣言 基本 テキストを複数行記述する場合 リストタグの書き方 IDとCLASS タグを省略してID、CLASSを付ける場合 属性(attribute)の指定 属性値にJavaScriptを埋め込む JavaScriptのコードを記述する 初期のクラスを指定する インラインスタイルの指定 imgタグの属性の指定 属性とboolean CSS CSSファイルを読み込む styleタグ インラインCSS 繰り返…

ボノってさ外見は黒いしスラッとしちゃって なんかカッコイイんだよね。 それでいて変な顔はするし ブシュブシュだらしなくくしゃみをするし、 ちょっとお笑い路線もおさえてる。 そして食い気は世界一を誇り、 いつだって敵の襲来に備えて警戒している。 でもね、ボノも我が家で暮らしていくうちに ちょっとずつ警戒を解いていってさ、 腹だして寝たりもするようになったんだ。 変わるもんだよね。 ここには敵は攻めてこないし、 宇宙人も飛来しないし、 ワニも飛び出してくることはないって、 ようやくわかって安心してるわけだ。 以前はちょっとの物音で目を覚ましたり、 目の前を横切ったりすると チラッと目を開けて確認し…

可愛いですね。 www.youtube.com

Vue.jsのテンプレートが見慣れない記法で書かれていた。 <template lang="pug"> となっていて、pugというテンプレートエンジンを使っているらしい。 基本文法 タグ名のあとにスペースを開けてタグの中身を書く。 p 中身 ↓ <p>中身</p> タグの属性は関数呼び出しのように書く。 input( type='checkbox' name='agreement' checked ) ↓ <input type="checkbox" name="agreement" checked="checked" /> コード量が減ることが基本的なメリットらしい。 普段からタグの記述に不…

中崎町はヨーロッパ、アメカジなど大阪の古着の聖地！ 大阪の古着といえば、中崎町。安い古着屋がたくさんある。かなりの店舗数があるが、ほぼ全て実際に訪問し、買い物をして気に入った古着屋を紹介。 中崎町は大阪駅、梅田駅から徒歩すぐで、ブラブラ街歩きをしても楽しいエリア。古い町並みをリノベーションしたカフェや美容院などが点在し、細い裏路地には隠れ家のようなお店が立ち並ぶ。 梅田駅側にはサルベージやBOW&ARROW、Born in N.Y.など素晴らしいビンテージショップが揃っている。中崎町の方面にはJAM系列や大手系の安い古着屋が多い。古着屋が集合しているサクラビルは必見。独自の世界観のヤマストアも…

8月 wash?のワンマン観に251へ スケジュール無理や〜思って諦めてたけどライブ3日前ぐらいにスケジュール勘違いしてること発覚して急いでチケット取った 5月のayutthaya wash?のツーマンぶり。下北沢までの乗り換えとか慣れてきた 初めての時は渋谷の京王井の頭線の乗り場ほんまにわからんかったからね…… 下北沢着いたら早速一龍へ 5月に食べてからずっとこの味求めてた……しかもニンニク麺大盛りチャーシュートッピング…… マジで美味すぎる 大阪でこの味ほんまに探してます アンプいつ見てもドキドキする。生まれ変わるならこのアンプに生まれたいぐらい ワンマンでいっぱい観れて超幸せでした 靴買…

自己紹介 エンジニアとしての経験は約25年になります。最初の10年ほどはSIer業界でWindows系や.NET系の開発を専門にしておりましたが、最近15年ほどはWeb業界の自社開発企業界隈でLinux系のバックエンド開発およびクラウドインフラ周りの設計/構築業務に携わっております。 ここ数年はクラウドのインフラエンジニアとしてサービスの新規開発フェーズやインフラのリプレイスフェーズに参画させていただくことが多いです。最近の業務経験に関しては下記のレジュメにまとめておりますのでご参照いただければと思います。 github.com エンジニアとしての抽象的な強みは下記になります。 幅広い知見と経…

vscodeでPugを使用する際にシンタックスハイライトを表示する設定 vscodeでPugを使用する際にシンタックスハイライトを表示する設定 VS CodeでPugを使用する際にシンタックスハイライトを表示するための設定手順は以下の通りです。1. Pug拡張機能のインストール VS Codeを開きます。 サイドバーの拡張機能アイコン（四角いアイコン）をクリックします。 検索バーに「Pug」と入力します。 「Pug」または「Pug/Jade」などの拡張機能を見つけてインストールします。 2. Pugファイルの設定 .pug 拡張子のファイルを開くと、自動的にシンタックスハイライトが適用されるは…

Pugで変数を使用する方法 変数の定義と使用 インライン変数の使用 Pugで変数を使用する方法 Pugで変数を使用するには、Pugテンプレートの中で変数を定義し、それをテンプレート内で利用することができます。 以下にその方法を示します。 変数の定義と使用 Pugでは、変数をテンプレート内で直接定義して使うことができます。 例えば、次のように記述します。 //- 変数を定義 - var title = 'こんにちは、世界！' //- 変数を使用 html head title= title body h1= title p これはPugのサンプルです。このコードでは、title という変数を定義…

Pugの条件分岐の書き方 基本的な条件分岐 else ifを使った例 Pugの条件分岐の書き方 Pugでの条件分岐は、if、else if、else を使って行います。 以下はその基本的な使い方です。 基本的な条件分岐 - var isLoggedIn = true if isLoggedIn p ログインしています else p ログインしていません else ifを使った例 - var userRole = 'admin' if userRole == 'admin' p 管理者です else if userRole == 'user' p 通常ユーザーです else p 不明な役割です条…

Pugで三項演算子を書く方法 Pugで三項演算子を書く方法 Pugで三項演算子を使うには、? と : を使います。 以下はその書き方の例です。 - var isLoggedIn = true p | ログイン状態: #{isLoggedIn ? 'ログイン済み' : '未ログイン'}このコードでは、isLoggedIn が true の場合は「ログイン済み」、false の場合は「未ログイン」と表示されます。

Pugでループを書く方法 Pugでループを書く方法 Pugでループを書く方法はいくつかあります。 以下に、each ループを使った例を示します。例えば、配列のデータをループで表示する場合、以下のように書きます。 - var items = ['りんご', 'バナナ', 'みかん'] ul each item in items li= itemこの例では、items という配列の各要素を li 要素としてリストに表示しています。 each キーワードを使って、配列の各要素をループ処理し、item という変数でアクセスしています。

Pugで外部リンクを書く方法 Pugで外部リンクを書く方法 Pugで外部リンクを作成する方法は以下の通りです。 Pugでは、a タグを使用してリンクを作成します。 href 属性にリンク先のURLを指定します。以下はPugのコード例です： a(href="https://example.com" target="_blank") Example Siteこのコードでは、href 属性に指定したURL（例: https://example.com）への外部リンクを作成し、target="_blank" を指定することで、リンクが新しいタブで開くようにしています。日本語にする部分は次のようになりま…

Pugでyoutubeを埋め込む方法 Pugでyoutubeを埋め込む方法 PugでYouTubeを埋め込む方法について説明します。 YouTubeの動画を埋め込むには、iframeタグを使用します。以下はPugでYouTube動画を埋め込むコードの例です： doctype html html head title YouTube動画の埋め込み body h1 YouTube動画を埋め込みます // YouTube動画の埋め込み iframe(width="560", height="315", src="https://www.youtube.com/embed/動画ID", framebo…

Pugをyarnでインストール Pugをyarnでインストール Pugをyarnでインストールするには、以下のコマンドを実行します。 yarn add pug これでPugがプロジェクトに追加されます。 Pugを使用するには、例えば以下のように設定ファイルに記述します。設定ファイル例（webpack.config.js） const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bund…

Pugを使用する際のwebpackの設定 Pugを使用する際のwebpackの設定 Pugを使用する際のWebpackの設定は、主にpug-loaderを使って行います。 以下は基本的な設定方法です。1. 依存関係のインストール npm install pug pug-loader --save-dev 2. webpack.config.jsの設定 const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resol…