Share Facebook Twitter LinkedIn Mail Our next generation of Flutter, built for web, mobile, and desktop Today, we’re announcing Flutter 2: a major upgrade to Flutter that enables developers to create beautiful, fast, and portable apps for any platform. With Flutter 2, you can use the same codebase to ship native apps to five operating systems: iOS, Android, Windows, macOS, and Linux; as well as we

CSSは使いようによっては様々な表現が可能な奥深い言語です。しかし、アニメーションなど凝った動きをするものに関してはコードは見れても実装方法を詳しく解説している記事は多くないように思えます。 この記事では、私（さかっちょ）がTwitterで過去にツイートしたCSSの技術をCodePenで改めて実装し、Twitterでは解説しきれなかった実装方法をより詳しく説明しています。CSS初学者の方にもわかりやすいように解説していますので、ぜひ参考にしてみてください。 その1. 一文字ずつ登場するテキストアニメーション See the Pen [CSS Tips] Text Show-up Motion by Takuro Sakai (@sakaccho) on CodePen. 一文字ずつtransformで移動させています。文字が途切れることなく流れるようにtransition-delayを調整

Next.js by Vercel - The React Framework 画像は Next.js サイコー！っていう顔です。 Webフロントエンドエンジニアであれば、「Reactのフレームワーク」と聞いて真っ先に思いつくであろうNext.js。僕は小規模の趣味開発から中規模の業務まで、4年程度Next.jsを使い続けてきました。触りはじめの当時はバージョン4で、”SSR（Server-side Rendering）を提供するReact製フレームワーク”だったものが、執筆時時点の最新バージョン（10.0.1）ではガラッと異なるフレームワークへと進化しています。 この4年間は実務で利用するだけでなく、新しいものや廃止された機能、RFC止まりになった機能など、Next.jsに関する情報を追いかけており、ある程度の知見をためつつも、Next.js並びに開発元のVercelが目指す方向性を何と

ウェブサービスを開発しても、実際にユーザーに手に取ってもらえるようになるまでには時間と努力が必要です。どうすればユーザーが自社サイトを訪れてくれるのか、どうすればユーザーが定着するのかというアドバイスを、データセットを販売する企業「YipitData」の共同創設者兼CEOであるヴィニシウス・ヴァカンティ氏が語っています。 How To Get Your First 1,000 Users | Vinicius Vacanti http://viniciusvacanti.com/2011/02/08/how-to-get-your-first-1000-users/ ヴァカンティ氏が言うには、1000人程度をウェブサイトに導くことは、一般的に考えられるよりも簡単なことだとのこと。しかし、その1000人を繰り返し訪れてくれるユーザーに変えたり、サイトのアカウントを作成してもらったりするには大

概要 Jamstack Advent Calendar 2020 - Qiita の22日目の記事です。 株式会社トライビート｜ TRIBEAT CO., LTD. という会社でBtoCや業務システムのWebアプリケーション構築や運用・保守をしています。 これまでJamstackという言葉が出てくる前から、社内独自のSSGの仕組みで試行錯誤して対応することがありました。 Jamstack関係の環境やサービスが充実してくる中で、ECサイト構築が現実的に良い選択になりそうかを実際に試してみたので、考察やハマったポイントを備忘録としてまとめる。（まだ検証中） アーキテクチャの構成 microCMS Firebase hosting Firestore Firebase functions Firebase Authentication Nuxt.js Algolia Stripe GitHub

Use HTTPS for local development Stay organized with collections Save and categorize content based on your preferences. Most of the time, http://localhost behaves like HTTPS for development purposes. However, there are some special cases, such as custom hostnames or using secure cookies across browsers, where you need to explicitly set up your development site to behave like HTTPS to accurately rep

κeenです。最近JEITAのソフトウェアエンジニアリング技術ワークショップ2020に参加したんですが、そこで五十嵐先生、柴田さん、Matzとパネルティスカッションをしました。その議論が面白かったので個人的に話を広げようと思います。 年末年始休暇に書き始めたんですが体調を崩したりと色々あって執筆に時間がかかってしまいました。 時間を置いて文章を書き足していったので継ぎ接ぎ感のある文体になってるかもしれませんがご容赦下さい。 というのを踏まえて以下をお読み下さい。 いくつか議題があったのですが、ここで拾うのは一番最後の「プログラミング言語の未来はどうなるか」という話題です。 アーカイブが1月末まで残るようです。もうあと数日しかありませんが間に合うかたはご覧下さい。 そのとき各人の回答を要約すると以下でした。 五十嵐先生：DSLを簡単に作れる言語というのが重要。それとプログラム検証、プログラム

