目次1 前回は･･･2 考え方3 保存したフォーマットにデータを入れる4 ExcelからPDFへ変換する4.1 mpdfで変換する4.2 TCPDFで変換する4.2.1 IPAexフォントのインストール5 結局何がいいの？ 前回は･･･ 前回はPHPでExcelファイルを操作する方法をまとめました。 基本的にはCSV出力や一括登録の代替案としてまとめましたが、PhpSpreadsheetを使うことでExcelで作成した書類のフォーマットにPHPでデータを入力してPDFで出力す […]
目次1 こういうことってないですか？2 インストール方法3 PHPでライブラリの呼び出し方4 Excelファイルのエクスポート方法4.1 ちなみに･･･5 Excelファイルのインポート方法6 これを組み合わせると？？？ こういうことってないですか？ webでの管理システムを設計するときに「CSVでインポートやエクスポート機能を付けてよ」って言われる事があります。 インポートに関しては一括登録や一括削除や更新など割とリスクが大きいのですが、エクスポートはあったりします。 CS […]
スマホアプリを作る上で欠かせない･･･訳ではないですが、アプリの構成に必要なのはスプラッシュスクリーン（以下スプラッシュ画面）ですよね 目次1 そもそもスプラッシュ画面とは？2 Androidアプリで実装する場合（今まで）3 SplashScreen API登場3.1 スプラッシュ画面用のActivityを用意する3.2 themes.xmlにテーマを記述する そもそもスプラッシュ画面とは？ スマホアプリにかかわらず、ほとんどのアプリやプログラムを起動した際に一瞬表示される画 […]
WEBサイト作成時にこのアニメーションがよくわからない…ということがあると思います。 今回は弊社で作成した『受験生向け女子大学のオープンキャンパス特設サイト』のサンプルを使用しながら解説していきます。 初歩的なアニメーションの知識はある、という方向けの記事です。 参考にするサンプルサイトはこちらから 目次1 inview.jsを読み込ませる2 スライドアニメーション2.1 スライド本体2.2 切り替わりの時に白い帯を表示させる2.3 スライド画像を徐々に拡大させる2.4 ペー […]
こんにちは工藤です。 今回はレスポンシブのテーブルの組み方の1例をご紹介します。 PC表示の時はこんな感じです。 目次1 PC表示の時2 スマートフォン表示の時3 ソースコード4 ポイント5 YoutubeChannelのご紹介 PC表示の時 今回はちょっと扱いに困るthead部分について、こんな感じで表現してみます。 スマートフォン表示の時 tbody内のtdの箇所に、theadの項目を表示させてみました。 ソースは下記のようになります。 ソースコード html css ポ […]
今回は素敵なCSS3アニメーションを用意してくださっているサイトをご紹介します。 2016年1月にIE8のサポートが切れる…とのことなのでいつかバンバンつかえる日が来たらいいなと思います。 目次1 Hover.css2 CSSのみで実装するボタンデザインやホバーエフェクト 20＋α 目次3 CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト 154 CSSのみで実装するキャプションエフェクト 205 イケテルオリジナルマウスオーバーCSS3アニメーション […]
今日は管理画面のデザインを、まとめてみました。いつもより多めな40種類です。トレンドを反映してか、フラットデザインが多いですね。 通常の静的なサイトのデザインとは異なり、投稿がある場合無い場合とたくさんのパターンを考えながら制作しなければならないので、デザイン力が問われます。これらを日本語に置き換えるとまた違って見えたりするのですが、ひとまず、ご参考になればと思います。 ▼ The Kamarel デモサイト ▼ Apricot Bootstrap デモサイト ▼ The V […]
口で説明しづらいのですが、最近よく見かけるこれです。 ↓ マウスカーソルあわせてみてください。 マウスオーバーのエフェクトなので、スマフォからは見れませんが、PCでマウスを乗せるとボタンの画像がﾆｭｯと拡大するエフェクトがついています。jsかと思いきや、CSSでも簡単に付けることができます。 ざっくり説明すると、ﾆｭｯとしたい画像をdivなどでくくって、「:hover」した際に画像のscaleを大きくするという手順です。 HTML CSS 親要素のdivには overflow […]
tax_queryを使用すれば、条件指定して記事を取得することができます。 目次1 tax_queryはこんな時に便利2 tax_queryで記事を取得3 tax_queryで取得した記事を表示する4 条件を複雑にする tax_queryはこんな時に便利 例えばこんな時。 [図A] 図のように、条件に合致する記事だけ取得したりすることができます。 カテゴリで絞り込んだ一覧ページを作ったりする際に便利です。 tax_queryで記事を取得 図Aの例の場合、下記のように記述すると […]
今日は、HTML5より正式に採用された「role属性」について書きたいと思います。 目次1 role属性とは2 では、実装する必要はあるのか3 実装方法4 role属性の種類 role属性とは role属性は、このように使用します。 見ればどういったものかなんとなく分かると思いますが、この場合はdiv要素に対して「ナビゲーション」の意味を付与しています。 では、実装する必要はあるのか 2016年04月に「障害を理由とする差別の解消の推進に関する法律」が施行されました。「障害を […]
初心者だと何を選んだらいいのかわからなくなったり、そこそこ経験のある人でも同じようなものを選んでしまったりで悩んでしまう『配色』。 今回はそんな配色のヒントを得られるサイトをご紹介します。 目次1 Color Drop2 SchemeColor.com3 Colormind4 Color Hunt5 Khroma6 Pigment7 PALETTABLE8 Hello Color9 Colors10 Adobe Color Color Drop 4つの色の組み合わせがずらっと […]
PremiereProのモザイクフィルターを使用すれば、ワンクリックで簡単にモザイクをかけることができます。 目次1 被写体を自動追尾する便利機能2 手順2.1 1.モザイクエフェクトをかける2.2 2.モザイクの範囲を調整する2.3 3.自動追尾する3 YoutubeChannelのご紹介 被写体を自動追尾する便利機能 PremiereProのモザイクフィルターは、被写体を自動追尾します。 歩く男性の顔にモザイクをかけ、自動追尾させた例です。簡単にできるのでやってみましょう […]
Premiere ProのUltraキーエフェクトを使用すると、動画の一部を透明にすることができます。 イメージ的には、テレビの天気予報でキャスターと定点カメラの映像を合成して表示するといったような状況で使用できます。最近では、実況動画などでも似た手法がよく見受けられますね。 目次1 Ultraキーの特徴2 Ultraキーの使い方3 YoutubeChannelのご紹介 Ultraキーの特徴 Ultraキーは、動画の背景を透明にすることができます。 実際には特定色を指定して透 […]
WEBサイト作成時にこのアニメーションがよくわからない…ということがあると思います。 今回は弊社で作成した『受験生向け女子大学のオープンキャンパス特設サイト』のサンプルを使用しながら解説していきます。 初歩的なアニメーションの知識はある、という方向けの記事です。 参考にするサンプルサイトはこちらから 目次1 inview.jsを読み込ませる2 スライドアニメーション2.1 スライド本体2.2 切り替わりの時に白い帯を表示させる2.3 スライド画像を徐々に拡大させる2.4 ペー […]
WEBサイト作成時にこのアニメーションがよくわからない…ということがあると思います。 今回は弊社で作成した、[焼肉用のお肉ネット通販特設サイトのサンプルを使用しながら解説していきます。 初心者向けの記事です。 参考にするサンプルサイトはこちらから 目次1 動画再生1.1 スクロールしていくと動画の上をコンテンツが通るようにするには？1.2 スマートフォンの時は？2 無限ループスライド3 hoverしたら背景色を横から敷く 動画再生 メインビジュアルで動画を再生させています。 […]
WEBサイト作成時にこのアニメーションがよくわからない…ということがあると思います。 今回は弊社で作成した、ホームセキュリティサイトのサンプルを使用しながら解説していきます。 初心者向けの記事です。 参考にするサンプルサイトはこちらから 目次1 inview.jsを読み込ませる2 各要素をフェードインして表示させる3 マウスホバーでボタンのグラデーションを動かす4 アコーディオン inview.jsを読み込ませる 今回は場所によっては『inview.js』というライブラリを読 […]
目次1 前回は･･･2 考え方3 保存したフォーマットにデータを入れる4 ExcelからPDFへ変換する4.1 mpdfで変換する4.2 TCPDFで変換する4.2.1 IPAexフォントのインストール5 結局何がいいの？ 前回は･･･ 前回はPHPでExcelファイルを操作する方法をまとめました。 基本的にはCSV出力や一括登録の代替案としてまとめましたが、PhpSpreadsheetを使うことでExcelで作成した書類のフォーマットにPHPでデータを入力してPDFで出力す […]
目次1 こういうことってないですか？2 インストール方法3 PHPでライブラリの呼び出し方4 Excelファイルのエクスポート方法4.1 ちなみに･･･5 Excelファイルのインポート方法6 これを組み合わせると？？？ こういうことってないですか？ webでの管理システムを設計するときに「CSVでインポートやエクスポート機能を付けてよ」って言われる事があります。 インポートに関しては一括登録や一括削除や更新など割とリスクが大きいのですが、エクスポートはあったりします。 CS […]
今まで何となく触っていただけのChatGPT。ちょっと色々と文章を作成してみる機会があったので、私なりのアイディアやコツなどを書いてみます。 もう少しシステム的な記事はこちらをご確認ください。 目次1 ChatGPTに登録をする1.1 1.ログイン/サインアップページを開く1.2 2.登録するメールアドレスなどを入力・選択する1.3 3.パスワードを入力する1.4 4.入力したメールアドレス宛のメールを確認1.5 5.アカウント名を入力1.6 6.電話番号を入力・SMS認証を […]
WordPressで記事をピックアップして掲載したいということがあるかと思います。 そんな時はカスタムフィールドを使うと便利です。 目次1 カスタムフィールドを用意しよう2 表示の設定をしよう3 管理画面の記事一覧でチェックを入れているものをわかりやすくしたい カスタムフィールドを用意しよう カスタムフィールドを用意する方法はなんでもいいですが、今回はAdvanced Custom Fieldsを使います。 Advanced Custom Fieldsをインストールしたら管理 […]
WordPressで一覧表示をする時、例えば現在から1週間以内、1か月以内、1年以内…など一定期間内のものだけ表示させたいということがあるかと思います。 そんな時はWP_Queryの引数内の『date_query』を使用してうまく表示できるようにします。 投稿の一覧表示に『date_query』を使う まずは通常の投稿のループを記述して、その中に『date_query』を追加していきます。 <?php $args = array( ‘post_type’ => ‘ […]
WordPressには 購読者 寄稿者 投稿者 エディター 管理者 といった5つの権限がデフォルトで存在します。 これは記事を登録できる人、記事は登録できず閲覧だけできる人…などの設定がされています。 ただ、運用での条件に合った権限がないという場合もあります。 そんな時は『User Role Editor』という自分の好きなように権限を割り振ることのできるプラグインを使います。 目次1 まずはプラグインをインストール2 一般設定画面3 権限設定画面3.1 権限グループを作ろう […]
YouTubeなどに投稿する動画で必要になる素材。 今回は基本的にフリーで手に入れられる素材を提供してくださっているサイトをご紹介します。 ※サイトや素材自体によって規約は変わるので、きちんと確認してからのご使用をお願いします！ 目次1 YouTuberのための素材屋さん2 動画AC3 YouTubeオーディオライブラリ4 DOVA-SYNDROME5 効果音ラボ6 無料効果音7 魔王魂8 効果音辞典9 いらすとや10 イラストAC11 Loose Drawing12 ソコス […]
目次1 AMPとは？1.1 高速化のための厳しい制約2 劇的に改善！Google PageSpeed Insightでの評価Before／After2.1 AMP対応前2.2 AMP対応後 AMPとは？ 近年、Googleが推奨しているAMPをご存じでしょうか。 AMP対応しているページを事前にGoogleがキャッシュしておくことによって、閲覧者がページリクエストした際に、Googleが持っているキャッシュを表示するため、素早く表示できるという仕組みです。 通常、ページの表示 […]
2020年4月現在、リモートワーク/テレワークでお仕事されている方も多いのではないでしょうか。 そんな時役立ちそうなツールをまとめてみました。参考になったらうれしいです。 ※料金は人数の規模によって異なりますので、公式サイトをご確認ください。 ※会社によってはセキュリティの関係上ツールの使用が難しい場合もあるので、ご確認いただいた上で導入してください。 目次1 コミュニケーションツール系1.1 ChatWork1.2 Slack1.3 Skype1.4 ZOOM1.5 Mic […]
スマホアプリを作る上で欠かせない･･･訳ではないですが、アプリの構成に必要なのはスプラッシュスクリーン（以下スプラッシュ画面）ですよね 目次1 そもそもスプラッシュ画面とは？2 Androidアプリで実装する場合（今まで）3 SplashScreen API登場3.1 スプラッシュ画面用のActivityを用意する3.2 themes.xmlにテーマを記述する そもそもスプラッシュ画面とは？ スマホアプリにかかわらず、ほとんどのアプリやプログラムを起動した際に一瞬表示される画 […]
目次1 前回のあらすじ2 ひょっとしてATTも対応してくれる？2.1 アプリを選択2.2 言語を選択2.3 IDFAメッセージ2.4 ATTメッセージ2.5 GDPRメッセージ 前回のあらすじ 前回はAdMobのGDPRメッセージ対応行うため、AndroidアプリでGDPRメッセージを表示するための方法をまとめました。 なので今回はiOSアプリで実装したいと思います。 ひょっとしてATTも対応してくれる？ プライバシーとメッセージを見てみると「IDFA説明メッセージ」というも […]
目次1 どうしたAdMob？2 AdMobの画面からアプリ向けメッセージの作成2.1 アプリを選択2.2 言語を選択2.3 ユーザーの同意オプション2.4 ターゲティング3 Androidアプリに実装する。4 （おまけ）データセーフティを申告する4.1 データの収集とセキュリティ4.2 データの種類5 最後に6 参考 どうしたAdMob？ ふとAdMobのページを見ていると 年内には、欧州経済領域と英国のユーザーをターゲットとして広告を配信するすべてのパブリッシャー様に、Go […]
Can I useというサイトをご存じでしょうか。 IEがそろそろお役目を果たしそうなのでCSSの対応をあまり気にすることもなくなったかな…と思っていたのですが、気づけば新しいCSSプロパティが増えている昨今。 そんな時「あれ、このCSSはこのブラウザで使えるのかな？」と思ったとき調べるのに便利なのがCan I useです。 ※2022年4月現在の情報です 目次1 使い方1.1 CSSプロパティの対応状況を確認したい1.2 ブラウザ利用量にあわせた対応状況を確認する1.3 対 […]
今更ですが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 […]
Google reCAPTCHA（リキャプチャ）とはGoogleが提供している認証システムで、現在はv2とv3が用意されています。 なんとなく「v3ってv2の進化版でしょ？」という感じがするのですが、調べてみるとどうもそうとも言い切れないので、まとめてみました。 ちなみに無料で利用できますが大規模サイトやアクセス数の多いサイトはエンタープライズ版を利用する必要があるみたいです。 目次1 reCAPTCHAの登録について2 結局reCAPTCHA v3とreCAPTCHA v2 […]
運営会社:株式会社8bit
制作サービス
運営サービス
