新着記事

マークアップ

Googleアナリティクス現行verが2023年7月廃止!新verに移行する方法を解説

先日Googleから、Googleアナリティクスの現行バージョン(ユニバーサルアナリティクスといいます)が2023年7月に廃止というアナウンスがなされました。 サポート自体が終了となるため、期間内に新バージョンのGoogleアナリティクス4プロパティに移行が必要になります。今回は、移行が必要かどうかの見分け方や、以降の方法を紹介します。 目次1 現行verと新verの見分け方1.1 プロパティIDの確認方法2 アナリティクス4に移行する2.1 gtag.js(グローバルサイト […]

マークアップ

脱初心者!Google Analytics活用法【イベントトラッキング・参照元(utm)】

機能豊富なGoogle Analyticsですが、画面も複雑で、サイトに計測タグ仕込んだだけでそのままな場合も多いのではないでしょうか。 一段階ステップアップして、イベントトラッキングと参照元の機能を使用してみましょう。 これらを活用すれば、より深い分析が可能です。 目次1 イベントトラッキング1.1 イベントトラッキングとは?1.2 使用方法1.2.1 イベントハンドラ1.2.2 アクション1.2.3 カテゴリ1.2.4 ラベル1.2.5 値1.3 動作の確認1.4 計測デ […]

WordPress

【WordPress】カスタム投稿のsingleページを消して、投稿ページでパーマリンクも表示させない

Wordpressでカスタム投稿を作成したとき、使い方によってはsingleがいらない…なんて時もあります。 また、ややこしいので投稿ページでパーマリンクも表示させたくなかったりします。 そんな時はfunctionにちょっと記述をするだけで簡単に実現できます。 目次1 singleページを消す(404ページにする)2 投稿画面でパーマリンクを非表示にする singleページを消す(404ページにする) まずはsingleページを消す方法です。 以下の1行をfunctionに追 […]

マークアップ

CSSを使って画像をマスクしよう!

特殊な形で画像を切り抜きたい時単純に1枚画像を用意することもできますが、例えば切り抜きたい画像が動的に変わる場合などはCSSで画像を自由な形で切りぬくことができるようにしておくと便利です。 今回はCSSで画像をマスクする方法をご紹介します。 目次1 mask-image プロパティ2 clip-path プロパティ3 background-clip mask-image プロパティ mask-imageプロパティを使うと、指定した画像の形で切り抜くことができます。 基本的にマ […]

スマホアプリ

【android】Webview内のJavascriptやjQueryからアプリ内の関数を呼び出すお話

スマホアプリを作る上でWebViewを抜きには作ることができません。 ゲームやツール系の場合はアプリで実装する必要がありますが、ウェブサービスとの連動を行う場合は、WebViewで作った方が便利だったりします。(androidやiosでの出し分けも不要だったりするので) ただ、アプリ→WebViewやWebView→アプリといったデータの受け渡しが必要になると思います。 例)WebViewのボタンを押すとアプリ内課金の画面が表示される、一覧はwebViewで詳細はアプリ側で表 […]

スマホアプリ

【Admob】アプリで設定せずにテスト広告を表示するお話

アプリで広告をつける場合メジャーどころなのはAdmobだと思いますが、Admobはアプリ開発者がタップするのを禁じています。 もちろん誤タップもあるので1回タップした時点でNGと言うわけではないですが、何度もやっていると広告が配信されなくなったりアカウントがBANされる可能性もあります。 ですのでAdmobもアプリ開発を行う上で、テスト広告というものを用意し、それを利用することで、上記のペナルティを回避することができます。 目次1 テスト広告IDを使用する2 テストデバイスを […]

スマホアプリ

【Apple】iOS14以降でトラッキング許可を行うお話

目次1 はじめに2 なぜトラッキング許可が必要?3 Swiftで実装する3.1 Google Mobile Ads SDKのバージョンを7.64.0以降にアップデートする3.2 App Tracking Transparency で許可をリクエストする3.3 実際に許可を表示する4 アプリの多言語化について4.1 多言語化の設定について4.2 InfoPlist.strings を作成する4.3 ちなみに5 最後に はじめに もう1年ほど前の話になりますが、iOSアプリでAd […]

プログラミング

Laravelを使ってREST APIを作ってみるお話 (インストール編)

