愛されて23万View！新卒向け研修資料「テスト文字列に”うんこ”と入れるな（2024年版）」を公開しました｜技術ブログ｜北海道札幌市・宮城県仙台市のVR・ゲーム・システム開発 インフィニットループ
ホーム 技術ブログ 愛されて23万View！新卒向け研修資料「テスト文字列に”うんこ”と入れるな（2024年版）」を公開しました 愛されて23万View！新卒向け研修資料「テスト文字列に”うんこ”と入れるな（2024年版）」を公開しました こんにちは松井です。今は会長になりました。 遡ること3年前、2021年の新卒研修向けに「テスト文字列に”うんこ”と入れるな」という資料を作成しました。 おかげさまで多くの方に読んでいただいたようで、SlideShareのView数は「23.6万View（2024年4月現在）」にまで達しました。 わたし的にはもうこれで満足していたのですが、 「会長、今年も例のうんこの話をしていただけませんか」 というオファーがあり、またこのクソみたいな話をすることになったという次第です。 せっかく話をするならばということで、事例やTIPSのページを新たに加え、「2024年
1つの HTML ファイルだけで完結する校正支援ツールの作り方
こんにちは。LINEヤフー株式会社でテキストマイニングや自然言語処理などをやっている山下（ @yto ）です。 Yahoo!デベロッパーネットワークのテキスト解析 Web API が CORS（Cross-Origin Resource Sharing）対応したため、サーバがなくてもブラウザから直接 Web API にアクセスできるようになりました（参考）。 そのテキスト解析 Web API の機能の一つである「校正支援」は日本語文章の品質チェック（校正）を支援するもので、文字の入力ミス、言葉の誤用、わかりにくい表記、不適切な表現などが使われていないかをチェックして、指摘します（内部の辞書データをベースとしているため完全なものではないことをご承知おきください）。 この校正支援機能のサンプルプログラムとして「HTML ファイル1つだけで完結する校正支援ツール」を作ったので紹介します。入力され
Bento UIとはパネルが伸び縮みしながら配置が入れ替わるお弁当箱みたいなUI、View Transitions APIでCSSアニメーションが進化する
Bento UIとはパネルがお弁当箱のように配置されており、各パネルをクリックすると伸び縮みしながら配置が入れ替わるUIです。最近のWebサイトやスマホアプリでもよく見かけるようになりました。そんなBento UIをView Transitions APIを使用して実装されたデモを紹介します。 一昔前なら実装は面倒でしたが、Chrome 111から利用できるView Transitions APIにより簡単に実装できるようになりました。 Rediento -Bento Radio Group Carousel thing 実装にはChrome 111で実装されたView Transitions APIが使用されており、2つの状態間のアニメーションを作成しながら、1ステップでDOMを簡単に変更できます。 各パネルは、CSS Gridでレイアウト。 positionはなし。 ビジュアルのトラン
View Transitions API入門 - 連続性のある画面遷移アニメーションを実現するウェブの新技術 - ICS MEDIA
今年3月に公開されたChrome 111とEdge 111にView Transitions APIが搭載されました。View Transitions APIを使うと、シンプルでスムーズな連続性のあるアニメーションを実装できます。 ウェブ技術でのアニメーションはさまざまな手段が存在します。CSSのtransitionやanimation、JavaScriptでのWeb Animations APIなど利用されている方も多いでしょう。View Transitions APIは、これらのアニメーション手段だけでは実現が困難だった新しい遷移アニメーションを実現できます。 本記事では「どのようなことができるか」「使い方」「使用上の注意点」を紹介します。 本記事で紹介すること View Transitions APIで実現できるのは新しい遷移アニメーション JavaScriptとCSSの指定で容易に
VSCode Notion - Visual Studio Marketplace
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter. VSCode Notion Browse Notion pages directly in Visual Studio Code. Disclaimer: This is an unofficial extension made using an unofficial renderer with the data from an unofficial API. Features Here is a list of features that the extension currently supports. 📄 View Notion pages while you're coding 🔓 Supports both pri
Notionを使ってブログネタの管理をやってみた | DevelopersIO
Notionというサービスをご存知でしょうか。 メモ・ドキュメント・プロジェクト計画・タスク管理・議事録などを一纏めで管理できます。使い方次第でいろんな事ができます。 公式サイトを見ると分かりやすいです。 Notion – The all-in-one workspace for your notes, tasks, wikis, and databases. Notion - YouTube Notionの存在自体は1年ぐらい前に知って使ってみましたが、いろんな事ができるが故に、初めて使うにあたってどうすれば良いか悩み、結局そのまま諦めました。 そんなNotionに再チャレンジしてみました。 本記事では、ブログネタを題材にして「完成に至るまでの作り方」に特化してご紹介します。 （Notionとは何か・Notionは良いぞ・私なりのNotoinの使い方などは扱いません。） 完成形の紹介はよ
プロジェクト・タスク管理ツールにmonday.comを使い始めたので、いかにmonday.comが最高かを紹介したい - Studyplus Engineering Blog
こんにちは、スタディプラスの栗山(id:shepherdMaster)です。 みなさんは社内でどんなプロジェクト・タスク管理ツールを使ってますでしょうか？ 今回はスタディプラスで最近使い始めたプロジェクト・タスク管理ツールのmonday.comを紹介したいと思います。 Taskworld時代 社内では以前はTrelloに似たカンバン形式のプロジェクト・タスク管理ツールのTaskworldを使っていました。 しかしTaskworldは使い続けていると動作が重くなってきたり、たびたびTaskworldに障害が発生したり、Slackへ簡単に通知連携できなかったり、そもそもツールとして使いづらかったりと不満が上がっていました。 そのため新しいプロジェクト・タスク管理ツールを選定することになりました。 新しいプロジェクト・タスク管理ツールの選定 社内で新しいプロジェクト・タスク管理ツールを選定するた
Android開発者のためのFlutter説明文がためになったので全訳&要約 - Qiita
View Viewに相当するものは？ Androidではボタン、ツールバー、inputsなどのすべてがViewです。 Flutterでは、Viewとおおよそ同じものがウィジェットです。 ウィジェットはAndroidのViewに正確に対応しているわけではありませんが、Flutterがどのように機能するかを学んでいる間は、"UIを宣言および構築する方法"と考えることができます。 ただし、これらにはいくつか違いがあります。はじめに寿命が異なります。 ウィジェットは不変であり、変更が必要になるまで存続し続けます。 ウィジェットやそのウィジェットのStateが変更されるたびに、Flutterフレームワークは、新しいウィジェットツリーを作成します。 それに対して、AndroidViewは、一度描画されたら、invalidate()が呼ばれるまで再描画されません。 Flutterのウィジェットは、その不
React – ユーザインターフェース構築のための JavaScript ライブラリ
React は、インタラクティブなユーザインターフェイスの作成にともなう苦痛を取り除きます。アプリケーションの各状態に対応するシンプルな View を設計するだけで、React はデータの変更を検知し、関連するコンポーネントだけを効率的に更新、描画します。 宣言的な View を用いてアプリケーションを構築することで、コードはより見通しが立ちやすく、デバッグのしやすいものになります。 自分自身の状態を管理するカプセル化されたコンポーネントをまず作成し、これらを組み合わせることで複雑なユーザインターフェイスを構築します。 コンポーネントのロジックは、Template ではなく JavaScript そのもので書くことができるので、様々なデータをアプリケーション内で簡単に取り回すことができ、かつ DOM に状態を持たせないようにすることができます。
自作フレームワークをつくって学ぶ 仮想DOM実践入門
昨今の代表的なJavaScriptフレームワーク（React、Vue.jsなど）には「仮想DOM（Virtual DOM）」という概念が採用されているので、フロントエンド界隈の人は一度は耳にしたことがあるだろう。ただ、仮想DOMについて学ぼうと検索してもヒットするのは「フレームワークの使い方」ばかり。踏み込んでいても概念の説明どまりで、仮想DOMがどのように実装されているか解説した記事はすくない。 ということで、当記事では理解を深めるために仮想DOMを使ったフレームワークを自作し、仮想DOMに入門する！ そして、ReactやVue.jsを単なるブラックボックスのフレームワークではなく、中身を理解して使えるようになることを、当記事の目標とする。 フレームワークが完成すると以下のようなWebアプリケーションがつくれるようになる。 TOC 記事が長くなりそうなのでも目次 そもそもDOMとは？ D
React NativeのViewもLogicも非同期処理もjestで全部テストする - Qiita
というコマンドでテストの実行が可能です。 また、jestはルート以下で__tests__ディレクトリ配下にあるファイルはテストファイルとみなします。 アプリケーションの分割とディレクトリ構成 基本的にreactとreduxのベストプラクティスに従っておけば良いと思っています。 A Better File Structure For React/Redux Applications 個人的React周りベストプラクティス⑤ - Reduxディレクトリ構成編 一方で「お前が作るアプリはそんな大層な構成が必要なほど巨大なのか？？ん？？？」 っていう類の批判もある模様です。割と的を射た指摘だと個人的には思います。 11 mistakes I’ve made during React Native / Redux app development 今回は勉強の意味合いも兼ねているので前者寄りの以下のよ
React NativeのレイアウトエンジンYogaの仕組み [前編] - Adwaysエンジニアブログ
こんにちは、@binaryta です。 先日「React Native OSS ペアプロ会 #3 byFACTBASE」というイベントに参加してきました。 factbase.connpass.com OSSにcommitすることを主眼としていて、React Nativeのissueの問題に解決策を提示したり、解決できそうならPull Requestを送るといった内容です。 このイベントに参加中、レイアウトのバグを直そうとしていた際にYogaを知りYogaに興味を持ちました。 僕は「React Native OSS ペアプロ会」には初回から参加していますが、今後も定期的に開催するみたいなので、興味ある方は是非参加してみてください。 対象 Yogaはクロスプラットフォーム間で共通にレイアウト処理をするべく作られたレイアウトエンジンです。そのためiOSではObjective-C, Android
![React NativeのレイアウトエンジンYogaの仕組み [前編] - Adwaysエンジニアブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/72abfaebb5f46a2b58ed269573255d4ad3c6f6bf/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2FA%2FAdwaysEngineerBlog%2F20180824%2F20180824163608.png)
Firebase In-App Messagingを早速触ってみたのでまとめる - Qiita
In-App Messaging, Crashlytics integrations, and more! Oh my! にて発表があり、「In-App Messaging」という機能がβ公開されたので早速触ってみました。 In-App Messagingとは In-App Messaging - Introduction (引用: In-App Messaging, Crashlytics integrations, and more! Oh my!) ざっくり説明すると、アプリ内で指定した条件に基づき、カスタマイズしたポップアップ形式やバナー形式のViewを表示できる機能です。 よくサービス内で、特定の条件になったらポップアップを出すとか、そういう実装をすると思うのですが、それをFirebaseが今回提供した形です。 In-App Messagingでできること 表示するViewのカス
Dockerを活用し、Re:VIEWによる技術書の執筆環境を構築する最短経路 for Mac - このすみノート
技術書典5に向けて、執筆環境の整備を行なっています。前回の技術書典4では、最終的にGoogleドキュメントで執筆しました。 前回の技術書典4の模様は、過去のブログ記事で綴っておりますので、もし宜しければご覧ください。 www.konosumi.net さて、今回は、GitBookかRe:VIEWを使おうと決めていました。そこで、実際に両方で執筆をしてみたのですが、比較した結果Re:VIEWで書くことに決めました。 その際のRe:Viewの環境構築手順を共有したいと思います。最初に言っておきますが、Re:VIEWの執筆環境の構築は、物凄く簡単です。 必要なモノはDockerだけである 私は、今回の執筆にはDockerを活用することにしました。なお、Docker for Macのインストールは、HomeBrew経由が最もお手軽です。 # HomeBrewのインストール(入ってない人だけ) /u
React Native製アプリのクオリティを上げるために工夫した事
Illustration by unDrawInkdropというMarkdownノートアプリを一人で作っているTAKUYAです。最近、React Nativeを使って、iOS版とAndroid版の新しいバージョンをリリースしました。React Nativeは、JavaScriptとReactを使ってクロスプラットフォームなモバイルアプリが開発できるフレームワークです。 どうすればReact Nativeでハイクオリティなアプリが作れるのか、今回の開発を通して多くのことを学びました。本稿では、よりよいアプリを作るために自分が工夫したことをシェアします。既にReact Nativeでアプリを作っている方も、これから作ろうと思っている方も参考になるかと思います。 概要OSSライブラリは慎重に選ぶネイティブ拡張モジュールは出来るだけ使わないUIテーマの対応タブレットの対応動作を軽く保つ違和感のない
Flutterを仕事で2ヶ月使って思ったこと - Qiita
導入のしやすさ Mac必須 開発というよりかは、iPhoneやiOS Simulatorの為 Flutter Doctor 便利 packageも楽ちん 導入というか性質というか、頻繁にFlutterアップデートが来る。描画が壊れるupdateもあったが、回避方法はあったので致命的ではなかった WYSWYGツール不在の為、UI設計が面倒とおもったけど十分高い生産性 hot reloadが優秀 (ソース保存即時反映） Debug paintが優秀 (各コンポーネントの描画範囲等がわかる) Flutterの基本コンポーネントにしろよと思ったパッケージ群、よっぽどシンプルじゃない限り必要になる 以下 pubspec.yaml dependencies:に追記するべきパッケージ validate: "^1.6.0" #email等、入力チェック http: "^0.11.3+16" # APIと通
図解！どのサイトを見てもわからなかった人のためのMVC - Qiita
MVCとは UIを持つアプリケーションソフトウェアを実装するためのデザインパターンである。 MVCではプログラムをModel、View、Controllerの3つに分割して書くことで機能の独立化・可読性の向上を図ることができる。 MVCを調べるとこんな感じの説明がでてきたと思います。 でも最初はピンとこないかもしれません。「デザインパターン？」「機能をなんで独立させなくちゃいけないの？」「結局なんのためにMVCにするの？」 今回は10サイトくらい見ても結局わからなかった人のためになるべく難しい言葉を使わずに、図解してわかりやすくMVCについて説明していきます。 日常生活に即して例をみていきましょう 一旦プログラムから離れて、わかりやすいところからMVCについて解明していくことにします。 おじさんのレストラン 子供のころから自分の店を開くことを夢見ていたおじさんが、ついにレストランを開業しま
The Full React Native Layout Cheat Sheet
As a newbie in React Native I found myself time after time going back to React Native layout docs, struggling to understand and master the difference between all the different props. justify vs align, relative vs absolute, items vs content, It was all very confusing… 😟 So I prepared this visual guide with all of the important props, including some playgrounds where you can play around with them.
React Native Elements でイケてるUIを作る - Qiita
どんな記事？ React Nativeのスター1万超えのUIライブラリ React Native Elements の使用方法についてまとめた記事です。 今回はプロジェクトを作るところから始めてみます。 また、バージョンは 0.19.0を使用しております。 また、@y_tsubukuが開発するyaritori - メール共有システムも、良ければご覧ください プロジェクトを作成 create-react-native-appでさくっと。 # プロジェクト作成 $create-react-native-app elements_example # 作ったプロジェクトのルートディレクトリへ移動 $cd elements_example # 起動 $yarn start import React from 'react'; import { StyleSheet, Text, View } fro
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「女性同士のマウンティング」に関する研究論文が興味深くView数が少ないのがもったいないレベル 具体的なエピソードもなかなかすごい
