新着記事

マークアップ

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 均等割り […]

プログラミング

PHPフレームワークについて

目次1 PHPフレームワークって何?2 メリットとデメリット2.1 メリットから2.2 デメリット3 じゃあ今のシステムを置き換えた方がいいの?4 どんなフレームワークがあるの?4.1 Laravel4.2 CakePHP4.3 FuelPHP5 最後に PHPフレームワークって何? フレームワークとはPHPで開発を行う上で必要な機能をあらかじめまとめた集合体のようなものです。 例えばバリデーションチェックやデータベースの操作、メール送信、ファイル処理など、一から作ると面倒く […]

プログラミング

iOSアプリでREST APIを使うお話

前回のREST APIをiOSアプリでも使うお話です。 こちらも割と簡単ですが、Kotlin=Javaに比べると型に関してはシビアです。 目次1 インストール1.1 CocoaPodsでインストールする。2 使い方2.1 GETの場合2.2 POSTの場合 インストール CocoaPodsでインストールする。 ライブラリが対応していれば簡単ですね。 その後、 これでインストール完了です。 使い方 こちらもAndroidの時と同じような感じでできますが、今回はModelでデータ […]

プログラミング

AndroidでREST APIを取り扱うお話

前回のお話でREST APIを気軽に確認する内容を書きましたが、今回は実際にスマホアプリ内でREST APIのやりとりを行う方法をまとめます。 以前はOkHttpというライブラリを使うことが多く、現在もそれが主流になりますが、今回はkotlinで使えるRetrofitと呼ばれるライブラリを使っていきましょう 目次1 インストール2 使い方2.1 GETの場合2.2 POSTの場合2.3 PUT通信の場合3 まとめ インストール 通信するので当然アプリ側にインターネット接続の設 […]

スマホアプリ

無音カメラが国内ではリリースできなかったお話

みなさん、無音カメラ(Silent Camera)で撮影してますか? いきなりグレーゾーンの発言ぽくなりましたが、App StoreもGoogle Playにも無音カメラは割とたくさんリリースされています。 そこで弊社でもその波(!?)に乗り、無音カメラのリリースを検討しました。 目次1 実際どうなった?2 リジェクト理由1 スパイウェアの扱いになった3 ちなみにGoogle Playでは?4 終わりに5 参考6 YoutubeChannelのご紹介 実際どうなった? 結果か […]

プログラミング

REST API開発の最高峰? Talend API Testerのお話

昨今は無料で天気予報がWebで確認できますが、それはプログラムの世界でも同じ。 プログラムの場合はそういうデータをREST APIという形でJSON形式で受け取るのが一般的です。 REST APIとか RESTful APIとは、Webシステムを外部から利用するためのプログラムの呼び出し規約(API)の種類の一つで、「REST」(レスト)と呼ばれる設計原則に従って策定されたもの。 RESTそのものは適用範囲の広い抽象的なモデルだが、一般的にはRESTの考え方をWeb APIに […]

マークアップ

CSSを使わないSVGアニメーションの作り方【キーフレームアニメーション編】

SVG画像をアニメーションさせる時は、CSSを使用するのが一般的かと思いますが、SVGファイルに直接記述してアニメーションさせることもできます。 SMILという名前の、SVGのアニメーション機能です。IEでは使用できなかったため、使いづらかったのですが、今後は気後れすることなく使用できます。 SMILにはざっくり3種類のアニメーションがありますが、複雑なのでまずは簡単なキーフレームアニメーションから、早速試してみましょう。 目次1 静止画のSVG2 基本のアニメーション2.1 […]

スマホアプリ

【Android Studio】Androidアプリでラジオボタンの『選択時』『非選択時』のボタンの背景色と文字色を変える

Androidアプリでラジオボタンを通常のボタンのようにして、かつ『選択時』『非選択時』のボタンを変えたい…ということがあるかと思います。 そんな時はdrawableに要素を用意して、背景色や文字色に指定するだけで簡単に変更することができます。 目次1 ラジオボタンを設置2 背景色を設定3 文字色を設定 ラジオボタンを設置 それではプロジェクトを開きましょう。 とりあえずはラジオボタンを2つ設置しました。 今回はボタンぽくしたいのでラジオボタンのデフォルト要素をクリアします。 […]

マークアップ

祝解禁!IEがなくなって使えるようになった便利なCSS 8選