目次1 今回のゴール2 Laravelのインストール2.1 インストール前に2.2 インストールを行う2.3 フォルダのパーミッションを確認する2.4 webサーバーにアップし、確認する3 データベースの設定を行う。3.1 マイグレーションファイルの作成3.2 マイグレーションファイルの編集3.3 フィールドを追加する場合4 最後に 今回のゴール 今回はComposerからLaravelをインストールし、webサーバーで表示され、データベースの構築が行えるまで。 (REST […]

プログラミング

フォームのバリデーションでよく使う項目をまとめた小話

問い合わせフォームや登録フォームなどで入力した値のバリデーションチェックは必須ですが、「あれってなんだったかな」ということがあるので、備忘録代わりにまとめました。 「いや、今ならフレームワークやライブラリであるだろ」というのがある気もしますが… 目次1 絵文字のチェック2 機種依存文字のチェック3 URLの正規表現4 最後に 絵文字のチェック 今はデータベースの文字コードがutf8mb4であれば絵文字も問題なく登録できますが、古いデータベースでutf8までしか対応していなかっ […]

プログラミング

プレーンなPHPで2段階認証(Google Authenticator)を導入するお話

最近はログインID/PW方式だけではセキュリティ的に厳しいと言うことで様々な認証方式が使われています。 SMSを使ったSMS認証もあるのですが、最近はOTP(One Time Password)を用いた認証方式が増えてきています。 スクウェア・エニックスのOTPはネットゲームを行うユーザーには有名でしょうか 目次1 なんかめちゃくちゃ大変そう…2 スマホアプリで認証システムをダウンロードする3 「PHPGangsta/GoogleAuthenticator」をインストールする […]

WordPress

WordPressでプラグインを作るお話

WordPress(以下WP)はメジャーなCMSであり、様々なプラグインがあるのでそれを利用していろんなサイトを作ることができます。 ただ、どうしても既存のプラグインでは対応できない事もあり、そういう場合は独自でプラグインを作ってしまった方がよかったりしますね。 具体的にはフルスクラッチのCMSをWPに移植する場合などです。 今回は独自プラグインをどうやって作るのかをさわりの部分だけ説明します。 目次1 プラグインの機能1.1 ファイル構成1.2 プラグインの情報を設定する1 […]

プログラミング

Windows10でComposerをインストールするお話

そもそも「Composer」ってなによ? 「Composer」とはPHPのパッケージライブラリ管理ツールで、フレームワークを含むPHPのパッケージをわざわざダウンロードせずにコマンドだけでインストールすることができる非常に便利なものです。 例えばあるライブラリを使いたい場合、そのライブラリの公式サイトを探してzipやtar.gzなどの圧縮ファイルをダウンロードして展開して所定の場所に置いて・・・ってめんどくさいですが 「Composer」を使うと、ライブラリを記述して叩けば自 […]

プログラミング

FuelPHP を無理矢理PHP8.1に対応するお話

FuelPHPのPHP8.1対応(無理矢理編) 皆さん、PHPのフレームワークは何を使っていますか? 今から学ぶなら「Laravel」や昔ながらの「CakePHP」でしょうか? 私は数年前から「FuelPHP」というフレームワークを使っていて「なんて開発しやすいんだ」と感動した記憶があります。 ところが、FuelPHPのリリースがピタッと止まり、PHPのバージョンアップに対して暗雲が立ちこめてきました。 てかフレームワークの選定ミスはかなり痛いですね。私は先物取引には金輪際手 […]

Webサイト制作

WEBデザイナーの私が産休明けのリモートワーク期間中に使用したツールや、困ったこと

コロナ禍ということもありましたが、私自身産休明けですぐに出社は難しく、在宅で1年間作業をしていました。 その際に使用して便利だったツールや、困ったことなどの所感を書きたいと思います。 目次1 使用していたツール1.1 TeamViewer1.1.1 メリット1.1.2 デメリット1.1.3 TeamViewerで制作作業を行うコツ1.2 Grmo1.2.1 メリット2 その他に困ったこと2.1 Windows GameBarを開くことができない2.2 文字でのコミュニケーショ […]

スマホアプリ

Android Studio上で、jpgやpngなどの画像をWebPに変換しよう

アプリの容量を少しでも減らすために、画像の軽量化をしたいということがあるかと思います。 ただ、すでに追加した画像をいじるのは少々手間です。 そんな時はAndroid Studio上で、画像をWebPに変換することができます。 WebPはGoogle公式が開発している静止画のフォーマットのことで、圧縮率が高く容量が軽く済みます。 早速Android Studioで試してみましょう。 目次1 Android Studio上で画像をWebPに変換しよう2 YoutubeChanne […]

WordPress

WordPressの投稿一覧画面をカスタマイズするなら『Admin Columns』

Wordpressの投稿一覧画面で例えばアイキャッチ画像や設定したカスタムフィールドの値などの表示をしたい、ということがあると思います。 functionへの記述でも実現はできますが、お手軽にわかりやすく対応できるのが『Admin Columns』というプラグインです。 目次1 インストールしよう2 設定をしよう3 タイプなどのオプション3.1 タイプの例 インストールしよう ひとまずインストールしましょう。 管理画面から行う場合は『プラグイン>新規追加』から『Admin C […]

WordPress

【WordPress】カスタム投稿内でカスタムタクソノミーをセレクトボックスで絞り込み検索したい

カスタム投稿内、かつカスタムタクソノミーをセレクトボックスで検索したいときに地味に悩んだので書き残しておきます。 見た目のイメージとしては下の画像のような感じです。and検索です。 目次1 searchform.phpにフォームを作る2 searchform.phpに記述していく searchform.phpにフォームを作る とりあえずsearchform.phpのような別ファイルを作成してフォームの記述をしていきます。 この作成したテンプレートを呼び出すには または などの […]

Webデザイン

【PremierePro】自動追尾で動画の被写体にモザイクをかける

PremiereProのモザイクフィルターを使用すれば、ワンクリックで簡単にモザイクをかけることができます。 目次1 被写体を自動追尾する便利機能2 手順2.1 1.モザイクエフェクトをかける2.2 2.モザイクの範囲を調整する2.3 3.自動追尾する3 YoutubeChannelのご紹介 被写体を自動追尾する便利機能 PremiereProのモザイクフィルターは、被写体を自動追尾します。 歩く男性の顔にモザイクをかけ、自動追尾させた例です。簡単にできるのでやってみましょう […]

スマホアプリ

【解決方法】Android Studioでボタンの装飾ができない?

Android Studioでは4.1以降Material Componentsを使用しているため、デザイン面で強制的にデフォルトのマテリアルデザインが反映されます。 便利な時もあるのですが、反面自分で装飾をしたい…というときに迷うこともあるので解決方法を残しておきます。 目次1 ボタンを置いた時の表示2 android:backgroundTintの指定も効かないことがある3 まとめ3.1 通常だったら3.2 もし変更できなかったら ボタンを置いた時の表示 とりあえずこんな […]

マークアップ

position: sticky;を使って追従してくる要素を作ってみよう

WEBサイトを見ていると例えばスクロールをしたときにヘッダーが追従してくる、といった動作はよく見かけると思います。 だいたいposition:fixed;等のcssとjs等の組み合わせをしていることが多いと思いますが、cssでposition: sticky;を使うとすぐに実現できます。 目次1 ヘッダーを追従させてみる1.1 フッターも追従させてみる2 パララックス的な表現をしてみる3 ブラウザの対応状況 ヘッダーを追従させてみる 実際の画面をとりあえず見ていただくと早いか […]

スマホアプリ

Android Studioで外部のフォントを追加して使ってみよう!

Android StudioではデフォルトでGoogle Fotntsをダウンロードする機能があるので、比較的フォントの選択肢が幅広いです。 ただ日本語フォントは用意されていないものも多く、自分で用意してインストールをする必要があります。 今回はAndroid Studioでのフォントのインストールと使用できるようになるまでをご紹介します。 とりあえずフォントを反映させるテキストを置いてみました。 では進めていきます。 目次1 フォントを用意する2 Android Studi […]

Webデザイン

【PremierePro】Ultraキーを使って動画の背景を透明に切り抜く

Premiere ProのUltraキーエフェクトを使用すると、動画の一部を透明にすることができます。 イメージ的には、テレビの天気予報でキャスターと定点カメラの映像を合成して表示するといったような状況で使用できます。最近では、実況動画などでも似た手法がよく見受けられますね。 目次1 Ultraキーの特徴2 Ultraキーの使い方3 YoutubeChannelのご紹介 Ultraキーの特徴 Ultraキーは、動画の背景を透明にすることができます。 実際には特定色を指定して透 […]

マークアップ

CSSだけでカルーセルを実装する

IEがお役目を終えるということで、CSSでスクロールスナップが使用できるようになります。 これを使用すると、CSS数行で簡易的なカルーセルを実装できるようになります。 特にスマートフォンなどのタッチデバイスではJSでの実装とほとんど変わらないような操作感を実現できます。 <JSを使用しないスクロール例> 目次1 スクロールスナップさせる2 実装例 スクロールスナップさせる スクロールをスナップさせるには、scroll-snap-typeとscroll-snap-alignを使 […]

スマホアプリ

【Android Studio】アプリアイコンの設定をしよう!

アプリを作るからには必要不可欠なアプリアイコン。 色々なサイズを1から用意しなければならない…?など不安に思うかもしれませんがAndroid Studioの機能を使えばあっさり登録できます。 目次1 アプリアイコンの設定をしよう2 アイコン設定をした後のビルドでエラーが出たら3 YoutubeChannelのご紹介 アプリアイコンの設定をしよう プロジェクトの中で『res』を右クリックします。 するとメニューが表示されるので『新規』を選択。 設定に問題なければ『次へ』をクリッ […]

マークアップ

【CSS】乗算・やオーバーレイなどのブレンドモードで要素を重ねる

Photoshopなどのグラフィックソフトで使用する乗算やオーバーレイなどのブレンドモードですが、CSSでも使用することができます。 目次1 mix-blend-mode2 ブレンドモード一覧3 対応ブラウザ4 YoutubeChannelのご紹介 mix-blend-mode ブレンドモードを使用するには、前面に重なる要素に、CSSで mix-blend-mode を追加するだけでOKです。簡単ですね。 <HTML> <CSS> 画像と背景が重なるように配置し、div.ba […]

1 2 3 4 5 6 39