CSSのメディアクエリを使ってレスポンシブに対応させる書き方｜たかもそ／Web Creator.
レスポンシブデザインには欠かせないメディアクエリですが、よく使う画面サイズの判定のほかにも、たくさんの機能があります。デバイスの機能やユーザーの設定によって、最適な表示を実装できたりします。意外と深いメディアクエリの書き方について紹介します。 <meta name="viewport" content="width=device-width, initial-scale=1">前提として、<head> 要素内にレスポンシブ用の <meta> タグを指定する必要があります。 基本の構文メディアクエリの基本的な構文は、メディアタイプとメディア特性からなります。 @media <メディアタイプ> and (<メディア特性>) { ... }メディアタイプはデバイスの種類、メディア特性は画面サイズやデバイスの機能、環境などの特性を指定します。 @media screen and (max-widt
Shopifyがアフターコロナでも二桁成長を続けられている理由とは？｜東芝テックCVC
利便性や価格メリットなどから日常的にECを利用している人も多いのではないでしょうか。そのような消費者ニーズに合わせ、様々な企業がEC展開を加速させています。近年は簡単にECサイトを開設・運用できるサービスも充実していますが、その中でも売上成長率を大きく伸ばしているのが、ECプラットフォームを展開する企業「Shopify（ショッピファイ）」。今回はShopifyの決算資料から、その成長理由を決算が読めるようになるノートさんに解説していただきました。 2020年以降のコロナ禍によって多くの企業が打撃を受けた一方で、一部のステイホームの恩恵を受けたIT企業には追い風となり、Zoomのように大きく業績や株価を伸ばした企業もありました。 しかし直近1年ほどは、新型コロナウイルス感染症の感染状況が落ち着くとともに、その業績成長の勢いが失われ、株価についても同様に大きく下落している企業が増えています。
子どものiPhoneのSuicaアプリに、親のクレジットカードでチャージする方法｜Naoki Maniwa
やりたいこと・子どものiPhoneのSuicaアプリにチャージする ・チャージは親のクレジットカードからする（手数料ゼロで） ・クレジットカードは子どもが勝手に使えないようにする やったこと・「かぞくのおさいふ」でプリペイドカードを作る（親子両方） ・（親）子どものプリペイドカードに親のクレジットカード（三井住友カード発行のもの）でチャージする ・（子）子どものiPhoneのSuicaアプリにプリペイドカードでチャージする まとめると、チャージは2回必要です。 親のクレカ → （チャージ1） → プリペイドカード → （チャージ2） → Suica きっかけ子どものiPhoneのSuicaにチャージしたいけど、Suicaのチャージって駅の券売機や駅のATM（View Altte）に現金でするのが基本。クレジットカード（以下、クレカ）でチャージしたいけれど、Suicaアプリに登録できるクレカ
大炎上したスクールフォト業界で勤めてたんだが、もう学校写真のカメラマンは限界かもしれない｜所在ない
小学校の林間学校のキャンプファイヤーの様子 ・スクールフォト業界にて炎上事案発生２０２４年２月２８日、Twitterに書かれたとある投稿が、学校カメラマンや写真業界を超えて、SNSで大炎上してしまった。 「カメラマン大大大募集です 現在3名しか決まっておらず、あと100名くらい来ても大丈夫です。詳細は下記をご覧下さい。 もし経験が無くて不安な方は3/16(土)、23(土)に同様の撮影があるので私や他のカメラマンの撮影に同行して教えます。どしどしご連絡待ってます。 小・中学校入学式の写真撮影案件 日時:4/8(月)9:00-16:00予定 ※午前か午後どちらかだけの対応でも可能 場所:埼玉&東京&千葉&神奈川(少し)の小中学校 ※出発場所を考慮して1時間圏内で撮影場所をご依頼します 撮影内容:式の前後のスナップ写真&式最中の様子など 必要な経験: 一眼レフで人を撮った事がある方 必要な機材:
Webサイトにアニメーションは必要あるのか。ないのか。どっちなのか。｜Takumi HASEGAWA (unshift Inc.)
まえがきアニメーションを多く取り入れたWebサイトが好きかどうかのアンケートを取ると、ネガティブな票が多く占めることがよくありますが、それに関して思うところがあったので「Webサイトにアニメーションは必要あるのか」というテーマで自分の思っていることを言語化してみました。 X (Twitter)で「動くWebサイト 嫌い」で検索 Xでちらっと検索しただけでも動くサイトが嫌い、という方は結構いそうですね。もし「アニメーションはすべて悪」と思っている人がいたらぜひ読んでいただきたいです。 この議論はアプリなどにも言えることですが、私の主なお仕事はWebサイトのフロントエンド実装なので、Webサイトについて書かせていただきます。 また、保険をかけているわけではないですが、私はUI (ユーザーインターフェース) の研究をしている専門家でもないんでもないので、この記事の内容に学術的なものは一切ありませ
【実演あり】GPTsの力でブログ執筆を圧倒的に楽にする方法(プロンプトも公開)｜little_hands
株式会社ログラスの生成AI/LLMチームの松岡(@little_hand_s)です。 GPTs、話題ですね！！使ってますか？(GPTsとは、ChatGPTの機能をカスタマイズして、目的に合わせたツールを自由に作成できる機能です) そして、もうすぐアドベントカレンダーの時期ですね、ブログを書く予定はありますか？ ブログを書くのって、結構気合がいりますよね。 あれって、文字列を書くこと自体とよりも、 何を書くか どういう切り口の記事にするか どういう構成にするか といったことにに脳のエネルギーを使うんですよね。 逆にいうと、これらのステップをクリアすれば、ブログ執筆のハードルはぐっと下がります。 そこで今回、GPTが執筆者にインタビューをしてくれて、それに応じるだけでブログの構成がどんどん決まっていくような執筆アシスタントGPTを作ってみたのです。 そしてもちろん、この記事も執筆アシスタントG
社内業務の生産性を爆上げしたGPTs / 利用推進のための取り組み｜little_hand_s
本記事は株式会社ログラス Productチーム Advent Calendar 2023の 12日目の記事です。 GPTsの概要とログラスの取り組み株式会社ログラスの生成AI/LLMチームの松岡(@little_hand_s)です。 GPTs、話題ですね！！使ってますか？(GPTsとは、ChatGPTの機能をカスタマイズして、目的に合わせたツールを自由に作成できる機能です) 本記事は、社内で作成したGPTsが早速成果が出ているという話と、GPTsとChatGPTをどのように社内布教しているかの取り組みについて書きます。 GPTsの実践的活用例と成功事例2023年11月7日のOpen AI Dev DayでGPTsが公開されてから約1月、LLMチームのメンバーが先行して作成したGPTが社内で活用され始め、チーム外でもGPTを新規で作る人が増えてきました。 まずは具体的な事例を紹介します。 (
ChatGPTのCode Interpreterとは何なのか？何ができて何がスゴいのか？｜梶谷健人 / 新著「生成AI時代を勝ち抜く事業・組織のつくり方」
ChatGPTの新機能として一般公開されたCode Interpreterがすごすぎて結構感動しているのだが、Code Interpreterで色んなことができるが故に「一言で言うと何なのか？」「一体それでなにができるのか？」疑問に思っている人も多いのではないだろうか？ このnoteではそうした疑問に答えるべき、まず最初にCode Interpreterでできることを紹介した上で、最後に一言でこれを説明すると一体なんなのかを紹介していきたい。 Code Interpreterで主にできること1. データ分析とビジュアライズまずこれが最もベーシックな使い方だろう。 特定のデータセットをエクセルファイルやcsvファイルでアップロードすると、そのデータの中身を読み取ってくれて、ビジュアライズしてもらうことができる。 ビジュアライズの際の分析の切り口やデザインを細かく指示することも、ChatGPT
"Googleの20%のルール" の復権その可能性への期待と「兼務」という呪縛｜市谷 聡啓 (papanda)
このことを思い考え巡らせているうちに、そういえばと思い出した。「Googleの20%ルール」だ。 Googleの20%ルールとは、Googleの社員が自分の働く時間の20%を、自分自身の新しいプロジェクトや創造的なアイディアに費やすことが許されているというルールです。これは、従業員が自分自身の関心や情熱を追求し、新しい製品や機能を創出する機会を与えるためのものです。 このルールの結果として、GmailやGoogleニュース、AdSenseなど、現在Googleの主要な製品となっているものの多くが生まれました。このルールは、従業員の創造性とイノベーションを奨励し、会社全体の成長と発展を促進するために設けられました。 Chat GPT もう10年以上前だろうか。このルールの斬新さが、日本にも一定のインパクトを与えたのは。模倣しようとした組織もかなりあったのではないか。ただ、昨今はあまり耳にしな
とにかく日本の住所のヤバさをもっと知るべきだと思います｜inuro
「住所の揺らぎ程度のことにAIを使いたいだとかデジタル音痴」だの「住所の正規化なんてExcelで2時間あれば作れそう」だの、たいへんフットワークの軽やかな言説の数々に、位置情報界隈のみならず住所の正規化や名寄せに少しでも関わったことのあるエンジニアが総立ちでマサカリを投げていたのも記憶に新しい今日この頃ですが（2023年6月6日）、この手の騒動は周期的に起こってる印象です。 ということはつまり いつまで経っても解消されない、解決が困難な課題である その困難さが界隈以外に共有されていない であるわけで、その都度Twitterにトリビアが投下されてはTLが賑わい華やかではありますが、そろそろ自分の整理としてもどれだけ日本の住所システムがカオスで、その計算機的な処理がいかに困難かをメモっておこうかと思いました。 なおこの件については既にQiitaにGeoloniaの宮内さんが鼻血の出そうな良エン
rinna社が日本語特化の対話GPT言語モデルを公開！ VRAM6GBあれば動くかも。｜はまち
rinna社から、日本語に特化した強化学習済みの「対話GPT言語モデル：rinna/japanese-gpt-neox-3.6b-instruction-ppo」をオープンソースで公開したとの大ニュースがありましたので、早速ためしてみます！😀 無料のGoogle Colabで動くお試し用の簡易プログラムも作ってみましたので、ぜひお試しください。 １．モデル特徴（プレス文から）36億パラメータ（3.6B）を持つ汎用GPT言語モデルをベースに、対話GPT言語モデルへのfine-tuningと強化学習を行っています。 強化学習には、HH-RLHFの一部を日本語に翻訳したデータを用いています。 強化学習済みのモデルは、Hugging Faceに商用利用可能なMIT Licenseで公開されています。 特定の利用目的に対して性能を最適化させたい場合には、fine-tuningやin-context
ChatGPTを使った社内ドキュメントを読み込んで回答できるアシスタントBotを作りました！｜howdy39
※2023.04.25 予想以上に見られているので追記 ChatGPTはAPIでの利用なので学習はされません。また入れてる情報は社内のだれでも見れてよい情報に留めており、顧客情報を始めとした個人情報などは一切含めていません。STORES サービスに関わる情報も含んでおりません。 入れているのは社内業務における経費精算などの各種申請の手順、オフィスの利用ルール、福利厚生の解説などに限定されています。 この記事は STORES PX Advent Calendar 2023 Spring 16日目の記事です こんにちは！STORES のPX部門IT本部でマネージャーをしている@howdy39です。 先日、社内向けにChatGPTを使ったアシスタントBot（Slack Bot）を開発しリリースしたのでそのご紹介記事になります。 リリースアナウンスのSlackメッセージどんなBOT？STORES
良いチームを目指して｜Keisuke Ookura@Money Forward
この記事は、マネーフォワード関西拠点 Advent Calendar 2022- Adventar の25日目の投稿です。 私はマネーフォワードの大阪開発拠点長として、また、エンジニアリングマネージャとして良いプロダクトを作れる良いチームを作るために日夜奮闘しています。 この記事では今年一年を振り返って、考えてきたこと、悩んできたこと、学んだことを言語化していこうと思います。 ちなみに筆者ってどんな人？についてはこちらの記事を閲覧いただけると喜びます。 私たちのチーム私の所属している関西開発拠点の多くのメンバーがビジネス向けのプロダクトの開発に携わっています。 具体的には以下の３プロダクトの開発を担当しています。 マネーフォワード クラウド会計Plus マネーフォワード クラウド連結会計 マネーフォワード クラウド アプリポータル 私はこの３つのプロダクトの開発チームに責任を持ち、マネジメ
肉を焼くときは強火で何度も裏返せ！｜樋口直哉(TravelingFoodLab.)
食の博識、樋口直哉さん(TravelingFoodLab.)による科学的「おいしい料理」のつくり方。12回目のテーマは『ステーキの焼き方』。焼くのは強火がいいのか、弱火がいいのか？ 焼くときは肉を触らない方がいいのか、頻繁にひっくり返した方がいいのか？ さまざまな意見がありますが、樋口さんがおいしい肉の焼き方（表面がカリッと、中はジューシー）を論理的にご紹介します。 今回はステーキの焼き方を考察します。インターネットで牛肉の焼き方を検索すると数え切れないほどの方法がでてきますが、目指すのは表面がカリッとして、なかはジューシー。噛みしめるごとに濃い肉の味がじんわりとする仕上がりです。 ビーフステーキ（一皿分）牛肉 180g(2cm厚) 塩 適量(肉の重量の0.5%が目安) 胡椒 適量 まずはステーキ用として売られている肉を購入します。 なぜ、ステーキ用とそうではない部位があるのでしょうか。
Web3はWebではない｜みし
WebではないWeb3 イーサリアムのブログを読むとそう解釈せざるおえない。WebとはWorld Wide Webの略で、インターネット上で、HTMLドキュメントを配信するシステムで、httpプロトコル上で文書をやりとりシステムである。このシステムは、クライアント＝サーバーアーキテクチャを前提としている。 そしてWeb3はWebではない。なぜならhttpプロトコルを使うとは限らないし、HTMLドキュメントをやりとりするとは限らないし、クライアント＝サーバーではなくPeer to Peer(P2P)を前提にしている。WebはP2Pではなくクライアント＝サーバーなのでWeb3はWebではない。 なぜ定義がおかしいのか？ Web3の大元の定義がおかしいから説明しにくいし、理解もしにくい。なぜ分かりにくい言い方をしているかと言えば、Web3自体がベンチャーが投資家からお金を巻き上げるためのマーケテ
TypeScriptでreact-hook-formを使ってみた｜ryry_w
Reactで独自にフォームを実装しようとすると、CustomHooksに大量のロジックが必要になり、コード量もかなりの量になることがあります。 多くの人がこの面倒な部分に遭遇しているかと思います。 そのため、react-hook-formやFormikなどの有名なライブラリが利用されることがあります。 今回はreact-hook-formを使用してみましたが、ハマったポイントなどをここにまとめておきたいと思います。 まず、パッケージをインストールしましょう。 $ yarn add -D react-hook-formでは、ざっくりとした今回のコードを紹介します。 UI部分はMaterial UIを使用しています。 import React, { ReactElement } from 'react'; import { useForm } from 'react-hook-form'; i
Next.jsにSentryを導入した際の課題と解決策について｜食べログ フロントエンドエンジニアブログ
はじめまして、2021年11月に食べログFE(フロントエンド)チームにジョインした遠藤です。 Next.jsを採用した新規プロジェクトに参画し、Sentryの導入を行いました。本記事ではSentryを導入した際の課題と解決策について記載していきます。 1. はじめに「Sentryとは何か？」、「食べログでSentryを選定した理由」などにご興味がある方はまず下記の記事を読んでみてください。 Sentryは便利ですが以前はアプリケーションに導入するにはいくつかのファイルを作成して、エラーやパフォーマンスをトラッキングするのに様々な設定を行う必要がありました。 そこでSentryが簡単にセットアップができるように@sentry/nextjsでwizardを提供してくれています。 wizardはコマンドを実行するだけでSentryに必要なファイルを自動で生成し、設定までしてくれる便利な代物です。
よくある2ペインのレイアウト用コンポーネントを作りつつ、Web Componentsの仕組みを理解する｜masuidrive
よくある2ペインのレイアウト用コンポーネントを作りつつ、Web Componentsの仕組みを理解する Web Componentsを一言で説明すると「HTML/CSSが独立したカスタムタグを作れる仕組み」です。理解するには、まずは素のJavascriptだけでよくある部品を作ってみることが一番だと思います。 多くのサンプルではボタンやアイコンなどの部品を作りますが、今回はflexboxを使ったレイアウト定義のコンポーネントを作ってみます。この部分にはちょっとしたハマりどころがあるのでちょうど良い練習になります。 もう一つハマりやすいのはフォーム部品ですが、これはまた後日書きます。 この記事の前に 「今なら使えるWebComponents」を軽くでも読んでおいてもらえると嬉しいです。 2ペインのレイアウトを考える最初にWebアプリでよくある、左にナビゲーション、右にコンテンツを置く2ペイン
今なら使えるWebComponents｜masuidrive
Web Componentsは10年ほど前に提唱されたブラウザのコンポーネント技術の総称です。自分でタグを作ってHTMLを拡張していける技術なのですが、ブラウザの対応や仕様の確定などに時間がかかり、なかなか実用に至りませんでした。 私もずっと忘れていたのですが、React/Vueに疲れたなーと考えていたところ、ふと思い出し調べ直してみると、既に安定してProduction readyなのに情報が少なくすごくもったいなかったので、自分で調べつつ色々書き残すことにしてみました。 Web Componentsの誤解名前は聞いたことはあっても使ったことがある人はまだ少ないWeb Components。私も認識違いがありました。 UIコンポーネントを作る仕組みだから自分で作ることはないCSSをページをまたがって使い回すことがあるなら楽になります CSSで!important を書いてたらWebCom
React部分導入時の開発・検証環境紹介｜食べログ フロントエンドエンジニアブログ
この記事は食べログアドベントカレンダー2020の1日目の記事です。 2020年も残り1ヶ月になりました。早いものですね。 この記事を執筆するのは、食べログでフロントエンドチームに所属する@hagevvashiです。 はじめに食べログではRuby on Rails(以下RoR)を用いており、サイトの大部分がRoRによってHTMLのレンダリングまで行われています。JavaScriptでの実装はほとんどがjQueryなどを用いた非宣言的なものとなっています。 歴史あるサービスなので、それなりにコード量が増えかつ複雑になっています。例えば既存のjQueryやBackbone.jsで書かれたソースコードを変更するのに予想外のコストを強いられたりします。 食べログを引き続きユーザにとって価値のあるサービスにするためには、いち早く新しい機能を届ける必要があります。そして、そういった予想外のコストを少しで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