2022年6月16日、IEのサポートが切れました。フロントのエンジニアにとっての念願が叶った、記念すべき日です。IE6の頃から苦しめられてきた私ももちろんのこと浮かれています。 ただ、IEを除外することによって使用できるCSSが大幅に増え、勉強しなければならないこともまた増えました。少しずつ慣れていきましょう。 今日は使用できるようになったCSSで、頻度が高そうなものからいくつかご紹介したいと思います。 目次1 object-fit1.1 今まで1.2 これから2 filte […]

スマホアプリ

【Android】Navigation Componentで簡単に画面遷移するお話

目次1 いにしえの時代のFragment間の移動2  Navagation Componentを使おう3 Activityの設定4 Safe Argsの利用5 遷移6 遷移時のアニメーション6.1 アニメーションの追加7 遷移時に値を渡す7.1 渡し方7.2 受け取り方7.3 自作クラスの値を渡す場合は?8 終わりに9 参考URL いにしえの時代のFragment間の移動 7年くらい前までであれば、Fragment間の移動はソースで記述していました。 Fragment Man […]

スマホアプリ

Appleにリジェクトされた内容をまとめたお話

前回のエントリーでは【Guidline 4.2.2】の事を書きましたが、色々とアプリをリリース申請していると、いろいろな理由でリジェクトされることがあります。 もちろんアプリの種類や状況によって大きく変わるので、これがすべての解決になるとは思いませんが、備忘録代わりにまとめたいと思います。 目次1 Guideline 1.2 – Safety – User Generated Content2 Guideline 4.0 – Design3 […]

スマホアプリ

【Guidline 4.2.2】8bitアプリをリリースしたときにアップルからリジェクトをいただいたお話

突然ですが、弊社のアプリが存在するのはご存じでしょうか 実は弊社のこのブログや見積もりシミュレーションなどを一つのアプリにしてリリースしようと思いました。 アプリとはいえ、コンテンツ部分はWEBサービスを流用するいわゆる「ウェブビュー(Webview)」で作っていこうと言うことになりました。 これは導入時および更新時の負荷を軽減するためのものです。 目次1 最初のコンテンツ1.1 1度目のリジェクト!1.2 2度目のリジェクト!!1.3 3度目のリジェクト…1.4 […]

マークアップ

【可変対応】中のテキストをはっきり表示させたまま、ブレンドモード(mix-blend-mode)を使おう!

『乗算』などを再現できるcssのブレンドモード(mix-blend-mode)。 大変便利なのですが、背景色だけ乗算をして文字はそのまま…ということが工夫をしないと地味に難しかったりします。 上の画像のように表現をしたかったのに、何も考えずに背景色と一緒にブレンドモード(今回は乗算)を設定すると以下のような感じになってしまいます。 See the Pen ブレンドモード(テキストが埋もれる) by kkdd (@kk8kk) on CodePen. 要はテキストも一緒に乗算に […]

マークアップ

背景に画像や動画を置いてパララックス効果で見せる

サイトを作っているとスクロールした時に背景画像などを固定させておきたい、パララックス効果を使いたいという時があると思います。 簡単なものであれば簡単なcssで実現できます。 目次1 背景画像をパララックス効果で見せる1.1 DEMO1.2 HTML1.3 CSS 背景画像をパララックス効果で見せる DEMO See the Pen Untitled by kkdd (@kk8kk) on CodePen. なんとなくよく見る感じの表示になっていると思います。 HTMLとcss […]

スマホアプリ

Android Studioでベクター画像を登録しよう

Androidアプリを作成しているとアプリ内のアイコン画像を追加したい、ということありますよね。 そんな時は画像の解像度を気にせず使用できる、ベクター画像を使用すると便利です。 Android Studioでは、ちょっとした手順を踏めばベクター画像をdrawableリソースの中にxmlファイルとして生成してしてくれます。 簡単なので、早速進めてみましょう。 目次1 Android Studioを開こう2 ベクター画像の登録画面を開こう3 クリップ・アートで登録してみよう4 ロ […]

マークアップ

属性セレクターを使ってファイルごとにアイコンをつけよう!

例えばpdfのアイコンをつけたいときに『pdfIcon』をというclassをつけて表示させる、という方法があります。 ただ動的に表現したい場合などにちょっと不便だなと思うこともあるかと思います。 そんな時は属性セレクターを使ってファイルごとにアイコンをつけることができます。 早速属性セレクターを使ってみよう 属性セレクターはを使えば指定された値が存在していたら指定されたcssを適用する、という感じの動作をしてくれます。 書き方としては「属性$=”値”」 […]

1 2 3 4 5 6 40