新着記事

プログラミング

【phpdotenv】PHPで環境変数を取り扱うお話

PHPでサーバーの環境ごとに設定ファイルを用意する場合、config.phpなどのファイルにデータベースの接続情報やAPIのキーなどをdefineで登録すると思います。 これは昔からある一般的なやり方ですが、例えば「ローカル環境やテスト環境と本番環境で情報を出し分けたい」「GitHubやSubversionなどに接続情報を管理されたくない」ということがあるかと思います。 Linuxの場合は「.env」でユーザーごとの情報をあらかじめ設定することが可能ですが、PHPだとデフォル […]

Webサービス

【CAPTCHA系】reCAPTCHAの代替サービスを紹介するお話

みなさん、reCAPTCHAを使ってますか? CAPTCHAと呼ばれる機能は問い合わせフォームやログインフォームなどいわゆるbot系対策として有効で、その中でもreCAPTCHAは無料かつ簡単に導入できるたため、様々な場所で使われてます。 目次1 2024年4月から実質有料化?2 他にないのだろうか?3 アカウントを作る4 PHPでの実装5 最後に 2024年4月から実質有料化? しかし、2024年4月から今まで100万リクエストまで無料だったのが、1アカウント合計1万リクエ […]

Webサイト制作

Webアクセシビリティの基本を学ぼう!

近年Webサイト制作時に求められる『Webアクセシビリティ』。 正直なんだかよくわからない、ややこしそうだなあと思う方も多いと思います。 自分も勉強中ではありますが、今回は対応しやすそうな内容をなるべくわかりやすくまとめてみました。 一緒にWebアクセシビリティについて学んでいきましょう。 目次1 そもそもWebアクセシビリティってなに?2 基本的な対応内容2.1 色のコントラストをはっきりさせよう2.2 文字サイズを変更できるようにしよう2.3 できるだけテキストベースを心 […]

プログラミング

【PHP】ソーシャルログインに対応したお話(LINEログイン編) ②

前回はLINE Developersでチャネル登録までを行いました。 今回は実際にPHPでログインを実装していきます。 目次1 初期設定を定数にする2 LINE ログインのURLを作成する3 コールバック時の処理4 最後に 初期設定を定数にする 最初にdefineでチャネル登録した情報やAPIのURLを定義します。 メールアドレスを取得したい場合はLINE_SCOPEに「email」を追記してください。 LINE ログインのURLを作成する LINEログインに利用するログイン […]

Webサービス

【PHP】ソーシャルログインに対応したお話(LINEログイン編) ①

今回はLINEログインです。 LINEログインは他のソーシャルログインと違って、電話番号必須なので、ユーザーがアカウントを無限に発行するということがなく、しかもOSに関係なくアカウントを使用できるので、特にB2Cサービスを考える場合には是非導入を進めたいと思います。 逆に法人サービスで使う場合、法人担当者が個人のLINEアカウントを使用することはないと思うので、あくまで個人向けサービスがよいかなと思います。 LINEログインについての概要はこちらに詳しく書いています。 htt […]

プログラミング

【PHP】ソーシャルログインに対応したお話(Apple ID編) ②

目次1 前回のおさらい2 実装に必要な情報3 PHPで実装してみる4 戻り先の処理4.1 composerでライブラリのインストール4.2 処理の説明4.3 実際のソース5 最後に 前回のおさらい 前回は「Appleでサインイン」を実装する前の下準備をまとめました。 今回は実際にPHPで実装をしたいと思います。 なお、ソーシャルログインについて実はFirebase上でできるぽいのですが、今回はそれを使わずに実装したいと思います。 実装に必要な情報 前回Apple Develo […]

Webサービス

【PHP】ソーシャルログインに対応したお話(Apple ID編) ①

こんにちは 早速ですが、会員サイトを作る上で割とめんどくさいのがログイン機能です。 メールアドレスを入れてもらってそのアドレスが有効かどうかの判定を行う、パスワード管理など割と面倒くさいのですが、そこら辺の過半数をソーシャルログイン(SNSログイン)にしてしまうことが可能です 最近ではGoogleアカウント、Apple ID、LINE ID、X(旧Twitter)アカウント、Facebookログインなどいろいろありますが、実装する以前の下準備が少しめんどくさいのでまとめました […]

マークアップ

疑似クラス:has()を活用してみよう!

CSSの疑似クラスである:has()がようやく全ブラウザに対応してくれました! 「:has()ってなんだ?」という方もいらっしゃるかもしれません。 例えば通常は水色のボックスである『#abc』の中に『.xyz』が現れると『#abc』の背景をピンクにする、ということができます。 これまでは親要素に対して子要素が影響を与えることはJavaScriptなどに頼る必要があり、cssのみでは困難でした。 けれど:has()すべてを解決してくれます。 活用方法-チェックボックスの装飾 個 […]

マークアップ

【CSSのみ】スムーススクロール+アンカーリンク時の固定ヘッダーのずれを調整

