WEBサイト作成時にこのアニメーションがよくわからない…ということがあると思います。 今回は弊社で作成した、ホームセキュリティサイトのサンプルを使用しながら解説していきます。 初心者向けの記事です。 参考にするサンプルサイトはこちらから 目次1 inview.jsを読み込ませる2 各要素をフェードインして表示させる3 マウスホバーでボタンのグラデーションを動かす4 アコーディオン inview.jsを読み込ませる 今回は場所によっては『inview.js』というライブラリを読 […]
WEBサイト作成時にこのアニメーションがよくわからない…ということがあると思います。 今回は弊社で作成したサンプルを使用しながら解説していきます。 初歩的なアニメーションの知識はある、という方向けの記事です。 参考にするサンプルサイトはこちらから 目次1 inview.jsを読み込ませる2 メインビジュアル・内部のテキストがふわっと表示する2.1 メインビジュアルをふわっと表示2.2 領域内でテキストを下から上に表示3 テキストが下から上にフェードイン4 色が敷かれてから画像 […]
今回はIntersection Observer APIを使用してのアニメーションの方法をご紹介します。 正直この記事を書いている私も今手探りの状態なので、完全に初心者の方向けの記事です。 一緒に勉強していきましょう。 目次1 Intersection Observer APIってなに？2 ひとまず書き方に慣れるために Intersection Observer APIってなに？ まずIntersection Observer APIってなに？という方もいると思います。 日本 […]
CSSでのスクロールバーの装飾。 以前はchromeとあたりの対応だけだったのが、いつの間にかFirefoxも対応していたので今更感もありますがまとめておきます。 目次1 chrome・edge・safari2 Firefox3 Firefoxに自由度がないから指定はほどほどにした方がいいかも chrome・edge・safari まずは手始めにchrome・edgeの方法をご紹介します。 See the Pen Untitled by kkdd (@kk8kk) on Co […]
今まで何となく触っていただけのChatGPT。ちょっと色々と文章を作成してみる機会があったので、私なりのアイディアやコツなどを書いてみます。 もう少しシステム的な記事はこちらをご確認ください。 目次1 ChatGPTに登録をする1.1 1.ログイン/サインアップページを開く1.2 2.登録するメールアドレスなどを入力・選択する1.3 3.パスワードを入力する1.4 4.入力したメールアドレス宛のメールを確認1.5 5.アカウント名を入力1.6 6.電話番号を入力・SMS認証を […]
目次1 前回のあらすじ2 ひょっとしてATTも対応してくれる？2.1 アプリを選択2.2 言語を選択2.3 IDFAメッセージ2.4 ATTメッセージ2.5 GDPRメッセージ 前回のあらすじ 前回はAdMobのGDPRメッセージ対応行うため、AndroidアプリでGDPRメッセージを表示するための方法をまとめました。 なので今回はiOSアプリで実装したいと思います。 ひょっとしてATTも対応してくれる？ プライバシーとメッセージを見てみると「IDFA説明メッセージ」というも […]
webサイトのサイトデザインでもよく使うようになったグラデーション。 例えばボタンに使った時にhoverしたとき、背景に使用したときなどにグラデーションの色をアニメーションさせながら変化させることができます。 目次1 hoverしたときにグラデーションが動く2 時間経過でグラデーションが動く hoverしたときにグラデーションが動く hoverしたときにグラデーションが左の方に流れていくようなイメージです。 それでは実際のHTML・CSS、動作を見てみましょう See the […]
目次1 どうしたAdMob？2 AdMobの画面からアプリ向けメッセージの作成2.1 アプリを選択2.2 言語を選択2.3 ユーザーの同意オプション2.4 ターゲティング3 Androidアプリに実装する。4 （おまけ）データセーフティを申告する4.1 データの収集とセキュリティ4.2 データの種類5 最後に6 参考 どうしたAdMob？ ふとAdMobのページを見ていると 年内には、欧州経済領域と英国のユーザーをターゲットとして広告を配信するすべてのパブリッシャー様に、Go […]
WordPressで記事をピックアップして掲載したいということがあるかと思います。 そんな時はカスタムフィールドを使うと便利です。 目次1 カスタムフィールドを用意しよう2 表示の設定をしよう3 管理画面の記事一覧でチェックを入れているものをわかりやすくしたい カスタムフィールドを用意しよう カスタムフィールドを用意する方法はなんでもいいですが、今回はAdvanced Custom Fieldsを使います。 Advanced Custom Fieldsをインストールしたら管理 […]
2023年6月末から7月2日にかけて、Twitter界隈で大きな話題となった「Twitter制限」について 一体何が起きたのかと言うことを、色々と調べながらまとめながら自分の考えを述べてみます。 目次1 何が起きた？2 なぜこんなことをするの？3 なんか最近のTwitter、課金ばっかりじゃない？4 結局どうなった？ 何が起きた？ 簡単に言うと「突然Twitter APIの制限をかけることで、Twitterが表示されなくなる」という現象が発生しました。 ツイッターが閲覧制限、 […]
目次1 審査合格＝リリース？2 Googleアプリ（Android）の場合3 iOSアプリの場合4 大事なのは… 審査合格＝リリース？ 自分たちで作成したスマホアプリをプラットフォームにアプリレビューをお願いして、合格すれば無事リリースとなりますが、この場合審査終了後に自動的にリリースされてしまうので、例えばリリース日を設定したいときは困りますよね と言って当日に審査に出しても必ず通るかというとそうでもないですし、リジェクトされると翌日以降となってしまいます。 そこでアプリの […]
目次1 毎年恒例のアップデート2 実際にバージョンアップしてみた2.1 Purchase.PurchaseState.PENDINGの時のOrderIdがnull2.2 setReplaceProrationMode とかは非推奨2.3 ちなみに…3 最後に 毎年恒例のアップデート Androidアプリでアプリ内課金をするにはGoogle Play Billing Libraryを使う必要があるのですが、これは毎年メジャーアップデートされており、現在はバージョン6まで出ていま […]
目次1 SPIRALⓇとは？2 スパイラル APIってどういうの？3 PHPで実装する方法3.1 APIのリクエスト先を取得3.2 SELECTについて3.3 INSERT について3.4 UPDATEについて3.5 DELETEについて4 WordPress内で使用できる？5 困ったことは？6 外部参考サイト SPIRALⓇとは？ SPIRALⓇ（以下SPIRAL）とはスパイラル株式会社（旧株式会社パイプドビッツ）が提供するサービスで SPIRAL ver.1は、柔軟なデー […]
目次1 それは突然の話だった2 さらばTwitter API v1.13 v1.1からv2への変更手順3.1 TwitterOAuthをアップデート3.2 さくっと実装3.3 API v.1.1の場合3.4 API v2の場合4 今後はどうなるんだろう それは突然の話だった 2023年2月ごろにTwitterが有料化されるとの事でのんきに構えていたら、Twitter APIも有料化の波に… とはいえ実際にどうなるか不明だったので様子見してましたが4月になって突然ツイートできな […]
目次1 chatGPTは素晴らしい？ポンコツ？2 ダミーデータを作成させる3 翻訳に使う4 ちょっとしたスクリプトを作って貰う5 SQL文も作ってみる6 苦手な例6.1 実在するデータを取得する場合6.2 リアルタイム情報を聞く6.3 Wikipediaのような使い方はできない7 最後に… chatGPTは素晴らしい？ポンコツ？ 少し前に話題になったChatGPTですが、皆さん使ってますか？ サービス開始してから日が浅く、APIのバージョンも3.5で情報が2021年9月までと […]
cssをよく使う人なら既におなじみ、transitionプロパティによるアニメーション。 例えばhoverをしたとき、スムーズに画像を拡大等してくれます。 コードの例 使用比較 See the Pen デフォルトアニメーション by kkdd (@kk8kk) on CodePen. これでもアニメーションが滑らかになって十分ではあるのですが、アニメーションをがっつり使うならcubic-bezierというイージング（動きの加減速）をさらに細かく自分で指定できる関数を使用した方 […]
Webサイトを見ると最初に色が敷かれてから画像などが表示、そのあと敷かれた色は非表示に…というアニメーションをよく見かけると思います。 言葉にするとややこしいですが図にすると下のような感じです。 これは、CSSのアニメーショと少しのjsで対応できます。 早速作り方の詳細を見ていきましょう。 目次1 実際にアニメーションを作ってみよう1.1 jqueryなどを読み込ませておく1.2 HTMLを書く1.3 CSSとjsでアニメーションの設定をしていく1.3.1 色が敷かれて消えて […]
初めて入れるアプリは起動時に「どういうアプリなんだろう…？」と恐る恐る使うことがたまにあります。 そんな気持ちを少しでも和らげてくれるのが『ウォークスルー画面』です。 アプリ初回起動時などに特徴や使い方などを解説してくれる画面て見覚えがありませんか？ それを『ウォークスルー画面』と呼びます。 今回はそんないろんなアプリの『ウォークスルー画面』を集めてみましたので、デザインなどの参考にどうぞ。 目次1 GO2 LINE 公式アカウント3 SODA4 しまむら5 タイミー6 Po […]
WordPressで一覧表示をする時、例えば現在から1週間以内、1か月以内、1年以内…など一定期間内のものだけ表示させたいということがあるかと思います。 そんな時はWP_Queryの引数内の『date_query』を使用してうまく表示できるようにします。 投稿の一覧表示に『date_query』を使う まずは通常の投稿のループを記述して、その中に『date_query』を追加していきます。 今回は現在から、という指定なのでbeforeについてはnowを指定しています。 aft […]
WordPressには 購読者 寄稿者 投稿者 エディター 管理者 といった5つの権限がデフォルトで存在します。 これは記事を登録できる人、記事は登録できず閲覧だけできる人…などの設定がされています。 ただ、運用での条件に合った権限がないという場合もあります。 そんな時は『User Role Editor』という自分の好きなように権限を割り振ることのできるプラグインを使います。 目次1 まずはプラグインをインストール2 一般設定画面3 権限設定画面3.1 権限グループを作ろう […]
カスタムフィールドのプラグインとして便利な『Smart Custom Fields』。 無料ながら繰り返しフィールドも使えたり重宝しているのですが、『メディア』を使用するときに「メディアを絞り込む」の部分が「すべてのメディア」になっているにも関わらず画像だけが表示される現象が起きます。 絞り込みを切り替えたら表示されるのですが、PDFなどをメインで登録したいときなどは若干不便です。 今回は「すべてのメディア」で画像以外のメディアがきちんと表示される方法をご紹介します。 とはい […]
borderにグラデーション、いざやってみようと思うとあれ？borderプロパティに対してグラデーションをかけたらいいのかな？と少し戸惑います。 ちょっとしたコツさえつかめばすぐに再現できますので、ためしてみましょう！ 実際にやってみよう というわけで実際にやってみましょう。 See the Pen グラデーションborder by kkdd (@kk8kk) on CodePen. はい、できました。 cssだけで見てみましょう。 まずは通常のborderを指定します。ベー […]
WordPressではカテゴリーがデフォルトだとチェックボックスになっています。 運用の都合で複数にチェックをつけさせたくないな…という場合があるので、そんな時はチェックボックスをラジオボタンにしましょう。 目次1 functions.phpに記述をしていこう1.1 通常の『投稿』の場合1.2 カスタムタクソノミーの場合 functions.phpに記述をしていこう ※必ずfunctions.phpのバックアップを取りつつ作業をしてください。 通常の『投稿』の場合 通常投稿の […]
Google AnalyticsがGA4にアップデートされてから、デフォルトの状態では性別や年齢などのユーザー属性は取得できないようになりました。今回はその設定や手順を紹介します。 もしまだGA4に移行していなければ、ぜひこちらもご確認ください。 Googleアナリティクス現行verが2023年7月廃止！新verに移行する方法を解説 目次1 GA4はデフォルトではユーザー属性が取得できない2 Googleシグナルの設定方法2.1 1.GoogleAnalyticsのダッシュボ […]
様々なデバイス対応をしなければいけない昨今、フォントサイズの指定は悩みどころだったりしますね。 そこで『clamp()』関数を使用すれば1行でフォントサイズの最小値、基準値、最大値を指定することができ、使いようによってはメディアクエリで細かく指定する手間が省けます。 目次1 clamp()を実際に使ってみよう2 clamp()関数はフォントサイズ以外にも使える3 基準値に対して最大値か最小値だけ設定したい3.1 max関数3.2 min関数 clamp()を実際に使ってみよう […]
運営会社:株式会社8bit
制作サービス
運営サービス
