新着記事

WordPress

【WordPress】カスタムフィールドを使って記事をピックアップ表示しよう

WordPressで記事をピックアップして掲載したいということがあるかと思います。 そんな時はカスタムフィールドを使うと便利です。 目次1 カスタムフィールドを用意しよう2 表示の設定をしよう3 管理画面の記事一覧でチェックを入れているものをわかりやすくしたい カスタムフィールドを用意しよう カスタムフィールドを用意する方法はなんでもいいですが、今回はAdvanced Custom Fieldsを使います。 Advanced Custom Fieldsをインストールしたら管理 […]

プログラミング

Twitter「API制限」と「Twitter API」のお話

2023年6月末から7月2日にかけて、Twitter界隈で大きな話題となった「Twitter制限」について 一体何が起きたのかと言うことを、色々と調べながらまとめながら自分の考えを述べてみます。 目次1 何が起きた?2 なぜこんなことをするの?3 なんか最近のTwitter、課金ばっかりじゃない?4 結局どうなった? 何が起きた? 簡単に言うと「突然Twitter APIの制限をかけることで、Twitterが表示されなくなる」という現象が発生しました。 ツイッターが閲覧制限、 […]

スマホアプリ

アプリのリリースタイミングを手動で行うお話

目次1 審査合格=リリース?2 Googleアプリ(Android)の場合3 iOSアプリの場合4 大事なのは… 審査合格=リリース? 自分たちで作成したスマホアプリをプラットフォームにアプリレビューをお願いして、合格すれば無事リリースとなりますが、この場合審査終了後に自動的にリリースされてしまうので、例えばリリース日を設定したいときは困りますよね と言って当日に審査に出しても必ず通るかというとそうでもないですし、リジェクトされると翌日以降となってしまいます。 そこでアプリの […]

スマホアプリ

【Kotlin】Google Play Billing Library 6 でアプリ内課金を実装し直したお話

目次1 毎年恒例のアップデート2 実際にバージョンアップしてみた2.1 Purchase.PurchaseState.PENDINGの時のOrderIdがnull2.2 setReplaceProrationMode とかは非推奨2.3 ちなみに…3 最後に 毎年恒例のアップデート Androidアプリでアプリ内課金をするにはGoogle Play Billing Libraryを使う必要があるのですが、これは毎年メジャーアップデートされており、現在はバージョン6まで出ていま […]

プログラミング

SPIRAL APIを使ってPHPと連携したお話

目次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は、柔軟なデー […]

プログラミング

【2023】PHPでTwitter APIを使って ツイートを行うお話【v2】

目次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月になって突然ツイートできな […]

プログラミング

ChatGPTをシステム開発に役立てるお話

目次1 chatGPTは素晴らしい?ポンコツ?2 ダミーデータを作成させる3 翻訳に使う4 ちょっとしたスクリプトを作って貰う5 SQL文も作ってみる6 苦手な例6.1 実在するデータを取得する場合6.2 リアルタイム情報を聞く6.3 Wikipediaのような使い方はできない7 最後に… chatGPTは素晴らしい?ポンコツ? 少し前に話題になったChatGPTですが、皆さん使ってますか? サービス開始してから日が浅く、APIのバージョンも3.5で情報が2021年9月までと […]

マークアップ

cubic-bezierを使ってアニメーションの雰囲気を変えてみよう!

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

【WordPress】記事の一覧を過去一定期間内のものだけ表示しよう

WordPressで一覧表示をする時、例えば現在から1週間以内、1か月以内、1年以内…など一定期間内のものだけ表示させたいということがあるかと思います。 そんな時はWP_Queryの引数内の『date_query』を使用してうまく表示できるようにします。 投稿の一覧表示に『date_query』を使う まずは通常の投稿のループを記述して、その中に『date_query』を追加していきます。 今回は現在から、という指定なのでbeforeについてはnowを指定しています。 aft […]

WordPress

WordPressのユーザー権限を『User Role Editor』を使って管理しよう

