gulp + Pug で静的ページコーディング その2
どうも、ヨドバシのPS5予約抽選に落ちて絶望しているムラタです。 以前ご紹介した「Pug」ですが、意外にもあれから何度か使う機会があり、前回知らなかった使い方や便利な記述方法などを知ることができたので、それらをご紹介したいと思います。 Pugの基本的な使い方やgulpでのPugの使い方については前回の記事を参照してください。 gulp + Pug で静的ページコーディング ファイル構成...
View ArticleロリポップでOwnCloudを使ってみよう
こんにちは、子供が生まれてから活動時間を夜型から朝型にシフトしつつあるムラタです。 今回はロリポップが2020年6月17日から導入した「ownCloud」を、実際にインストールして使用してみるまでの流れや使用感をご紹介してみようと思います。 ownCloudとは...
View ArticleLocal Storageを使ってお気に入り登録したWordPressの記事を呼び出す
こんにちは村田です。 今回はLocal Storageを使って、ユーザー登録しなくてもユーザーが任意のWordpressの記事を「お気に入り」に登録して、登録した記事を一覧として出力するまでの流れをご紹介します。 Local Storageとは HTML5から導入されたWebStorageと呼ばれる仕組みの一つで、特定のデータをユーザーが使用しているブラウザに保存することができます。...
View Articlegulp + Pug で静的ページコーディング
どうも、最近またポケモンGOに復帰しはじめた博多のポケおじことムラタです。 今年は今まで触ってこなかった色々な技術にも挑戦していきたいと思います。 そんなわけで今回は初めて「Pug」を使ってみたお話です。 「Pug」とは...
View ArticleWeb Share APIによるシェア機能を使ってみる
子どもが生まれてからすっかり早寝早起きになったムラタです。 何かしらのSNSを使って記事をシェアすることが当たり前になった昨今、ブログ記事やページにシェアボタンを配置することはとても多くなったと思います。 ただ実際配置するとなると大体「Facebook」や「Twitter」や「LINE」のシェアボタンだけになることが多く、その他のシェアしたいサービスへの選択肢を失わせているかと思います。...
View Articlegulpでスタイルガイドジェネレータ「Fractal」を使ってみる
7月から一児の父となったムラタです。 今回はgulpとスタイルガイドジェネレータの「Fractal」を使ってスタイルガイドを生成してみようと思います。 そもそもスタイルガイドって? サイト制作にあたっての決まり事、いわばルールブックのようなものでしょうか。...
View Article次世代画像フォーマット「WebP(ウェッピー)」を実際に使ってみよう
今回は「jpg」や「png」「gif」などのいわゆる画像フォーマットの中でも次世代フォーマットと呼ばれている「WebP(ウェッピー)」についてのお話です。 ことの発端はGoogle Speed Insightの「改善できる項目」でたびたび目にする下記の『次世代フォーマットでの画像の配信』という記述です。 『「JPEG 2000」「JPEG...
View ArticleColorMeShop WordPress PluginでWordPressとカラーミーを連携しよう
どうもムラタです。 今回はGMOペパボさんが公式で提供しているカラーミーショップとWordpressを連携させるプラグイン「ColorMeShop WordPress Plugin」を使ってみた話になります。...
View ArticleWPで記事を公開したら自動でWEBプッシュを送信する
前回の記事で「OneSignal」というサービスを活用して、購読ユーザーに対してWEBプッシュを送信する方法を書きましたが、毎回ブログを書くたびにOneSignalのサイトにアクセスして管理画面からWEBプッシュを送信するのは面倒くさいので、今回はブログを新規投稿した際に自動でWEBプッシュを送信するようにします。 サイトにWebプッシュを導入してユーザーにリアルタイムで告知しよう...
View ArticleサイトにWebプッシュを導入してユーザーにリアルタイムで告知しよう
以前投稿した「PWAでウェブアプリとしてスマホのホーム画面に追加しよう」で少しだけ触れたWEBプッシュ機能を今回は「OneSignal」というサービスを利用して実際にサイトに導入してみます。 OneSignal そもそもWEBプッシュって?...
View ArticlePWAでウェブアプリとしてスマホのホーム画面に追加しよう
こんにちはムラタです。 今回は今後ビッグウェーブが来るかもしれないし来ないかもしれない、そんな「PWA」の触りの部分だけ実装してみたお話です。 PWAって? 「Progressive Web Apps(プログレッシブ ウェブ アプリ)」の略で、Googleがモバイルユーザーの体験向上を目的として策定した仕組です。 特徴としてブラウザからアクセスするwebページとApp...
View Articleはてなブログに投稿した画像をwgetとgrepで一括DLする方法
はてなブログからWordpressへ移行したい…。 そんな時Googleで「はてブ Wordpress 引越し」とかで調べれば腐るほど記事の引越し手順に関する記事が出てくると思います。 そう、記事の移行については・・・ 問題は記事にアップロードした画像も移したい場合です。 実はこれが思ってたより簡単にはいかないんです。...
View Articlelolipopサーバーに「Magento」をインストールしてみる
どうも、今年はなるべく有休を消化するようにしたいムラタです。 突然ですが日本国内でECサイトのオープンソースCMSの「鉄板」といえばEC-CUBEですよね。(あくまで個人的な感想です) でも日本以外の海外だと一体なにが「鉄板」となっているのでしょうか。...
View ArticleLocal by Flywheelを導入してWordPress開発環境を構築しよう
どうもムラタです。 早いもので今年も残りあと僅かですが、今年はまったくバイクでツーリングに行ってないので寒さが本格的になる前にどこか行きたいですね。まあ十中八区どこも行かないですが。 さて、今回は前回の「VCCWを導入してWordPress開発環境を構築しよう」に引き続き、ローカルでのWordpress構築環境のお話です。...
View ArticleVCCWを導入してWordPress開発環境を構築しよう
発売から約1ヶ月してようやくドラクエ11も落ち着いてきたムラタです。 年のせいなのか分からないですけどエンディング見ちゃったらもう完全に心折れちゃってやりこみとかまったくする気起きないですね。 さて今回はローカルでの開発環境のお話です。...
View ArticleGoogleストリートビューでバーチャルツアーを作成しよう
どうも、梅雨はVR内でパッキンのお姉ちゃんとサマーなレッスンを送る予定が結局ひとりジメジメした部屋で過ごすムラタです。 今PSVRいくらで売れるんでしょうね。 さて、今回はThetaを使ったGoogleストリートビューへの投稿と写真連結(バーチャルツアー)の話です。 ストリートビューへの投稿に関しては以前の記事でも少し触れましたのでそちらもご覧ください。 全天球撮影を始めよう 写真の連結について...
View Article今一番キてるらしいSNS「マストドン」について
こんにちは、ようやく花粉の時期が終わり最幸な気持ちなムラタです。 今回は最近SNS業界でビッグウェーブになりつつあるSNS「マストドン(Mastodon)」についてご紹介したいと思います。 マストドンってなに? Twitterと同じようなようなサービスを個人や企業などが個別に運営できるオープンソース型SNSで、ドイツのオイゲンさんという方が開発されたそうです。...
View Articleプレミアムフライデーについてのおさらいと実際にやってみた話
こんにちは、ポケモンGOに第二世代が追加されてまたもやポケモンおじさんになるも花粉症でうかつに外に出れないムラタです。 今回は先週の金曜から全国で実施されることになった「プレミアムフライデー」についての記事になります。 「プレミアムフライデー」って何? そもそも「プレミアムフライデー」が何なのかご存知でしょうか?...
View ArticleGoogle VR Viewで360°コンテンツをサイトに埋め込む
こんにちは、FF10以来久しぶりにFF新作を買ったムラタです。 発売される前も後も色々辛口な評価が目立ったFF15ですが、やってみると腐ってもFFですね、普通に楽しくてどっぷりはまってしまってます。 さて、今回は360°の写真や動画をwebサイトに取り込んでコンテンツとして活用する事例をご紹介したいと思います。 前回の全天球撮影についての記事もあわせてご覧ください。 全天球撮影を始めよう...
View Article