I am trying to test a method that uses FirebaseFirestore but I am not able to mock the FirebaseFirestore.instance property. I am following these examples: Initializing the core: https://firebase.flutter.dev/docs/overview#initializing-flutterfire Using the firestore plugin: https://firebase.flutter.dev/docs/firestore/usage I am using the code below for my class and it is working well, which means t

“Nice UI. But how does Flutter deal with platform-specific APIs?” Flutter invites you to write your mobile app in the Dart programming language and build for both Android and iOS. But Dart does not compile to Android’s Dalvik bytecode, nor are you blessed with Dart/Objective-C bindings on iOS. This means that your Dart code is written without direct access to the platform-specific APIs of iOS Coco

群青ちきん @miseromisero エッチな画像が欲しかったので、遺伝的アルゴリズムでエッチな画像を生成するシステムを開発しました。サイトでみなさんの好みを送り続けると、だんだんとエッチな画像が表示されるようになるはずです。 エッチな画像を作るために、よければRT等お願いします。 gamingchahan.com/ecchi 2021-01-10 19:24:01

ウェブサイトを閲覧していると「画像の読み込みが遅い」という場面に遭遇したことがある人は多いはず。画像はウェブサイトのパフォーマンスを左右する要素のひとつであり、ウェブ開発において取り扱いに注意すべきものです。そんな画像をウェブサイトで扱う際の最適化方法について、GoogleのエンジニアであるMalte Ubl氏が解説しています。 Maximally optimizing image loading for the web in 2021 https://www.industrialempathy.com/posts/image-optimizations/ ◆img要素にwidthとheightを指定する アスペクト比を維持したまま画像サイズを変更するには、「style」要素に「max-width: 100%」や「height: auto」と指定しておく手法がよく用いられます。この手法に加

これまでのあらすじ 財テクを書いた後に、いままで賃貸に住んでいて、戸建かマンションを買ってみるかとなった COVID-19 の影響で在宅勤務が長期化しており、都心の 1LDK よりも、少し郊外で広い家に引っ越して、書斎というかオフィス的な空間を自宅内に用意したいと考えた 家の買い方に関する本をいろいろ買って読んでみたり、ネットの記事を読んでみたり、実際にマンションの購入手続きを進めてみたり (途中でキャンセルしたけど) 、仲介業者の紹介でファイナンシャルプランナーに相談したりした 前提 shunirr の独自研究による財テクをまとめています shunirr は、そこそこの規模の会社勤務なソフトウェアエンジニア、東京 23 区内在住、実家は田舎の賃貸で、相続できる資産とかは無い shunirr の思想・価値観によってまとめられているので異なる価値観の人には合わない可能性があります shuni

はじめに 新年早々に面白そうな記事を見つけました。ReactでのAPI呼出しを最適化するために「部分的にサーバサイドで実行するコンポーネントを作る」というもののようです。 あるいは去年の記事ですが気になってたものとしてBlitz.jsでReactベースのFWであるnext.jsに永続化層を持たせてRailsのようなFWにしようというアプローチもあります。 どちらの記事も書かれてる内容自体は分かる気がするものの 「それをフロントエンドでやる意味あるの？」 というのが拭えずイマイチ腑に落ちなかったんですが、単純に 「私と最前線でやられてる方々で期待してるものがたぶん違う」 という気がしてきたので、その辺を整理のために書いてみます。 注意書き Vue.js/Nuxt.jsは少し触ったことがありますが、React Server ComponentsやBlitz.jsを触ったことは無いです 「なんで

本書は、Micro Frontends Architecture Patternsというタイトルを付けていますが、モノリスからJAMstack、Micro Frontendsまで、Webフロントエンドを包括した様々なアーキテクチャパターンの詳細を体系的に紹介しています。 ソフトウェアとしてのアーキテクチャ全体を俯瞰し、他のシステムとのやりとりを設計するような考え方が役に立つことは多いです。フロントエンド観点で、様々なアーキテクチャパターンをまとめることで、Web開発の助けになればと考えています。 また、アーキテクチャの歴史と変遷を知ることで「Micro Frontends」への理解を深めることができると筆者は考えました。Micro FrontendsはThoughtWorksのTechnology RadarではすでにADOPTとなり、海外で多くの事例が存在します。Micro Fronte