WordPressには 購読者 寄稿者 投稿者 エディター 管理者 といった5つの権限がデフォルトで存在します。 これは記事を登録できる人、記事は登録できず閲覧だけできる人…などの設定がされています。 ただ、運用での条件に合った権限がないという場合もあります。 そんな時は『User Role Editor』という自分の好きなように権限を割り振ることのできるプラグインを使います。 目次1 まずはプラグインをインストール2 一般設定画面3 権限設定画面3.1 権限グループを作ろう […]

WordPress

Smart Custom Fieldsなどのプラグインを使ったときにメディアでPDFなどが一覧で表示されないときの対処法【WordPress】

カスタムフィールドのプラグインとして便利な『Smart Custom Fields』。 無料ながら繰り返しフィールドも使えたり重宝しているのですが、『メディア』を使用するときに「メディアを絞り込む」の部分が「すべてのメディア」になっているにも関わらず画像だけが表示される現象が起きます。 絞り込みを切り替えたら表示されるのですが、PDFなどをメインで登録したいときなどは若干不便です。 今回は「すべてのメディア」で画像以外のメディアがきちんと表示される方法をご紹介します。 とはい […]

マークアップ

【css】borderにグラデーションをかけよう!

borderにグラデーション、いざやってみようと思うとあれ?borderプロパティに対してグラデーションをかけたらいいのかな?と少し戸惑います。 ちょっとしたコツさえつかめばすぐに再現できますので、ためしてみましょう! 実際にやってみよう というわけで実際にやってみましょう。 See the Pen グラデーションborder by kkdd (@kk8kk) on CodePen. はい、できました。 cssだけで見てみましょう。 まずは通常のborderを指定します。ベー […]

WordPress

【WordPress】カテゴリーをチェックボックスからラジオボタンにしよう!

WordPressではカテゴリーがデフォルトだとチェックボックスになっています。 運用の都合で複数にチェックをつけさせたくないな…という場合があるので、そんな時はチェックボックスをラジオボタンにしましょう。 目次1 functions.phpに記述をしていこう1.1 通常の『投稿』の場合1.2 カスタムタクソノミーの場合 functions.phpに記述をしていこう ※必ずfunctions.phpのバックアップを取りつつ作業をしてください。 通常の『投稿』の場合 通常投稿の […]

マークアップ

GoogleAnalytics(GA4)で性別や年齢などのユーザー属性が表示されない

Google AnalyticsがGA4にアップデートされてから、デフォルトの状態では性別や年齢などのユーザー属性は取得できないようになりました。今回はその設定や手順を紹介します。 もしまだGA4に移行していなければ、ぜひこちらもご確認ください。 Googleアナリティクス現行verが2023年7月廃止!新verに移行する方法を解説 目次1 GA4はデフォルトではユーザー属性が取得できない2 Googleシグナルの設定方法2.1 1.GoogleAnalyticsのダッシュボ […]

マークアップ

『clamp()』関数を使ってフォントサイズを可変にしよう!

様々なデバイス対応をしなければいけない昨今、フォントサイズの指定は悩みどころだったりしますね。 そこで『clamp()』関数を使用すれば1行でフォントサイズの最小値、基準値、最大値を指定することができ、使いようによってはメディアクエリで細かく指定する手間が省けます。 目次1 clamp()を実際に使ってみよう2 clamp()関数はフォントサイズ以外にも使える3 基準値に対して最大値か最小値だけ設定したい3.1 max関数3.2 min関数 clamp()を実際に使ってみよう […]

Webサービス

Youtubeなどの動画作成に!フリー素材15選【2022年版】

YouTubeなどに投稿する動画で必要になる素材。 今回は基本的にフリーで手に入れられる素材を提供してくださっているサイトをご紹介します。 ※サイトや素材自体によって規約は変わるので、きちんと確認してからのご使用をお願いします! 目次1 YouTuberのための素材屋さん2 動画AC3 YouTubeオーディオライブラリ4 DOVA-SYNDROME5 効果音ラボ6 無料効果音7 魔王魂8 効果音辞典9 いらすとや10 イラストAC11 Loose Drawing12 ソコス […]

マークアップ

レスポンシブでのクリッカブルマップ対応は『image-map-resizer』を使おう!

