2024-12-06

使用テキスト

一杯のコーヒーから街のつながりを
今年も池袋の街がコーヒーの香りで満たされます。


池袋でコーヒーと音楽を楽しむ
全国の人気コーヒーショップが一堂に会し、こだわりの一杯を提供。コーヒー豆の販売や、バリスタによるデモンストレーションなど、コーヒー好きにはたまらないイベントが盛りだくさん。美味しいコーヒーを飲みながら、音楽ライブやワークショップも開催。ぜひご来場ください！

News


Shops
日本全国の人気コーヒーショップが一堂に会するこのイベント。
正統派から個性的なお店まで、コーヒー好きにはたまらないラインナップです。
あなたにとって最高の1杯が見つかるはず！


自家焙煎店:豆蔵
店主・山田太郎「自家焙煎の深煎りコーヒーは格別です。ぜひ、当店自慢のブレンドをご賞味ください。」


焙煎工房 薫風
スタッフ・鈴木花子「毎朝丁寧にハンドピックした生豆を、丁寧に焙煎しています。一杯ごとに異なる風味をお楽しみください。」


珈琲ロースター 星夜
店主・佐藤健「星の下で生まれたような、深みのある一杯を。特別な豆を、特別な方法で焙煎しました。」


カフェ・ド・ルナ
店長・田中美咲「月夜の下、ゆったりとコーヒータイムを。自家製スイーツとのペアリングもおすすめです。」


エスプレッソバー ビタースウィート
店長・藤田麻美「本格的なエスプレッソを、様々なアレンジで。あなただけのオリジナル一杯を創りましょう。」


モバイルコーヒー ワゴン
店主・伊藤健一「街を飛び回るコーヒーワゴン。どこで出会えるかはお楽しみ。」

2024-11-14

エキスパートサンプル問題をやってみる

その他

www.sikaku.gr.jp

felica29.starfree.jp

2024-11-12

ギャラリーページを動的にする（WordPress化）

WordPress

ギャラリーページを作成後に更新出来るようにするにはWordPress化する必要があります。

今回の仕様

wordpress側から画像を追加出来る
サムネイルをクリックしたらモーダルで拡大画像が表示
モーダルにはFancyBoxを使用
投稿記事のタイトル、日付、アイキャッチ画像、タグの4つを表示

高機能モーダルウィンドウ「Fancybox」のCDN

今回はモーダルウィンドウにLightboxの代わりに「Fancybox3」を使用してみます。
fancybox CSS

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />

fancybox JS

<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

リファレンス
obu.edu

静的コード

index.html

<header>
<h1>ギャラリーページをWordPress化</h1>
</header>

<div class="wrapper">
<div class="box">
<a href="https://placehold.jp/800x600.png" data-fancybox="images">
<h2>タイトル</h2>
<p class="date">2024/11/12</p>
<div class="img-box">
<img src="https://placehold.jp/800x600.png" alt="">
</div><!-- /.img-box -->
</a>
<div class="tag_list"><a href="#">タグ1</a><a href="#">タグ2</a></div>
</div><!-- /.box -->


<div class="box">
<a href="https://placehold.jp/800x600.png" data-fancybox="images">
<h2>タイトル</h2>
<p class="date">2024/11/12</p>
<div class="img-box">
<img src="https://placehold.jp/800x600.png" alt="">
</div><!-- /.img-box -->
<div class="tag_list"><a href="#">タグ1</a><a href="#">タグ2</a></div>
</a>
</div><!-- /.box -->

<div class="box">
<a href="https://placehold.jp/800x600.png" data-fancybox="images">
<h2>タイトル</h2>
<p class="date">2024/11/12</p>
<div class="img-box">
<img src="https://placehold.jp/800x600.png" alt="">
</div><!-- /.img-box -->
<div class="tag_list"><a href="#">タグ1</a><a href="#">タグ2</a></div>
</a>
</div><!-- /.box -->


<div class="box">
<a href="https://placehold.jp/800x600.png" data-fancybox="images">
<h2>タイトル</h2>
<p class="date">2024/11/12</p>
<div class="img-box">
<img src="https://placehold.jp/800x600.png" alt="">
</div><!-- /.img-box -->
<div class="tag_list"><a href="#">タグ1</a><a href="#">タグ2</a></div>
</a>
</div><!-- /.box -->

</div><!-- /.wrapper -->

style.css

body,a{
color: #222;
}
header{
background-color: #5e5a4d;
color: #FFF;
text-align: center;
padding: 30px 0;
margin-bottom: 100px;
}
.wrapper{
width: 94%;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit,minmax(340px,2fr));
gap: 80px 20px;
}
.box{
border: 1px solid	#ddd;
padding: 12px;
transition: 0.2s;
&:hover{
box-shadow: 0 0 10px #ccc;
}
>a{
display: block;
color: #000;
>h2{
font-size: 22px;
}
>.date{
text-align: right;
margin: 5px 0;
}
}
>.tag_list>a{
margin-right:5px;
&:hover{
text-decoration: underline;
}
}
}

2024-11-11

WordPressセキュリティ対策プラグイン「SiteGuard WP Plugin」

WordPress

プラグインはWordPressの主要な機能の1つです。色々な機能のプラグインが数多く用意されていて、用途によって使い分けが必要です。

セキュリティ対策向け「SiteGuard WP Plugin」