openbaseとは https://openbase.io Find and compare open-source packages with user reviews, categorization, and unparalleled insights about packages' popularity, reliability, activity, and more. 手を抜いてdeeplでw ユーザーレビュー、カテゴリ分け、パッケージの人気、信頼性、アクティビティなどについての他の追随を許さない洞察力で、オープンソースパッケージを見つけて比較してください。 現在、多くのプログラミング言語はパッケージマネージャがあって、何らかの方法でパッケージについての情報を取得することができると思います。 パッケージの選び方 自分の場合はjs系が殆どなので、ライブラリを選ぶ方法は以下のような感

こんにちは。AI事業本部の青山（@amsy810）です。 2020年版「おうちKubernetesインターン」を実施したため、事後レポートをブログにまとめたいと思います。 コロナ禍のため、機材一式を学生とメンター宅に郵送し、フルリモートでの実施となりました。 またそれに合わせて3 Daysだったものを7 Daysに伸ばして、初日と最終日以外は夕会だけをコアタイムとしたフレックス性で実施しています。 メンターは私以外に、徳田、川部、漆田、源波、中西、岩立、長谷川が参加しています。 概要 今回のおうちKubernetesは Raspberry Pi 4 の 8GB モデル 3台 を使ってクラスタを構成しました。 単純な仕様だと、12 core + 24 GB Memory のクラスタです。もはやノートパソコンに近しい性能ですね。 また、今回 Raspberry Pi 4 になってから最低 2.

この記事は社内の勉強会で話した内容を再編したものです。 私自身はPC/ブラウザ/スマホのアプリ開発をしている１エンジニアにすぎないのですが、対客や要件定義から開発、運用、そしてUIのデザインを担当しており、自分なりに伝えられるものがないかと試みたものです。 デザインとは デザインとは単に見た目だけの話ではなく、「ビジネス」と「ユーザーが得る体験価値」から始まり、それを実データと結びつけながら人の認知を通してどう見せるのかという作業です。 始まりの部分は最近だとUXデザイナー、終わりの部分はUIデザイナーとかグラフィックデザイナーとか呼ばれるような人の仕事です。そしてそれらを形にするのがエンジニアです。 画面を設計するまでの作業 ギャレットのUX5段階モデルに従って、どういったことを考えないといけないのか確認します。 （実際にUX５段階モデルを意識して仕事してるわけではありませんが、何かしら

電車・バスをご利用の場合は、京浜急行「三崎口」駅より京急バス「ソレイユの丘」行きにて約15分終点下車。または「荒崎」行きにて約20分「漆山」で下車（徒歩約650m）。お車をご利用の場合は、三浦縦貫道「林」出口より国道134号線南へ、「ソレイユの丘入口」信号を右折、「林」出口より約3キロ。徒歩の場合は、京浜急行「三崎口」駅より約4キロで、約45分。 概要 ーお知らせー 【遊具施設および回数券の料金改定のお知らせ（令和6年8月13日更新）】 令和6年9月1日より、各遊具施設利用チケットおよび回数券の価格を改定いたします。 ＜料金改定日＞ 令和6年9月1日（日曜日）より ＜料金＞ 各遊具施設利用単価　350円→400円 回数券　3,500円→4,000円 農業体験ができる総合公園として整備されたソレイユの丘は、令和5年4月14日に、”365日誰もがまるごと遊び楽しめるエンターテイメントパーク”と

「Firebase は安いし楽だしマジ最高」という一心で技術選定してしまったプロダクトが成功して見えてきた課題、割高なコスト・権限管理・カスタマイズ性、そして （特性やスキルセット的に）RDB 製品が適していたのに無理やり Firestore を採用したことによるデータ不整合。 その結果チーム内で Firebase を抜ける機運が高まるも、Firebase べっとりなアプリケーションすぎて移行しづらいといった問題に出会うかもしれません。 そのような場合に備え、Firebase の存在を隠蔽して開発することに挑戦してみましょう。 注意: Firebase を剥がしているときに「俺、次は絶対そうするわ」と感じたものを書いているだけであり、まだ実際にはこのパターンでプロダクション導入していません。 あくまで個人開発で試してみていけそうと思ったので、提案しますという体です。 また Firebase