新着記事

スマホアプリ

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

みなさん、無音カメラ(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を適用する、という感じの動作をしてくれます。 書き方としては「属性$=”値”」 […]

Webサイト制作

【2022年版】Can I useを使ってみよう!

Can I useというサイトをご存じでしょうか。 IEがそろそろお役目を果たしそうなのでCSSの対応をあまり気にすることもなくなったかな…と思っていたのですが、気づけば新しいCSSプロパティが増えている昨今。 そんな時「あれ、このCSSはこのブラウザで使えるのかな?」と思ったとき調べるのに便利なのがCan I useです。 ※2022年4月現在の情報です 目次1 使い方1.1 CSSプロパティの対応状況を確認したい1.2 ブラウザ利用量にあわせた対応状況を確認する1.3 対 […]

Webサイト制作

【初心者向け】Codepenを登録して使ってみよう

今更ですがCodepenを登録して使い始めました。 英語でよくわからない、という方のために登録して初歩的な使い方をするまでをご紹介します。 目次1 Codepenって?2 登録して使ってみよう2.1 HTML2.2 CSS2.3 JS2.4 埋め込みをする Codepenって? よく見かけると思うこれです。 See the Pen Codepenって? by kkdd (@kk8kk) on CodePen. 簡単に説明するとCodepenとは、オンライン上でHTML・CSS […]

マークアップ

表示領域でスナップスクロールを実現!scroll-snap-typeプロパティを使ってみよう!

スクロールをしたとき、要素の区切りのところで止まってほしいなあなんてことはないでしょうか。 そんな時はCSSのscroll-snap-typeを使うと、特に細かいこだわりさえなければjsに頼らなくてもあっさりと実現できます。 いまいち挙動がわからないかもしれないので、実際に見てみましょう。 目次1 縦スクロールをしてみる2 横スクロールをしてみる3 mandatoryとproximityの使い分け4 scroll-snap-alignを使い分ける 縦スクロールをしてみる Se […]

WordPress

【WordPress】投稿・固定ページに記述している画像のパスを置き換えよう!

wpで投稿や固定ページに画像を入れる際、いざ本番環境に移行をするとなるとパスを変更したい…ということがあると思います。 プラグインで変更する方法もあるのですが、functionに記述をして変更する方法もあります。 場合によってはこちらの方がテスト環境と本番環境どちらにもうまく対応できたりします。 実際に入れてみよう 以下のコードをfunctions.phpに入れてみましょう。 ※functions.phpはバックアップを取りながら作業をしてください。 まずは『〇〇〇』となって […]

WordPress

【WordPress】納品前に確認したい管理画面カスタマイズ

サイトにWordPressを導入したいというご要望は年々増えています。 受託で制作するサイトでは、WEBに慣れない人でも更新作業を行えるように、WordPressの管理画面をより使いやすくする必要があります。 今回は、クライアントに納品する前にやっておきたい管理画面のカスタマイズをご紹介します。 目次1 ログインURLを変更する2 管理画面の不要なメニューを非表示にする3 投稿のカテゴリー選択肢をradioボタンに変更する4 管理画面の[タグ]を非表示にする5 投稿の一覧画面 […]

WordPress

【WordPress】titleタグの出力内容を変更しよう!

Wordpressでfunctions.phpにtitle-tagを記述すると自動的に出力される<title>~</title>タグの内容。 こちらの区切り線や表示する内容を変えたい…ということがあると思います。 今回はそのカスタマイズ方法をご紹介します。 ※functions.phpはバックアップを取りながら作業をしてください。 目次1 セパレーターを変更したい2 タイトルの内容を変更する2.1 タイトルのパーツで変更もできる セパレーターを変更した […]

マークアップ

【コピペ可】CSSのhoverアニメーション-テキスト編-

CSSのアニメーションを作成してまとめてみました。 今回は単純なテキストに対してのアニメーションになります。 ちなみにaタグのカラーやtext-decorationについてはあらかじめ調整しておいてください。 アニメーションの一覧は下のDEMOに置いておきます。 目次1 下線系1.1 左から下線が現れてカーソルを外すと左側に消える1.2 左から下線が現れてカーソルを外すと右側に消える1.3 右から下線が現れてカーソルを外すと左側に消える1.4 中央から下線が現れてカーソルを外 […]

マークアップ

【CSS】clip-pathを使ってWEBページに斜めのデザインをコーディングする

WEBページの要素で、斜め方向にカットされたデザインを見たことがあると思います。 これを実際にレスポンシブでコーディングするとなると、工夫が必要です。 (筆者は過去、斜め画像を用意してbackgroundに配置したところ、超ワイドディスプレイで想定外の表示になってしまったりと、ため息をついた覚えがあります) 今回はCSSのclip-pathを使用して、手軽に斜めのデザインを追加してみましょう。 目次1 clip-path1.1 それぞれの値の解説1.2 斜めエフェクトの例1. […]

Webサイト制作

Google reCAPTCHAのv2とv3の違いのお話

Google reCAPTCHA(リキャプチャ)とはGoogleが提供している認証システムで、現在はv2とv3が用意されています。 なんとなく「v3ってv2の進化版でしょ?」という感じがするのですが、調べてみるとどうもそうとも言い切れないので、まとめてみました。 ちなみに無料で利用できますが大規模サイトやアクセス数の多いサイトはエンタープライズ版を利用する必要があるみたいです。 reCAPTCHAの登録について reCAPTHCAを使用登録する前にGoogleのサービスですの […]

Webサイト制作

【さくらのレンタル】さくらのレンタルサーバーに移行する際によくあるお話

他社からさくらのレンタルサーバーに移行する際に躓いたこと 他社からさくらのレンタルサーバーに移行する場合に「あれ?」って思うことを何点かまとめました。実はだいたいさくらのヘルプに記載しているのですが、念のためまとめておきます。 目次1 PHP関係1.1 php.iniの設定2 MySQL関係2.1 データベースごとにユーザーアカウントを作成できない2.2 データベース総使用量が決まっている2.3 phpMyAdminのアップロードサイズが32MB3 ドメイン周り3.1 DNS […]

マークアップ

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に追 […]

1 2 3 4 5 38