Webデザインで「紙っぽさ」を出す方法を考えてみる｜akane
こんにちは！株式会社Rabeeの新人デザイナーのakaneです🏋 今回は、Webデザインで「紙っぽさ」を出す方法を考えてみました。参考事例も掲載しながら紹介していくので、どうぞ最後までお楽しみください！ はじめに：「紙っぽさ」とは？私が言う「紙っぽさ」とは、おもに「雑誌っぽさ」のことです。Webデザインだけど、雑誌っぽい。ディスプレイに映っているけれど、エディトリアル感がある。 たとえば、以下のようなデザインは私にとって「紙っぽい」例です。 出典：六本木未来会議出典：DMN出典：ぼくのおじさんどうして、私はこれらを雑誌のようだと感じるのでしょう？自分なりに考えたポイントを、ひとつずつ紹介していきます。 その①：文字が「組まれて」いる最初に挙げたWebサイトのひとつをよく見てみると、画像左上にある「NO. 153」の文字のうち、「NO.」だけが縦向きになっています。「NO.」と「153」を
【Firebase Authentication】メールアドレス・パスワード認証をサービスに導入する際に必要になりそうな機能
はじめに Firebase AuthenticationではGoogleやTwitterなどの認証機能を簡単に利用でき 自社サービスでのユーザー認証機能(会員向けサービス)の導入ハードルが格段に低いです。 しかし、SNSや他社サービスとの連携は嫌というユーザーも多くいらっしゃることから サービス内独自のユーザー認証を行えるようにしたほうがよいというニーズもあります。 この記事ではそんなニーズに答えるためにFirebase Authenticationを利用した メールアドレス・パスワード認証の導入に必要な機能を最低限洗い出し 各機能がどのようなフローになるか、その際に必要なコードの紹介を行います。 公式ドキュメント 扱う例外やメールアドレス認証、パスワード再設定など公式ドキュメントでは まとまって書かれていない部分も書きましたのでもし導入する際には参考にしてみてください。 注意事項 Fir
AstroとWordPressでブログを作ってみるよ
はじめに 簡単にブログを始める場合、第一候補としてWordPressが挙げられます。WordPressはCMSとして高いシェア率を誇り、様々なテンプレートが存在し、豊富なプラグインも揃っています。 今回はそんなWordPressをHeadless化して、最近話題のAstroフレームワークを使用してブログ構築していきます。 AstroとWordPressを選定した理由 静的サイトとしてファイルを生成するだけならばNext.jsやNuxt.jsでもできるわけです。しかし、それらはアプリケーションに最適化されたフレームワークであり、サイトを作成するといった目的には少しオーバースペックな印象です。ステート管理やルーティングなどの機能はさほど必要ないでしょう。そこで、Astroを選定しました。 Astroには以下の特徴があります。これだけでもサイト制作として最適なフレームワークであることがわかります
例外パスを設けたWordPress用のBasic認証を.htaccessで設定してみた | DevelopersIO
EC2上で稼働するWordPress環境のBasic認証を.htaccessで設定する機会がありましたので紹介させていただきます。 環境 OS $ cat /etc/system-release Amazon Linux release 2 (Karoo) httpd $ rpm -q httpd httpd-tools httpd-2.4.53-1.amzn2.aarch64 httpd-tools-2.4.53-1.amzn2.aarch64 設定 .htpasswd 「htpasswd」コマンドを利用して.htpasswd ファイルの生成を行いました。 htpasswd -c /var/www/html/.htpasswd <user> WordPressのインストールパスに存在する.htaccess の前に Basic認証用の設定を追記しました。 ELBのヘルスチェックで利用する「
WordPressで投稿内容の任意の項目を必須化する - Qiita
ワードプレスのテーマtwentytwentyを基盤に、投稿内容の任意の項目を必須にする実装をしたので、備忘録的にこの記事を残す。 環境情報 PHP：version 7.3.12 WordPress：version 5.5.3 WPテーマ：twentytwenty 作業 プラグインを使えば簡単にできることかもしれないが、練習がてらどうにかプラグイン無しで実装できないものかと思い見つけたやり方です。 ※ポストタイプ名が blog の場合 // 投稿時の必須項目の設定 function post_edit_required() { ?> <script type="text/javascript"> jQuery(function($) { if( 'blog' == $('#post_type').val() ) { $('#post').submit(function(e) { // タイト
【メモ】hoverで矢印が伸びるcss – WordPress単品センター
テキストリンクに少し装飾をしたいと思い、hoverした時に矢印が伸びるcssをメモしておきました。 具体的な事例は下記になります テキストリンクはこちら ソースは下記になります htmlは下記とします <p class=”arrow-button”><a href=””>テキストリンクはこちら</a></p> cssは下記になります <style> .arrow-button a { display:inline-block; cursor:pointer; position: relative; text-decoration: none; } .arrow-button a::after { content: “”; display: block; position: absolute; top: calc(50% – 5px); left: 90%; width: 40px; hei
Unityを通じて3D空間、グラフィックを理解する
はじめに ゲーム開発の旅を始める上で、開発者が最低限理解すべきコンピュータの基本的な仕組み、グラフィックスの原理、そしてスクリプティングの技術について、本記事では詳しく掘り下げていきます。 コンピュータの心臓部であるCPUとGPUの役割と相互作用から始め、これらがどのようにして3D空間のレンダリングやアプリケーションの実行に影響を与えるかを解説します。 Unityエンジンを用いたゲーム開発では、これらのハードウェアコンポーネントの理解が不可欠です。 続いて、ゲーム開発におけるグラフィックスの基礎を学びます。 ここでは、ビルトインレンダーパイプラインから、より高度なUniversal Render Pipeline (URP) やHigh Definition Render Pipeline (HDRP) まで、Unityで利用可能なレンダリングパイプラインの違いとその選択がプロジェクトに及
アンチウイルスソフト Antivirus for Amazon S3 を本番環境に導入してみてわかったメリット・デメリット - ANDPAD Tech Blog
こんにちは。SREチームの吉澤です。 アンドパッドでは最近、AWSのS3バケット上のファイルをスキャンするために、アンチウイルスソフト Antivirus for Amazon S3 を本番環境に導入しました。その結果、私たちの要件はほぼ全て満たされたうえに、従来比で大幅なコスト削減を実現できました。 Antivirus for Amazon S3について日本語で書かれた記事はまだ少ないですが、S3に対するウイルススキャンが求められるケースでは、導入を検討する価値があるソフトです。 そこで、今回はこのAntivirus for Amazon S3の概要、私たちが本番環境に導入してみてわかったメリットやデメリット、そしてこのソフトが適した状況をご紹介します。 背景 S3に対するウイルススキャンが必要な理由 Antivirus for Amazon S3の導入前に利用していたソフト Antiv
プログラミング言語をすぐに試せる「プレイグラウンド」まとめ。2024年版
新しいプログラミング言語やライブラリ、フレームワークを学ぶには、実際にそれらを試して挙動などを見てみることが大事ですが、実行環境を用意するのは手間がかかります。 そこで役立つのが、いわゆる「プレイグラウンド」と呼ばれる、Webブラウザでプログラミング言語やライブラリ、フレームワークをすぐに試すことができるサービスです。 主要なプログラミング言語の公式サイトには、実際にその言語をすぐに試せるプレイグラウンドが用意されていることも多く、また公式サイト以外にもネット上にはさまざまなプレイグラウンドがあります。 プレイグラウンドを使えば、気軽にいろんなプログラミング言語やライブラリ、フレームワークを試せます。 この記事ではそうしたプレイグラウンドをまとめてみました。ここで紹介したプレイグラウンドの他にも、あなたのお気に入りのプレイグラウンドがあればX/Twitterやブックマークのコメント、メール
誰でもわかるStable Diffusion 新バージョン「SDXL」の概要 - 人工知能と親しくなるブログ
Stable Diffusionが登場してもう1年近く経ちます。登場以来、この画像生成AIは世界中にとてつもないインパクトを与えました。 AIはものすごい勢いで進化していますが、Stable Diffusionも例外ではありません。バージョン1からバージョン2にアップグレードし、最近になってさらにアップデートしたバージョン「XL」が登場しました。 今回はこの新バージョンが前バージョンと何が違うのか見てみましょう。 ※私はまだXLを触っていないので、ここで解説する情報ははXLの紹介ページから得たものです。間違いがある場合は教えてください。 Stable Diffusion XLの特徴 Stable Diffusion XLの変更点 Transformerブロックの数が増えた テキストエンコーダーが増えた プロンプトの各トークンのベクトルが大きくなった いろいろな解像度を取り込んだ 「見切れ」
GscatterがGraswald.aiを発表 有料だった大量のテクスチャ付き3Dモデルの植物系素材が誰でも無料ダウンロード出来るようになりました｜3DCG最新情報サイト MODELING HAPPY
Astroで画像を最適化にして使い分けるの巻
はじめに ども、もりみちです。 Astroに組み込まれている、<Image>コンポーネントやgetImage()って画像を最適化できてとても便利ですよね。今回は画像を最適化した後に任意のメディアクエリを使って画像を使い分けたりしていきたいと思います。 対象にする人 astroで画像をwebpに変換したい人 暇な人 本編の巻 そもそもなんで今回コンポーネントを作ったかというと、画像を最適化させる度に画像をimportして<Image />もしくはgetImage()もimport。別のファイルでもimport。別のファイルでもimport。別のファイルでもry。といった現象が起こったり、画像を大量にimportした暁にはこのようにフロントマターがアホみたいに埋まってしまいました。 --- import { Image } from 'astro:assets'; import hoge01
９つの解決策-Windows 10ファイルエクスプローラー「応答しない」
ファイルエクスプローラーは、ユーザーがハードドライブ上のファイルやフォルダーにアクセスするための便利なツールです。ただし、ハードドライブに保存されたファイルを参照するときに、ファイルエクスプローラーが応答しないと報告するユーザーもいます。これは非常に迷惑です。 この記事では、Windows 10の問題に応答しないファイルエクスプローラーを修正する9つの方法をユーザーに提供します。 ファイルエクスプローラーはWindowsエクスプローラーとも呼ばれ、Windowsに組み込まれているファイルマネージャーアプリケーションです。グラフィカルユーザーインターフェイスを使用すると、ユーザーがドライブ、フォルダー、およびファイルにアクセスして管理するのに非常に便利です。 ファイルエクスプローラーはオペレーティングシステムのコンポーネントでもあり、タスクバーやデスクトップなど、モニターに多くのユーザーイン
firebase v9 の module を ESM (ES Module) を使って npm なしで index.html だけで動かす - Qiita
主旨 以前、公式ページに v9 は npm でしか使えないよって書いてあった気がしてましたが、最近ページを見直したら使う方法が書いてあることに気が付いたのでメモです。 結論 下記に方法が書いてありました。 Firebase を JavaScript プロジェクトに追加する ESM を使用していて、ブラウザ モジュールを使用する場合は・・・と書かれているところです。 <!DOCTYPE html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Firebase v9 CDN test</title> </head> <body> <div id="main"> <span id="status-text">サインイン
Astroで作ったWebサイトをエックスサーバーに自動アップロードする
前回の記事で、AstroでWebサイトを作成しました。 今回はこのWebサイトを、Githubへのコミットをトリガーにしてビルドし、自動的にエックスサーバーにFTP転送されるように設定していきます。 FTP情報の確認 エックスサーバーでFTP情報を確認するには、サーバーパネル⇒サブFTPアカウント設定⇒すべてのドメインの「選択する」⇒FTPソフト設定タブを開きます。 初期FTPアカウントの設定内容を使います。（画像はセキュリティのため白く塗りつぶしてあります） Github Actionsの定義ファイルを作成 プロジェクトのルートに.githubフォルダを作成します。その中に更にworkflowsフォルダを作成します。そしてそこにdeploy.ymlという名前のファイルを作成します。（ファイル名は任意です） ファイルに以下のように記述します。 name: Deploy website on
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How do you send a Firebase verification email (so that a user can verify their email) to a user in React Native?
[実装編]サインアップの機能の実装しよう｜FirebaseとTypeScriptとNext.jsを使ってリアルタイムチャットアプリを作ろう![[実装編]サインアップの機能の実装しよう｜FirebaseとTypeScriptとNext.jsを使ってリアルタイムチャットアプリを作ろう](https://cdn-ak-scissors.b.st-hatena.com/image/square/874e75b6580735f12601fd23d6c62cd41b66f339/height=288;version=1;width=512/https%3A%2F%2Fstatic.zenn.studio%2Fimages%2Flogo-only-dark.png)
Next and Previous Post
Import firebase firestore from CDN JS not working
JavaScriptによるカレンダー ― コピペで使おう! ライブラリ