Custom Transitions in React Navigation
Note: This is part 4 in a series on React Navigation. Check out my posts on Getting Up and Running, Styling Navigators, an introduction to Stack, Tab, and Drawer Navigators, and Connecting React Navigation to Redux. React Navigation makes it relatively simple to style navigators, but what if we want to change how they behave? What if I don’t like the default behavior where screens slide in from th
A stately guide to React Navigation with Redux
Note: This is part 5 in a series on React Navigation. Check out my posts on Getting Up and Running, Styling Navigators, an introduction to Stack, Tab, and Drawer Navigators, and Custom Transition Animations. React Navigation’s default routing behavior works perfectly for many mobile apps, but sometimes you need more customization than it provides out of the box. You can unlock useful functionality
次世代デザインツールはどこへ向かうのか 後編
次世代デザインツールはどこへ向かうのか 前編 次世代デザインツールはどこへ向かうのか 中編 デザインをスケールさせていく デザインツールの現在と未来を考えたとき、デザインシステムの存在は無視できません。今のデザインツールはデザインシステムの作成・運用に最適化するための機能実装がされています。 一貫性のあるデザインの作りやすさ コンポーネント（部品）として捉えた UI の管理 複数人のデザイナーによるプロダクトデザインの運用 コードへの書き出しなどエンジニアとの連携 ひとりのデザイナーに頼るのではなく、組織でデザインを運用していくためにデザインシステムのニーズが高まってきています。欧米ではここ数年でデザイナーとエンジニアの比率が小さくなってきている状況をみても、デザインが個人プレーからチームプレーになってきているのが分かります。 大企業でデザイナーの雇用（又はデザイン会社の買収）が増えていた
次世代デザインツールはどこへ向かうのか 前編
プロトタイプツールからデザインツールへ 私は前線で制作していませんが、Sketch 講座 をはじめデザインツールについて話すことがあります。Sketch を長く使っているのものの、Adobe XD、Figma 、 inVision Studio など他のツールも検証しながら、合いそうな現場にツールを提案するようにしています。 なぜ今デザインツールなのでしょうか。数年前からある プロトタイプツールと何が違うのでしょうか。閉じていたデザインプロセスを開くという意味では当時も今も変わりないと思います。ただ、Sketch、Figma などを代表するデザインツールはスコープが少し広いのが大きな違いです。 Proto.io に代表される 2013 年前後のプロトタイプツールは、インタラクティブな紙芝居に近いものでした。大まかな画面遷移と操作感を実機で体験できるものの、それ以上でもそれ以下でもないような
次世代デザインツールはどこへ向かうのか 中編
実装を考えながら作れなかった従来のツール 6年前になりますが、 web のデザインは枠のない世界であると説明したことがあります。様々なスクリーンサイズのことを考慮して作らなければならないと頭で分かっていても、デザインツールでそれを実現するのが困難でした。10年以上大きな変化がなかったデザインツールに対して、実装側はどんどん進化し続けていました。Web だとフロントエンド技術とワークフローに大きな進展がありましたし、ネイティブアプリも 1 年おきに OS と周りの開発環境がアップグレードしています。 開発は目まぐるしいスピードで変化しているのに対して、デザイン環境は大きく変わっていなかったことが、今私たちが抱えているデザインと開発の溝の根源ではないかと考えています。2010年代はデザインツールの革命期と呼んでも良いくらい様々なデザインツールが出てきていますが、今まで遅れていた分を取り戻そうと
VS Codeを使いこなせ! フロントエンジニア必須の拡張機能7選 - ICS MEDIA
「Visual Studio Code（略称：VS Code）」はMicrosoftが提供している無償で高機能なエディターです。標準でも十分な機能は備わっていますが、拡張機能をインストールすることで、より使いやすく自分にあったエディターへとカスタマイズできます。 本記事では、HTMLコーダーやフロントエンドエンジニアに役立つ拡張機能を紹介します。 1. IntelliCode IntelliCodeはMicrosoft謹製の公式プラグイン。AI支援による次世代のコード補完がJavaScriptやTypeScriptで利用できるようになります。APIの一覧がアルファベット順に提示されるのではなく、利用する可能性の高いAPIがAIによって予測されます。 コード補完の様子を次のスクリーションショットでご覧ください。入力候補の「★」マークが付いているところが、補完候補になっているところです。人工知
漸進的型付け言語の時代に必要なもの - mizchi's blog
最近では、Gradual Typing、漸進的型付けと呼ばれる型システムを備えた言語(拡張)が増えてきています。 次のようなもの JavaScript: TypeScript / Flowtype Python: mypy / pyre-checker PHP: hack / php-storm flow/pyre-checker/hack と facebook 製が多いですね。 この記事は、それらを使う動機と運用について書きます。この記事の出発点として、 おそらく TypeScript/Flow で発生した問題が後発の言語で発生すると思っており、それらを使う方や、設計する人への提言でもあります。 自分は昔 https://github.com/mizchi/TypedCoffeeScript というAltJS作ろうとして、実装のツラミはなんとなく知ってるつもりです。ホビーレベルで作るもの
React Component 視点でのアトミックデザインの解釈といくつかの疑問 - mizchi's blog
フロントエンドの中でも、JS書くプログラマと、CSSを書くマークアップと、デザインカンプを作るデザイナで、コンポーネントという概念がズレる。だいたいこれらが一人だったり兼任だったりで1~2レイヤーの開発ステップになるが、完全分業だったり人が多くなると混乱の元になる。 誰かが決定的に間違ってるというつもりはない。正直、どっちかというと本来のデザイナ側の用語定義に倒した方がいい気がしているが、プログラム上の都合もいろいろ混ざってきて、話が簡単ではない。 自分の理解が間違ってる可能性もある。この記事はレビューをもらうために書いている側面もあり、指摘されたら追記していく。 読んだもの。 Atomic DesignとCSS設計 - Atomic Designとは何か | CodeGrid Atomic Designの考え方と利点・欠点 – wkr. Atomic Design の大雑把な理解 基本的
ReactとVueのどちらを選ぶか - Qiita
主に非Web系のバックエンド開発者(C/C++, Java, Python等を使用)がReactとVueをそれぞれ簡単に触れて、感じたメリット、思ったことなどをまとめています。 色々と書いてますが、どちらも完成度の高いライブラリ/フレームワークですね。 結論 JavaScript等にあまり深入りせずにWebアプリを簡単に書きたい、あるいは効率的に書くことが目的であればVueの方がお勧めです。しかし開発者としてスキルや設計などについて中長期的にレベルアップを図りたいのであれば、Reactから学ぶことをお勧めします。 何故かと言うと、ReactとVueにはそれぞれの利用者に対するスタンスが明確に異なり、Reactの方が利用者を開発者であることを想定/期待しているからです。 Reactは利用者が「開発者」であることを想定/期待します。 What, Whyを重視する 利用者を厳しめに教育する Vu
アプリエンジニアがのぞいた React Native 〜メドレー TechLunch〜 | MEDLEY Developer Portal
2018-05-29アプリエンジニアがのぞいた React Native 〜メドレー TechLunch〜こんにちは、開発本部の高井です。メドレー開発本部で行われている勉強会「TechLunch」でReact Nativeについて発表しました。 私は普段は Swift、Kotlin/Java を使ってネイティブアプリを開発しており、React Native に触るのは初めてでした。そこで今回は、アプリエンジニアの視点から、実装するための基本的な知識と弊社の実際の開発で使えそうかを検討した結果についてご紹介します。 なぜ React Native を触ってみようと思ったかオンライン診療アプリ「CLINICS」の開発では、iOS/Android アプリをそれぞれのネイティブ言語で別々に開発しているため、実装やレビューの際にはプラットフォーム間の仕様の違いを理解する必要があり、なかなか大変だと感
フロントエンドの「想定外」に対応する考え方とTipsいくつか
とても個人的な話ですが、ここ最近で自分自身のプライバシー意識の高まりを感じて、ブラウザの設定を見直す機会がありました。見直したのはCookieの設定で、許可したドメインにしかCookieを記憶しないようにしました。設定変更によるある程度の不便は覚悟していました。とはいえ、ま〜せいぜい、初回アクセスの時のモーダルが何度も出るようになるとか、ログインできなくなるとか、そのくらいかなと思っていました。 しかし実際は、悪い意味で期待を裏切られることになりました。 Cookieが無効なだけで、“全く”動かなくなってしまうウェブサイトやウェブアプリが、本当にたくさんあることに気づいたのです。 全く動かなくなってしまう原因は単純（後述）だったのですが、ちょっとした対処で簡単に直せることなのに、サイト全体が一切使い物にならなくなってて、もったいない！！ と思いました。 フロントエンドの想定外 ウェブサイト
メルカリJP初のiOSリアーキテクチャは、なぜ「最高に楽しい」のか | mercan (メルカン)
サービスとビジネスを加速度的に成長させていくため、メルカリJPは今、2013年のアプリリリース以来となる「iOSリアーキテクチャ」に取り組んでいます。 アプリの機能を維持しながら、最先端のアーキテクチャに刷新していくこのプロジェクト。そこで今回、iOSエンジニアの山中大輔さんと齋藤暢郎さんに、マネージャーの多賀谷洋一さんがインタビューを実施しました。 歴史あるコードを前にしたエンジニアたちが「最高に楽しい状況」と語る理由とは？ 多賀谷洋一（Yoichi Tagaya）※写真左 2017年1月に株式会社メルカリに入社。メルカリUSのiOSアプリ開発を担当した後、エンジニアリングマネージャーとして開発組織の強化に従事。SwiftのDIフレームワーク「Swinject」の作者でもある。@yoichitgy 山中大輔（Daisuke Yamanaka）※写真中央 2015年3月にメルカリに入社。メ
React Nativeにおける多タブかつ件数の多いリストをつつがなく表示させるには - ハウテレビジョン開発者ブログ
TL; DR はじめに 主要なライブラリ/ディレクトリ構成 このようなリストのおはなしです 実装上で気をつけたポイント 起こりがちな問題点 NINJA NINJAを防ぐにはどうするか おわりに はじめに こんにちは！世界で挑戦したいと思う学生に向けた就活支援プラットフォーム、外資就活ドットコムの開発チームです。 先日iPhoneアプリをReact Nativeでリニューアルの上リリースしました！（パチパチ） さて、このアプリは募集情報や体験記、コミュニティなど、比較的件数が多いリストを表示させる箇所がいくつかあります。 そしてそういったリストも業界などのカテゴリやタグでのタブ切り替え表示やソート順などでの切り替え表示をさせています。 つまり、 - データの管理 - 大量のコンポーネント（->ここではリストのアイテム1個1個のこと）の表示管理 - 遅延の少ない切り替え といったことが必要にな
Twitter での6年間 #1｜Satoshi Nakagawa
2012年1月、Twitter の iOS チームに7人目のエンジニアとして入った。 たまたま最初の週が Hackweek だったので、通常の仕事は一旦停止。なんでもやりたいことをやっていいらしい。入ったばかりで何もわからない状態だったので、ぼくのメンターのテックリードがやっていた Twitter for Mac の多言語化を手伝うことにした。水曜にパッチをマージしてもらって、ぼくの担当部分は完了。その後は次週から始まる通常営業に備えてコードを読み始めた。 次の週からは通常のサイクルが始まった。毎朝スタンドアップミーティングがあり、各自の仕事の進み具合を他のメンバーと共有する。前職までは同僚がほぼ日本人ばかりだったので英語で仕事をしたことがなく、聞き取りがうまくできなかったのを覚えている。 この日からさっそく Twitter for iOS のユーザーとして気になっていた問題を直し始めた。
Monthly Web の作り方 2018 年版 | blog.jxck.io
Intro 筆者がやっている Podcast である mozaic.fm の中で、 Monthly Web という月ごとの Web の動向をまとめる回をやっている。 未だに落ち着いたとはいえないが、 2017 年 7 月に初めてから 1 年続けたので、結果として現状どうなっているかをログに残す。 Monthly Web mozaic.fm は、 Web について「今何が起こっているのか」「これからどうなっていくのか」を議論するための Podcast である。 そこでは、ゲストをお呼びし、特定のテーマについて議論をするということを行ってきた。 しかし、このテーマの設定と消化よりもよほど早い勢いで、多くの重大なトピックが日々生まれており、その大局的な流れを扱うことはできないかずっと考えていた。 通常回が「縦を深く掘る」議論であるとすれば、「横の流れを繋ぐ」部分の議論を行うことができれば、議論す
Firebaseを活用したiOSアプリ開発事例
こんにちは。新規サービス開発部の中村です。 最近Komercoで販売されている鉄のフライパンが欲しいです。クリエイターさんたちの作品は見ているだけで本当に楽しいですね。 そんなKomercoはバックエンドにFirebaseを活用していますが、実は弊社からKomercoの他にもFirebaseを活用したサービス「Cookin'」をリリースしています。 本稿ではCookin'のFirebaseを活用した事例についてご紹介します。 Cookin'とは Cookin'は料理動画撮影アプリです。手順ごとに３秒間取るだけで１本の料理動画が投稿できるサービスとして、2017年12月にiOSアプリとしてリリースしています。 このサービスの特徴は、簡単に料理動画が作成できるほかに、投稿から斬新なアイデアを得られたり、コメント欄から料理のコツやポイントを気軽に質問できるところです。 料理をしながら動画撮影する
noteのフロントエンドをNuxt.jsへ刷新します｜こんぴゅ｜note
webサービスのUXを向上させるために、表示速度は非常に大切です。 しかしながら、noteはリリース当初からフロントエンドの実行速度が遅い=表示が遅いという構造的な問題を抱えており、継続率や離脱率など重要指標に悪影響を及ぼすリスクが強くありました。 noteチームはnoteを本格的なメディアプラットフォームへ成長させるスピードを加速していきます。それを踏まえ、手遅れになる前に技術的な負債を解消し、最新のベストプラクティスに沿ったフレームワークに移行することで、高性能なサービスを提供する基盤を作っていくという決断をしました。 本ポストでは、移行プロジェクトの技術的背景や移行手順を説明します。また、途中成果のデモをUPしているのでご紹介します。 技術的な背景noteの現在のフロントエンドはAngular.js 1系で構築されたSPAです。Angular 1系はかなり複雑なUIでも簡単に構築でき
[LINE Bot] 位置情報から食べログ3.5以上の優良店を検索するbot作った - Qiita
作ったもの 位置情報から近くの食べログ3.5以上の店舗を検索してくれるLINE Bot作りました。 【重要】2018.09.16 LINE Botが凍結され利用できなくなりました。 新たに２代目を作りました。こちらはDMをいただいた方にも教えています。 ▼位置情報から検索（1km圏内で最大10件を近い順に表示） ▼住所や地域名にも対応（Google Map APIを利用） ▼お気に入り登録を実装しました (2018.07.29) 記事も書きました：[LINE bot] 食べログ3.5以上を検索できるbotに「お気に入り登録」を実装した この記事で説明すること（ソース公開します) PHPでLINE botを動かす方法 (line-bot-php-sdkを利用した実装） Flex Messageの実装 Action時のデータを保持して次のReplyで利用する方法 細かいところはあまり説明しませ
![[LINE Bot] 位置情報から食べログ3.5以上の優良店を検索するbot作った - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/ff89ca50bc1c9bdded1f7de8daf583c2dd2d41e9/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCTElORSUyMEJvdCU1RCUyMCVFNCVCRCU4RCVFNyVCRCVBRSVFNiU4MyU4NSVFNSVBMCVCMSVFMyU4MSU4QiVFMyU4MiU4OSVFOSVBMyU5RiVFMyU4MSVCOSVFMyU4MyVBRCVFMyU4MiVCMDMuNSVFNCVCQiVBNSVFNCVCOCU4QSVFMyU4MSVBRSVFNSU4NCVBQSVFOCU4OSVBRiVFNSVCQSU5NyVFMyU4MiU5MiVFNiVBNCU5QyVFNyVCNCVBMiVFMyU4MSU5OSVFMyU4MiU4QmJvdCVFNCVCRCU5QyVFMyU4MSVBMyVFMyU4MSU5RiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MTkwODY2NjI3MzlmYzlkNjlhNjNmMzQwNWM1ZGVhNDI%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwTkFSSV9DcmVhdG9yJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1jOTQyOWIxZjE1OWYxZTRjMzA3YzU0MWI3YzRkZDA4Mw%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D2da9c3a7ddbfaf0f1c927f776545dec6)
CSSの設計方法をまとめてみた~BEM編~ - Qiita
BEMについて、簡単にまとめる。 詳細な部分に関しては以下の記事がわかりやすかったので、参考にされると良いと思う。 bem-methodology-ja/index.md at master · juno/bem-methodology-ja BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号 BEMとは Block、Element、Modifierの略。 DOMを構成する各要素をBlock、Element、Modifierのどれかに当てはめて命名する。 正直なところCSSのclass名は冗長になるので最初は冗長に感じるかもしれないが、がっつり命名規則が決まるので段々と楽に感じてくるかもしれない。 BEMのメリット BEMの公式ドキュメントでは、以下の問題を解決するとしている。 なお、以下の英語の部分はBEMの公式ドキュメントから引用しているものである。 B
スタートアップの技術選定とアプリケーションプラットフォーム - laiso
photo by pexels.com *1 この記事を書いたきっかけ niconegoto.hatenadiary.jp 「PinQulをクローズします」にて事業のふりかえりをしている文章の中に「アプリビジネスは完全にダウントレンドにある」という一節があって、ここから話題が広がっていったのを機に上記の記事を読みました。そして色々思うところがあったのです。 アプリビジネスは完全にダウントレンドというのは自分も前から思っていた。リッチな体験、通知を遅れることはアプリの利点だが、他PFからの流入なども含めたプロダクトのコアな検証はwebモバイルが1番早いはず。— sadakoa (@sadako_a_) August 16, 2018 (Twitter上で多くの共感を集めた投稿) 例えば「モバイルアプリがWebに負けはじめた理由」ではWebアプリがモバイルアプリに比べて優れているでろうという点
海外志向と遠回り ─ 20年近くかけて少しずつやりたいことに近づいたソフトウェアエンジニアの生存戦略 - GeekOutコラム
こんにちは、ひげぽん（@higepon）といいます。最近は、@miyagawaさんが配信しているRebuild.fmというポッドキャストにときどき出演させてもらっています。もしかしたら、そちらで私のことをご存じの方もいらっしゃるかもしれません。 ソフトウェアエンジニア歴は長く、もうすぐ20年になります。新卒で電機メーカーのシステム子会社に就職。その後、株式会社はてな、サイボウズ・ラボ株式会社などを経て、アメリカのTwitter本社で働くために渡米。最近また日本に戻って、某外資系企業でエンジニアをしています。 長いキャリアの中では、たくさんの失敗や遠回りをしました。世界に羽ばたくWebサービスを作ろうと奮闘しましたが、失敗しました。開発効率を上げるツールを作って使われないこともありました。行きたい会社の面接を受けて箸にも棒にもかからず、悔しい思いをしたこともありました。 本記事では、このよう
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
typescriptでReact Storybookを試す。 - Qiita
DMM動画サービスの問題を解決しようとしている話（スタイルガイド編） - DMM inside
DDDリポジトリを楽に実装するライブラリ - Qiita