【CSS】animationプロパティを使ったマウスホバーエフェクトの巻き戻し | UNORTHODOX WORKBOOK | Blog
CSSでマウスホバーエフェクトといえばtransitionプロパティを使ってアニメーションさせることが多いと思いますが、少し複雑なアニメーションをさせたい時はtransitionでは難しいことがあると思います。 そんな時は、hover疑似クラスと合わせてanimationプロパティを使い、@keyframesでうまいことやるといい感じにすることができるので、個人的にはよく使っているのですが、animationプロパティでは、マウスアウト時にアニメーションが行われず、瞬時に元の位置へ戻ってしまい、少し不格好になってしまうのが悩みの種でした。 これを何とかしたくて色々やってみた結果、すごくシンプルな方法ですが、animationプロパティでもマウスアウト時にアニメーションさせることができたので、簡単にご紹介します。 マウスアウト時の挙動 とりあえず、それぞれのマウスアウト時の挙動を確認します。
URLだけでサイトのスクリーショット（サムネイル）を表示できるAPIまとめ | QWERTY.WORK
サイトのサムネイルに『Mozshot』を使っていましたが、使用者が多いせいか最近は画像が重たくてページの表示が最近遅いです。でも、こういったサービスは便利なので、他にないか探してみました。 wordpress.comのAPI エンコードしたURLを指定します。「w」パラメータで画像の幅を自由に指定できWordpressのプラグインではないので、Wordpressを使用していないサイトでも使えます。 https://s.wordpress.com/mshots/v1/https%3A%2F%2Fja.wordpress.com?w=250 【サンプル】wordpress.com のスクリーンショットを幅250pxで取得してみました。 WordPressのプラグインは以下があり、ショートコードでサムネイル表示できるので便利です。 Browser Shot BM Shots HeartRails
【EC-CUBE 4】商品登録にオリジナルの新規項目を追加する方法 | ノベブロ / NOVEBLO
Webコーディング（HTML/CSS/JavaScript）やEC-CUBEカスタマイズ、Webアプリなど
WordPress私的マニュアル – WordPressを使ったサイト作成資料として
WordPressのテーマやプラグイン作成において、よく利用する関数やグローバル変数などを個人的に整理したコンテンツです。 各関数やグローバル変数は、情報別（データの種類）と目的別（機能の種類）に分類しています。 なお、ほとんどの情報はソースコードを見ながら書き留めた内容であり、確認不足による誤りや更新の遅れによる不正確な内容を含んでいる可能性があります。あらかじめご了承ください。
子カテゴリのアーカイブページを親カテゴリ用のテンプレートファイルで表示しよう
説明 少し前に投稿した「適切なテンプレートファイルを用意してテンプレート内の振り分け処理を無くす」で説明した通り、特定のカテゴリ専用のテンプレートとしてcategory-○○.phpを用意することで、category.phpやarchive.php内で振り分けを行う必要がなくなる。ただ、すべてのカテゴリ分を用意するのは効率的ではないし、特に子カテゴリについては親カテゴリと共通内容になるケースが多いのではないだろうか。ここでは、子カテゴリの個別テンプレートファイルを作らず、親カテゴリのテンプレートを利用する方法を紹介する。 カテゴリのテンプレートファイルがない場合の振る舞い 以前の投稿のおさらいを兼ねて、カテゴリのテンプレートファイルがどのように検索されるかを整理する。WordPressのシステムではユーザのリクエストがカテゴリページの場合、次の順番でテーマ内のテンプレートファイルを検索し、
LaravelでPDF生成（mpdf） | 静岡県浜松市・関東 -Web制作・開発なら株式会社WETCH（ウェッチ）
EC関連のシステムなどでは請求書や領収書といった帳票類の出力が必要となる場合があります。 Webシステムにおける帳票類の出力では自動生成したPDFをダウンロードさせる方法が一般的かと思いますが、PHPのPDF出力用ライブラリとしては以下のようなものがあるようです。 TCPDF snappy dompdf mpdf TCPDFは以前何回か使用しました。 PDFのテンプレート（つまり固定フォーマット）に必要な情報を差し込む形で新しいPDFを生成できる点が特徴と言えます。 ただ、情報の差し込みに関する処理を個々に行う必要があり、特に差し込み位置や範囲を座標等で指定するため、記述量が相応に多く内容も複雑になる上にテンプレートの構造変更に対して柔軟性がないという弱点があります。 snappy、dompdf、mpdfはいずれもHTMLをベースにPDFを生成する方法になりますが、snappyはインストー
SMS、音声、メール、認証用のコミュニケーションAPI | Twilio
製品 コミュニケーション メッセージング マルチチャネルのテキストメッセージとメディアメッセージの送受信を180か国以上で
Agora.io ビデオ通話・ライブ配信SDK | iStudy
高品質な通話・配信・会話型AIの機能を 簡単に実装できる「Agora」 超低遅延＆高拡張性のAPI/SDK AgoraとOpenAIが連携、「会話型AI SDK」が新登場！ AIとのリアルタイムで自然な会話を実装！ 多くのプラットフォームで活用されているAgora（アゴラ）は、あらゆる場所に鮮やかな音声やビデオ通話を埋め込めるSDKです。 多彩なAPIと開発ツール群でカスタマイズが簡単。FlutterやUnityなどとの連携もわかりやすく、会話型AIや音声SNS、VRやメタバース・ゲーム・ファンサービス・ボイスチャット・ライブコマースなど、豊かなオンライン体験とリアルタイムコミュニケーションのサービス作りに役立ちます！ アナリティクス、録画/録音、リアルタイム音声テキスト変換、リアルタイム文字起こしなど、さまざまな追加機能も用意されており、拡張性があります！ ブイキューブはAgoraの日本
【Laravel】chunk と chunkById を比較してわかったこと - 株式会社クラフ
エンジニアの小林です。 クラフではLaravelを使ったWEBサービスの開発も行っています。 今回はLaravelのchunkメソッドとchunkByIdメソッドの違いについて、解説してみたいと思います。 chunkとは chunkとは「小さな塊（チャンク）」という意味で、Laravelではクエリビルダに用意されているchunkメソッドで、DBからデータを小さな「塊（チャンク）」ごとに分割して結果を取得し、処理を行うことができます。大量データを扱う場合はメモリ不足エラーを起こさず安全に処理することができます。 Laravelには似たような名前でchunkByIDというメソッドも用意されていますが、どちらを使えばいいのでしょうか。 結論：chunkByIDが使えるときはchunkByIDを使う 最初に結論を書いてしまうと、私はchunkByIDが使える局面ではchunkByIDを使うことをお
position:stickyが効かない原因&追従させる方法【STUDIO】
ある要素をスクロールと同じ動きで追従させて、終点で固定させたい場合ってありますよね。そんなときは「position: sticky」が便利です。動き方の説明は文章だと説明が難しいのですが、動画だと以下...
GoogleフォームにURLパラメータ使って初期値を指定する方法
ある商品ページからGoogleフォームを使った問い合わせを行う際、顧客が問い合わせ商品についてその都度書かなくても良いように、どの商品ページから問い合わせを行ったのかをわかるようにしました。 やったことは、WordPressでショートコードのプラグインをつくり、元ページのタイトルをGoogleフォームにURLパラメータとして渡すことです。 GoogleフォームにはURLパラメータを利用して初期値を指定することができるので、その方法をご説明します。 おおまかな流れ Googleフォームに初期値を渡す方法は検索するといくつか出てくるのですが、過去何度か仕様が変わっているようですね。現在のおおまかなやり方は、 １．GoogleフォームのURLを確認 ２．該当フォームのname要素を確認(これがURLパラメータとなる） ３．初期値として渡す値をURLエンコードしてパラメータと結び付けたものがURL
[WordPress] コメントの独自スパム対策、日本語を含まない場合にスパムとして弾く方法
仕組み コメント投稿時に利用されるfilterのpreprocess_commentの中でスパム判定を行い、スパムに該当するコメントを弾きます。 さらにスパムの場合はwp_dieを呼び出して、その時点で処理を強制終了、そのままエラー画面に表示を委ねます。 filterの意味を考えると本当はwp_dieを呼び出すのは微妙なんですが、後述する解説の理由から選択肢がありません。 WordPressのコメント処理 このコードを作るためにWordPressのソースを適当に読みました。とりあえず、現在の[バージョン6.4.1]では以下の処理になってます。 まず、コメントを書き込むとwp-comments-post.phpに飛びます。これは表示されるURLを見れば分かると思います。 次にwp-comments-post.phpではwp_handle_comment_submission()関数が呼ばれま
laravel breeze(+inertia.js, react)に通知機能を与える(1)準備｜mocotech
今一つ知られてるのか知られていないのかよくわからん機能にlaravelの通知作成支援機能がある。それで作ってみるわけだがinertia.jsとreactの場合ちょっとlayout系を操作するにはクセがあるので、まずそこをシミュレートしようということになる。 ちなみにavatarからの流れてavatarがひっついているが、まあ気にしないでおk 通知ベルを作るreact-iconが入ってるという前提。ここではVscを使っているがまあ何でもいい、好きなやつでどーぞ。 import { VscBell } from 'react-icons/vsc'; export default function Authenticated({ user, header, children }) { // return ( // <div className="hidden sm:flex sm:items-c
laravel breeze (react) にavater機能を付ける(1)｜mocotech
laravel breezeの説明はAIに任せて割愛する 導入部分も割愛。確かどこかに書いたような… git clone https://gitlab.com/catatsumuri/laravel10-starter.git -b breeze-inertia-reactここに一通り設定したものがあるから適当に持ってくるってことで話を進めますぞ。作業ログ % cp .env.example .env % docker run --rm -it -v $(pwd):/app composer install --ignore-platform-reqs % ./vendor/bin/sail up % ./vendor/bin/sail npm install % ./vendor/bin/sail artisan migrate:fresh --seed Dropping all tab
WordPress5.5からZIPファイルで上書きアップデートができます
WordPress5.5ではサイトマップや画像遅延読み込み、テーマやプラグインの自動更新機能など、新機能が追加されています。 そして地味な機能ですが、個人的には待望の機能が追加されました。 それはテーマやプラグインの手動での更新方法です。 公式ディレクトリ以外で配布されている物のアップデートや、ダウングレードする際の手段は以下の通りでした。 既存のテーマやプラグインを一度アンインストールして再インストールする必要もしくはFTPソフトでアップロード地味に面倒なのですが、これが5.5以降は上書きアップデートが出来ます。 アップグレードだけで無くダウングレードも出来ます。 これでFTPの情報をクライアントから貰えない場合など、何らかの理由でFTP操作が出来ない場合なんかにも活用できます。 プラグインの場合新規追加 WordPress管理画面より プラグイン > 新規追加 を選択します。 プラグイ
WordPressでブロックパターンを構築する方法
WordPressは、誰でも簡単にテキストやマルチメディアのコンテンツを作成し、共有することができる強力なオンラインパブリッシングツールです。それどころか、デザイナー、マーケティング担当者、開発者に便利な万能ツールとすら言えるでしょう。 つまり、WordPressは有能な仕事仲間として、さまざまな職業での成功を後押ししてくれます。 このような背景から、Kinstaでは、WordPress開発者におすすめのスキル習得のコツを各種記事でご紹介しています。 Gutenbergカスタムブロックを構築する方法 Gutenbergの動的なブロックを作成する方法 Gutenbergで投稿にメタボックスとカスタムフィールドを追加する方法 また、Gutenbergカスタムブロックについての動画もご用意しています。 そして、たしかにGutenbergの開発スキルでキャリアアップを目指すことはできますが、Wor
WordPressでブロックテンプレートを作成する方法
GutenbergがWordPressの標準エディターとなった今、ウェブデザインの可能性は、WordPressテーマに縛られません。WordPressには、優れたサイトのレイアウトに必要なデザインツールが搭載されており、テーマはサイトの構築やデザイン機能を強化する目的で使用することができます。 そしてブロックテンプレートは、サイト構築をさらに強化してくれる存在。ブロックエディターハンドブックには、以下のように記載されています。 ブロックテンプレートはブロックアイテムのリストとして定義されます。定義済みの属性やプレースホルダーコンテンツを含めることができ、静的にも動的にもできます。ブロックテンプレートを使用して、エディターセッションのデフォルトの初期状態を指定できます。 言い換えるなら、ブロックテンプレートは、デフォルト状態をクライアント上で動的に設定するために使用可能な複数のブロックアイテ
【WordPress管理画面】投稿一覧をタグと投稿者で絞り込む方法 | ZeroPlus Media
日付カテゴリータグユーザー新たに「タグ、ユーザー」で絞り込むことができるようになってますね！ それでは早速実装していきましょう。 実装今回はテーマを修正することになるので、修正するファイルはfunctions.phpとなります。 外観 > テーマエディターよりエディタへと移動します。 ※知見がある方は、外部のテキストエディタで編集することも可能です。 サイドバーよりfunctions.phpをクリックします。 functions.phpを編集できるようになったら次へ進みます。 投稿一覧を「タグ」で絞り込む機能を実装 /* 投稿一覧絞り込み用 */ //投稿一覧リストの上にタグフィルターを追加する function narrowing_down_posts(){ global $post_type, $tag; if ( is_object_in_taxonomy( $post_type,
[Laravel][マルチ認証] フロントは会員を、管理画面は管理者というように別々に認証を行う
Laravelは認証の仕組みが組み込まれています。 ただ、タイトルの通り フロントでは会員情報のID、パスワードで認証 管理画面では管理者情報のID、パスワードで認証 というように別々に認証を行いたいことがよくあります。 公式のドキュメントには詳しく掲載されていなかったのですが、Laravelではこういった認証も実装できる柔軟な仕組みを提供しています。 マルチ認証と呼ばれている機能です。 今回はこれを取り扱います。 マルチ認証の説明は下記が非常にわかりやすいです。 このページでは１つのログインフォームで３つのモデルの認証を行う方法が紹介されています。 【Laravel Jetstream】複数モデルでログインできるようにする（Multi Auth） – console dot log 仕様と実装 フロント 会員情報のメールアドレス、パスワードで認証 会員として認証されていない場合は、ページ
![[Laravel][マルチ認証] フロントは会員を、管理画面は管理者というように別々に認証を行う](https://cdn-ak-scissors.b.st-hatena.com/image/square/ac682784d8940769dbb1e193e6f39174cb41680f/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--4r31i2Jj--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BLaravel%25255D%25255B%2525E3%252583%25259E%2525E3%252583%2525AB%2525E3%252583%252581%2525E8%2525AA%25258D%2525E8%2525A8%2525BC%25255D%252520%2525E3%252583%252595%2525E3%252583%2525AD%2525E3%252583%2525B3%2525E3%252583%252588%2525E3%252581%2525AF%2525E4%2525BC%25259A%2525E5%252593%2525A1%2525E3%252582%252592%2525E3%252580%252581%2525E7%2525AE%2525A1%2525E7%252590%252586%2525E7%252594%2525BB%2525E9%25259D%2525A2%2525E3%252581%2525AF%2525E7%2525AE%2525A1%2525E7%252590%252586%2525E8%252580%252585%2525E3%252581%2525A8%2525E3%252581%252584%2525E3%252581%252586%2525E3%252582%252588%2525E3%252581%252586%2525E3%252581%2525AB%2525E5%252588%2525A5%2525E3%252580%252585%2525E3%252581%2525AB%2525E8%2525AA%25258D%2525E8%2525A8%2525BC%2525E3%252582%252592%2525E8%2525A1%25258C%2525E3%252581%252586%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3AShou%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2Q1Mjg3MjlmMGQuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
URLだけでサイトのスクリーンショットを取得して簡単にサムネイル画像がつくれるサービスやAPIを調べてみた