忘れた頃にごく稀に使うことになるクリッカブルマップ。 レスポンシブでは設定したエリアがずれてしまうので『image-map-resizer』というjsに頼ります。 jQuery非依存で結構簡単に導入できます。 画像とHTMLを用意 とりあえずクリッカブルマップに使用する画像を用意します。 HTMLについては『HTML Imagemap Generator』さんを使用します。 画像をドラッグ&ドロップしましょう。 あとは右側のツールを使って図形をなぞるだけです。大変便 […]

マークアップ

iOSのSafariで100vhを使うとはみ出てしまうときはsvh,lvh,dvhを使おう!

iOSで100vhを使った場合、大きいviewportを基準にするため、小さいviewportの時はアドレスバーの分はみ出てしまったりステータスバーで予想外に隠れてしまったり…ということがあったりしますよね。 そんな時は新しい単位『svh』『lvh』『dvh』を使いましょう。 ちなみにこちらはiOS15.4以上から対応している単位なのでandroid対応も含めご注意ください。 『svh』について 『svh』では小さいviewportの方に合わせてくれます。 たぶんsmall […]

Webデザイン

素敵な配色パターンを知りたい!おすすめ配色ツールのまとめ【2022年版】

初心者だと何を選んだらいいのかわからなくなったり、そこそこ経験のある人でも同じようなものを選んでしまったりで悩んでしまう『配色』。 今回はそんな配色のヒントを得られるサイトをご紹介します。 Color Drop 4つの色の組み合わせがずらっと用意されているサイトです。 気になる色をクリックすると右側にカラーコードが発行されるので、あとはコピーするだけ。 用意されている色に限りはありますが、シンプルなものを求めている方におすすめです。 実は地味に画像から色を抽出したりカラーコー […]

マークアップ

【Grid CSS】grid-template-areasプロパティを使用して名前を付けて位置指定する

前回はGrid CSSの『grid-row』『grid-column』を使用してでレイアウトを組んでみました! 今回はそこから応用的なことをしていきましょう。 目次1 グリッド領域に名前をつけて、表示場所の指定に使用する1.1 表示場所を指定したグリッド領域のサイズ調整をする2 今回のポイント グリッド領域に名前をつけて、表示場所の指定に使用する 今回はグリッド領域それぞれに名前をつけて表示場所の指定に使用する方法をご紹介します。 (ちなみに『グリッド領域』の概念についてはこ […]

スマホアプリ

【Android】アプリを多言語対応する時、画像も対応する

Androidアプリを多言語対応したい!という時「あれ?そういえば画像はどう対応したらいいんだろう…」と悩む方もいらっしゃると思います。私がそうでした。 今回はそんな方向けの記事です。 ちなみにもともとアプリは形になっていて、テキストベースの言語の切り替えができている前提のお話です。 目次1 drawbleのフォルダを言語ごとに用意して入れていく1.1 英語に対応したい1.2 中国語の中でさらに繁体語のみに対応したい2 Android Studioでの表示を確認しよう3 実際 […]

マークアップ

CSS Gridで実際にレイアウトを組んでみよう【初心者向け】

前回初歩をご紹介したCSS Grid。 今回はもっといかにもグリッドレイアウト、という感じのことに挑戦したいと思います。 目次1 グリッド線の定義を知ろう2 定義を利用して実際の動きを確認してみよう3 ショートハンドでの指定もできる4 今回のポイント グリッド線の定義を知ろう まずはグリッド線の定義を知りましょう。基本的にはy軸、x軸的な考え方です。 y軸=row x軸=column として定義していきます。 上の画像を見ると要素の区切りになるようなところに数字が振ってあるか […]

マークアップ

CSS Gridの初歩を知ろう【初心者向け】

これまではIE対応もそこそこ必要・flexboxでなんとなくこと足りていたのでふわっとした知識だった『CSS Grid』。IE対応も無事なくなったのでこれを機に知識を少しずつ入れて模索中です。 基本的な部分を紹介するので、勉強中の方は一緒に頑張りましょう。 目次1 ボックスをグリッドで並べてみる1.1 基本のcssを使ってみる1.2 独自のサイズ指定の単位『fr』を使ってみる1.2.1 一部要素はpxで指定、それ以外を埋める1.2.2 2:1:1で指定する1.2.3 均等割り […]

1 2 3 4 39