今までの流れで、何となくスムーススクロールやアンカーリンク時の固定ヘッダーのずれをjsなどで処理していませんか? 実はCSSのみで対応できるようになっています。 主要なブラウザには対応していて、なおかつ簡単にできるので、ぜひ使っていきましょう。 目次1 CSSだけでスムーススクロールをする1.1 実際のイメージ2 CSSだけでアンカーリンク時の固定ヘッダーのずれを調整する2.1 実際のイメージ CSSだけでスムーススクロールをする まずはcssだけでスムーススクロールをする方 […]

WordPress

WordPressにプッシュ通知をつけるプラグイン(と通知用API)を作ったお話

最近は企業サイトやブランドサイトでもWordPress(以下WP)でのサイト構築が増えてきました。 弊社でもWPでのサイト構築やリニューアルなどが増えてきており、今後も需要が増えてくると思います。 また、今使っているWPのサイトをアプリ化したい(WebViewなどで)という事もあるかと思うので、その場合、比較的簡単にプッシュ通知を実装できるプラグイン(と通知を行うAPI)を作ってみました。 目次1 どんな構成2 プラグインはどんな機能?3 APIはどんな機能?4 他に必要な情 […]

Webデザイン

【Photoshop】生成塗りつぶしを使ってみよう【AI】

Photoshop 2024(ver.25)から本格的にAIによる生成機能が追加されました。 今回はどんなことができるか、基本的なものをご紹介していきます。 目次1 対象のものを削除したい2 カンバスを広げて、画像を拡張する3 要素をほかのものに置き換える4 元々存在しない要素を付け足す 対象のものを削除したい ではまず、対象のものを削除する方法です。 Photoshop 2024(ver.25)で生成塗りつぶしに使いたい画像を開きましょう。 画像を開いたら、削除をしたいもの […]

Webデザイン

【AI画像生成】Adobe Fireflyを使ってみよう!【商用利用可】

昨今ますます勢いを増すAI画像生成。 今回はAdobe社の提供するFireflyという画像生成AIを使ってみましょう。 このような高画質の画像を生成することができます。 目次1 Adobe Fireflyの特長1.1 著作権問題がクリア1.2 商用利用可1.3 無料ユーザーでも使用可能1.4 新たにツールなどをダウンロードする必要なし2 Fireflyの使い方2.1 1.Fireflyにアクセス2.2 2.「テキストから画像生成」を押す2.3 3.生成したい内容のテキストを入 […]

プログラミング

【PHP】PHPでExcelファイルを操作するお話 その2

目次1 前回は・・・2 考え方3 保存したフォーマットにデータを入れる4 ExcelからPDFへ変換する4.1 mpdfで変換する4.2 TCPDFで変換する4.2.1 IPAexフォントのインストール5 結局何がいいの? 前回は・・・ 前回はPHPでExcelファイルを操作する方法をまとめました。 基本的にはCSV出力や一括登録の代替案としてまとめましたが、PhpSpreadsheetを使うことでExcelで作成した書類のフォーマットにPHPでデータを入力してPDFで出力す […]

プログラミング

【PHP】PHPでExcelファイルを操作するお話 その1

目次1 こういうことってないですか?2 インストール方法3 PHPでライブラリの呼び出し方4 Excelファイルのエクスポート方法4.1 ちなみに・・・5 Excelファイルのインポート方法6 これを組み合わせると??? こういうことってないですか? webでの管理システムを設計するときに「CSVでインポートやエクスポート機能を付けてよ」って言われる事があります。 インポートに関しては一括登録や一括削除や更新など割とリスクが大きいのですが、エクスポートはあったりします。 CS […]

スマホアプリ

【Android】スプラッシュスクリーンを設定するお話

スマホアプリを作る上で欠かせない・・・訳ではないですが、アプリの構成に必要なのはスプラッシュスクリーン(以下スプラッシュ画面)ですよね 目次1 そもそもスプラッシュ画面とは?2 Androidアプリで実装する場合(今まで)3 SplashScreen API登場3.1 スプラッシュ画面用のActivityを用意する3.2 themes.xmlにテーマを記述する そもそもスプラッシュ画面とは? スマホアプリにかかわらず、ほとんどのアプリやプログラムを起動した際に一瞬表示される画 […]

マークアップ

実際のサンプルでアニメーション解説 [オープンキャンパス特設サイト]【CSS/JS】

WEBサイト作成時にこのアニメーションがよくわからない…ということがあると思います。 今回は弊社で作成した『受験生向け女子大学のオープンキャンパス特設サイト』のサンプルを使用しながら解説していきます。 初歩的なアニメーションの知識はある、という方向けの記事です。 参考にするサンプルサイトはこちらから 目次1 inview.jsを読み込ませる2 スライドアニメーション2.1 スライド本体2.2 切り替わりの時に白い帯を表示させる2.3 スライド画像を徐々に拡大させる2.4 ペー […]

マークアップ

実際のサンプルでアニメーション解説 [焼肉用のお肉ネット通販特設サイト編]【CSS/JS】