ja.wordpress.org
WordPressは世界中で最も使われているCMSなので、その分攻撃される可能性も高い為、セキュリティ対策が重要です。
特にログイン画面のURL変更と画像認証は簡単に設定出来て、効果も高いので必ずONにしておきましょう。セキュリティ系のプラグインは色々とありますが、まずはシンプルな物から使っていきましょう。

SiteGuard WP Pluginでできる事

wp-doctor.jp

2024-11-09

WordPressに向いているサイト

WordPress

WordPressはコンテンツの更新や追加などが簡単に出来るシステム(CMS)なので、定期的に内容を更新したいサイトに向いているシステムです。もちろんSNSなどのツールの方がより簡単に情報を発信出来ますが、SNSだけでは伝えきれない情報などもあるので、そういったSNSで発信した様々な情報のポータルサイト的な役割を担うのにWordPressは向いています。

WordPressに向いているサイト

更新頻度が高いサイト
既存のサイトにブログ機能を追加したいサイト
既存のサイトにお問い合わせ機能を追加したいサイト
テンプレートを使ってデザインを統一させたいサイト
複数の管理人で運営したいサイト
小規模〜中規模サイト（1000ページ以下）

WordPressに向いていないサイト

大規模サイト（1000ページ以上）
機密性の高い情報を扱うサイト
専門知識を持った管理者がいないサイト

WordPressを使うメリット

更新が容易（投稿機能など）
ページ数が多くデザインを統一させたいサイト（テンプレート機能）
複数人で管理できる
SNSと連動させたい（プラグイン）
フォームを使いたい（プラグイン）
OSSなので費用が抑えられる

デメリット

専門知識が必要
ページ数が多いと重くなる
サイト数が多い為攻撃の対象になりやすい
デザインのプレビューが容易に出来ない

ヘッドレスCMS

ヘッドレスの「ヘッド」は、ビュー（表示する画面）を指します。ヘッドレスなので、ビューの無いCMSということになります。ビューがないとは具体的にどのような意味でしょうか？

そもそもCMSとはContent Management Systemの略で、つまりはコンテンツ管理システムを指します。従来のCMSはコンテンツを入稿するシステムとコンテンツを表示するビューが合わさったものでした。最も代表的な例としてはWordPressが挙げられます。また、はてなブログやQiita、NoteなどもCMSです。

CMSのビュー（見た目）には主に以下の三種類があります。

サービス固有の画面（Qiita、Note、Mediumなど）
テンプレートを選択できるもの（WordPress、はてなブログなど）
自由に作成可能なもの（WordPress）

※ はてなブログ等もCSSの範囲であれば自由に見た目を変更可能
※ WordPressはHTMLの骨組みから自由に作成可能

このビューに当たる部分が無いのがヘッドレスCMSです。

ヘッドレスCMSのメリット

サイトを部分的にCMS化できる
フロントエンドの自由度が高まる
マルチデバイスに対応できる

などです

blog.microcms.io

microcms.io

2024-11-09

WordPressのテーマデータをGitで管理する

Git WordPress

GithubのCI/CDツールを使ってWordPressの面倒な更新作業を自動化します。

通常のWordPressの更新作業のフロー

ローカル（xampp）でwpのデータを修正・更新作業を進める
修正・更新箇所を社内のテスト用サーバーにアップロード
上長が修正・更新箇所を確認
問題無ければ社内のテスト用サーバーのデータを本番サーバーにデータを移行

ステップ数だと大した事ないように感じますが実際にやってみると色々と手間ですし、複数人での作業になった場合は、非常に面倒な作業になってしまいます。

これが、GithubのCI/CDツールを使えば自動化でき、データの先祖帰りも防げます。

GithubのCI/CDツールを使ったWordPressの更新作業のフロー

ローカル（xampp）でwpのデータを修正・更新作業を進める
修正・更新箇所をGithubのdevブランチにアップロード
上長が修正・更新箇所を確認
問題無ければGithubのmainブランチにデータをマージ

秘匿性の高い情報を「secrets機能」を使って登録する

FTPホスト名
FTPユーザー名
FTPパスワード

on:
  push:
    branches: [main]
name: 🚀 Deploy website on push
jobs:
  web-deploy:
    name: 🎉 Deploy
    runs-on: ubuntu-latest
    steps:
    - name: 🚚 Get latest code
      uses: actions/checkout@v2.3.2
    
    - name: 📂 Sync files
      uses: SamKirkland/FTP-Deploy-Action@4.0.0
      with:
        server: ${{ secrets.FTP_HOST}}
        username: ${{ secrets.FTP_USERNAME }}
        password: ${{ secrets.FTP_PASSWORD }}
        server-dir: アップしたい場所のパスを入れる

WordPressのテーマフォルダをGithubで管理する

WordPressのデータを全てGitで管理すると大変なので、テーマフォルダだけをGitで管理がおすすめです。ただし、その場合ダッシュボード上での作業は更新されないので注意が必要です。

なので、
固定ページが増えるような、規模の大きい更新作業はAll-in-One WP Migrationプラグインで
細かいデザイン部分の修正・更新はGihhubのaction機能で

2024-11-08

固定ページの本文全体を取得し表示させる

WordPress

<?php
  $page_id = get_page_by_path('○○');  //〇〇スラッグ名が入ります
  $page = get_post( $page_id );
  echo $page -> post_content;  //本文を取得
?>