WEBサイト作成時にこのアニメーションがよくわからない…ということがあると思います。 今回は弊社で作成した、[焼肉用のお肉ネット通販特設サイトのサンプルを使用しながら解説していきます。 初心者向けの記事です。 参考にするサンプルサイトはこちらから 目次1 動画再生1.1 スクロールしていくと動画の上をコンテンツが通るようにするには?1.2 スマートフォンの時は?2 無限ループスライド3 hoverしたら背景色を横から敷く 動画再生 メインビジュアルで動画を再生させています。 […]

マークアップ

実際のサンプルでアニメーション解説 [ホームセキュリティ編]【CSS/JS】

WEBサイト作成時にこのアニメーションがよくわからない…ということがあると思います。 今回は弊社で作成した、ホームセキュリティサイトのサンプルを使用しながら解説していきます。 初心者向けの記事です。 参考にするサンプルサイトはこちらから 目次1 inview.jsを読み込ませる2 各要素をフェードインして表示させる3 マウスホバーでボタンのグラデーションを動かす4 アコーディオン inview.jsを読み込ませる 今回は場所によっては『inview.js』というライブラリを読 […]

マークアップ

実際のサンプルでアニメーション解説 [採用サイト編]【CSS/JS】

WEBサイト作成時にこのアニメーションがよくわからない…ということがあると思います。 今回は弊社で作成したサンプルを使用しながら解説していきます。 初歩的なアニメーションの知識はある、という方向けの記事です。 参考にするサンプルサイトはこちらから 目次1 inview.jsを読み込ませる2 メインビジュアル・内部のテキストがふわっと表示する2.1 メインビジュアルをふわっと表示2.2 領域内でテキストを下から上に表示3 テキストが下から上にフェードイン4 色が敷かれてから画像 […]

マークアップ

Intersection Observer APIを使って要素をアニメーションをさせてみる【初めての人向け】

今回はIntersection Observer APIを使用してのアニメーションの方法をご紹介します。 正直この記事を書いている私も今手探りの状態なので、完全に初心者の方向けの記事です。 一緒に勉強していきましょう。 目次1 Intersection Observer APIってなに?2 ひとまず書き方に慣れるために Intersection Observer APIってなに? まずIntersection Observer APIってなに?という方もいると思います。 日本 […]

マークアップ

スクロールバーをCSSで装飾しよう!【chrome・edge・Firefox】

CSSでのスクロールバーの装飾。 以前はchromeとあたりの対応だけだったのが、いつの間にかFirefoxも対応していたので今更感もありますがまとめておきます。 目次1 chrome・edge・safari2 Firefox3 Firefoxに自由度がないから指定はほどほどにした方がいいかも chrome・edge・safari まずは手始めにchrome・edgeの方法をご紹介します。 See the Pen Untitled by kkdd (@kk8kk) on Co […]

プログラミング

ChatGPTを使って文章を作ってもらう時のアイディア

今まで何となく触っていただけのChatGPT。ちょっと色々と文章を作成してみる機会があったので、私なりのアイディアやコツなどを書いてみます。 もう少しシステム的な記事はこちらをご確認ください。 目次1 ChatGPTに登録をする1.1 1.ログイン/サインアップページを開く1.2 2.登録するメールアドレスなどを入力・選択する1.3 3.パスワードを入力する1.4 4.入力したメールアドレス宛のメールを確認1.5 5.アカウント名を入力1.6 6.電話番号を入力・SMS認証を […]

スマホアプリ

【iOS】アプリでAdMobのGDPRに対応したお話

目次1 前回のあらすじ2 ひょっとしてATTも対応してくれる?2.1 アプリを選択2.2 言語を選択2.3 IDFAメッセージ2.4 ATTメッセージ2.5 GDPRメッセージ 前回のあらすじ 前回はAdMobのGDPRメッセージ対応行うため、AndroidアプリでGDPRメッセージを表示するための方法をまとめました。 なので今回はiOSアプリで実装したいと思います。 ひょっとしてATTも対応してくれる? プライバシーとメッセージを見てみると「IDFA説明メッセージ」というも […]

マークアップ

hoverや時間経過などでグラデーションをアニメーションさせよう!

webサイトのサイトデザインでもよく使うようになったグラデーション。 例えばボタンに使った時にhoverしたとき、背景に使用したときなどにグラデーションの色をアニメーションさせながら変化させることができます。 目次1 hoverしたときにグラデーションが動く2 時間経過でグラデーションが動く hoverしたときにグラデーションが動く hoverしたときにグラデーションが左の方に流れていくようなイメージです。 それでは実際のHTML・CSS、動作を見てみましょう See the […]

スマホアプリ

【Android】アプリでAdMobのGDPRに対応したお話

目次1 どうしたAdMob?2 AdMobの画面からアプリ向けメッセージの作成2.1 アプリを選択2.2 言語を選択2.3 ユーザーの同意オプション2.4 ターゲティング3 Androidアプリに実装する。4 (おまけ)データセーフティを申告する4.1 データの収集とセキュリティ4.2 データの種類5 最後に6 参考 どうしたAdMob? ふとAdMobのページを見ていると 年内には、欧州経済領域と英国のユーザーをターゲットとして広告を配信するすべてのパブリッシャー様に、Go […]

1 2 3 39