私が一番最初にAndroid アプリをデザインしたのが2016年の初夏頃で、その頃はまだiOS・Android とデザインが違うのが主流でしたが、2021年現在のアプリはiOS もAndroid もプラットフォームごとの細かな違いはあれどほぼ同じデザインが主流となっています。 これは2016年の10月にAndroid APIがBottomNavigationView に対応してからじわじわ浸透していった変化だと考えているのですが、その辺の歴史の話は省略します。プラットフォームは違えどスマートフォンアプリである以上デザインは同じ方が楽なので、共通化されていったのは自然な流れだと思います。実際両者が全然違うUI・デザインだと大変ですしね……。 とはいえ、プラットフォームが違うので全て同じというわけにもいきません。iOS にはHuman Interface Guidelines、Android

最近の実装に合わせた、Webページ用のHTMLテンプレートを紹介します。 レスポンシブ用のHTML、ソーシャルメディア用のHTMLをはじめ、高速表示に欠かせないrel="preload"なども含まれています。IEなどの古いブラウザはプログレッシブエンハンスメントで対応しています。 HTMLテンプレートはすべての要素の役割を各行ごとに解説しているので、自分に不必要なものを削除したり加えたりすることもできます。 My current HTML boilerplate by Manuel Matuzović 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに HTMLのテンプレート（最終形） HTMLのテンプレートを1行ずつ解説 ページのタイトルと説明文、外部ファイル ソーシャルメディア用のHTML アイコンとアドレスバー もう

clean_architecture.md 2020/5/31追記: 自分用のメモに書いていたつもりだったのですが、たくさんのスターを頂けてとても嬉しいです。 と同時に、書きかけで中途半端な状態のドキュメントをご覧いただくことになっており、大変心苦しく思っています。 このドキュメントを完成させるために、今後以下のような更新を予定しています。 TODO部分を埋める 書籍を基にした理論・原則パートと、実装例パートを分割 現在は4層のレイヤそれぞれごとに原則の確認→実装時の課題リスト→実装例という構成ですが、同じリポジトリへの言及箇所がバラバラになってしまう問題がありました。更新後は、実装時の課題リストを全て洗い出した後にまとめて実装を確認する構成とする予定です。 2021/1/22追記: パートの分割と、クリーンアーキテクチャという概念の定義について追記を行いました。大部分の実装例パートを中心

もともとインフラエンジニアをしていた私が、LINEに入るまで知らなかった「テクニカルライターという職種があること」と「LINEにはテクニカルライティング専門のチームがあること」の2つについてお話しします。技術も好きだし、ドキュメントを書いたり、人に教えたりするのも好きだ、という方に「こういうキャリアもあ…

こんにちは。 プログラミングスクールに通う方や、スクールそのものの在り方について増田やはてブで度々話題に上がるけど、 現役エンジニアの諸先輩方ではなく、いち採用側の目線で少しメッセージを残しておきたい。 （ここでいうエンジニアとは主にwebやアプリにおけるソフトウェアエンジニアを指します。わかったかはてなー！） ■前提自分は非エンジニアだよ HTML、CSS、JSの基礎は習得し、WordPressを使いイチからDockerを駆使して開発環境の立ち上げや、GitおよびGithubでのRepo管理やcommit、本番サーバーで運用できる程度の知識人事職は2年目 本業は別で、社内で掛け持ちしている形なのでプロではないよ書類選考〜早い段階での面接がメイン、書類だけなら職能関わらず4000人程度に目を通したよプログラミングスクールそのものの是非は語らないよ 7期目を迎えた中小IT企業だよ 弊社エンジ

React Server Components に感じたフロントエンドの消失という記事に端を発する一連の議論だが、実際この記事で書かれていることはそうだろうなと思う。話の流れとして誤ってる部分はないと思うし同意する。 この記事ではフロントエンドエンジニアとして、この件についての僕の見解を書く。もちろんフロントエンド（とは？）の総意ではない。 元記事と重複する部分多いが、そこは同じ問題を取り扱う以上避けて通れないため、ご容赦いただきたい。 同じ領域を取り扱ってる以上、開発戦争は激しくなる 様々な理由によりユニバーサルが求められている ※この記事でいう「戦争」とは、お互いの領域を食い合う開発が、活発化することを「戦争」と称しているだけです。それ以上の意図は全くございません 領域がかぶっている 最近のフロントエンド系ユニバーサルエコシステムは、たしかに PHP や Rails の領分を侵そうとし

昨年、作成・公開した＜フリーランス向けサービス カオスマップ2019年完全版＞に対して、フリーランスや複業ワーカー、関連企業から非常に多くの反響があったという。2020年も新たなサービスが続々と誕生し、最新情報をシェアすることで、役に立ちたいと思い、2020年完全版を作成したとのことだ。 １）「仕事獲得」でさらなる職種特化・地方特化型サービスの台頭 新型コロナウイルスにより、リモートワークが拡大する中で、「多拠点生活」「ワーケーション」「関係人口」などのキーワードがよく見られた。近年注目されている「地方創生」との相性もよく、都市部と地方を行き来するような生活や働き方が増え、それらを軸にした地方案件に特化したプラットフォームが誕生した。また働き方の自由度が上がった一方、自己判断で決めていく場面が増えてきており、専門家のアドバイスやモチベーション維持を目的とした「コーチング」の仕事獲得サービス

CSSを10年以上書いてきた人にとって、この2020年は今までとは全く違ったCSSになったと感じた人も多いと思います。 レスポンシブはブレークポイントの代わりにCSS Gridでより簡単に実装できるようになり、グローバルなスタイルシートに頼るのではなく、CSS-in-JSでスタイルをコンポーネントに配置してテーマ性のあるデザインシステムを構築できます。 フレームワークではTailwind CSSが浸透し、ユーティリティ・ファーストのCSSが使用されるようになりました。2020年現在、CSSの使用状況を調査した「The State of CSS 2020」を紹介します。 The State of CSS 2020 The State of CSS 2020は、The State of CSS Surveyでアンケートを行った調査結果をまとめたものです。私も1票分参加しました。 ちなみに、代表

概要 こんにちは。NTTコミュニケーションズのyuki uchidaです。普段はSkyWayというWebRTCプラットフォームの開発やWebRTCリサーチャー(見習い)をしています。 この記事は NTTコミュニケーションズ Advent Calendar 2020 の3日目の記事です。 昨日はMasaki Shimuraさんの記事、 「Threat Intelligenceの活用を促進するMISPの紹介」でした。 この記事は、WebSocketの次の技術ではないかと噂される、WebTransportの概要や双方向通信の歴史をまとめつつ、WebTransportのdatagram形式でデータを送信してみるチュートリアル記事です。 対象読者 WebTransportっていう技術を初めて聞いた人 WebSocketを使ったことがあり、不満がある人 双方向通信・リアルタイム通信について興味がある人

Linuxのコマンドラインで文字列を検索する際に必要不可欠なコマンドといえば「grep」です。しかし、grepは動画ファイルやPDFファイルの文字列を検索できないのが弱点。そんなgrepの弱点を克服し、動画ファイルのメタデータやデータベースのレコード、画像ファイル内の文字列まで検索可能なコマンドが「ripgrep-all(rga)」です。 GitHub - phiresky/ripgrep-all: rga: ripgrep, but also search in PDFs, E-Books, Office documents, zip, tar.gz, etc. https://github.com/phiresky/ripgrep-all rgaはLinuxに限らずWindowsやmacOSでも利用することが可能。今回はUbuntu 20.04でrgaを利用してみます。以下のコマンドを

紅葉の秋到来！紅葉狩りの旅行計画をたてている人も多いのでは。時期はいつがねらい目？見頃は？そんな人のために、今回は関東甲信越エリアの紅葉スポットをエリア別で一挙ご紹介します。 ライトアップやイベント情報、混雑ピーク情報を記載しているスポットも。この秋は混雑回避しながら上手に紅葉狩りしましょう。黄色く染まるイチョウ並木でインスタ映えを狙って写真撮影を楽しんだり、赤に染まる感動の紅葉絶景をめざしてドライブしたり、名所に色づく1本の木の紅葉に思いを馳せてじっくり眺めたり、どれも日本の風情を感じることができるすてきな過ごし方ですね。 その年の気候によって色づき具合が違うからこそ、出会える最高の景色。秋晴れの空に映える美しい絶景をぜひ堪能して。 電車で行ける所から、ドライブで立ち寄るのにぴったりなスポットまで県別でご紹介しています。デートや家族のお出かけ、一人旅など、素敵な秋の景色に出会えますように

カラーミーショップ サービス基盤チームのkymmtです。この記事では、サーバサイドレンダリングするシングルページアプリケーションとAPIサーバからなるWebアプリケーションのセッション管理方法について紹介します。 アプリケーションの構成 構成の概要 今回は例としてEC事業部で提供するカラーミーリピートをとりあげます。構成としては、Railsで作られたAPIサーバ1と、Vue.jsで作られたシングルページアプリケーション(SPA)からなります。また、SPAはExpressが動くフロントエンドサーバでサーバサイドレンダリング(SSR)します。APIサーバはSPAかフロントエンドサーバだけが呼び出します。各ロールはサブドメインが異なります。 APIサーバでセッションIDを持つCookieを発行し、Redisを用いてセッション管理します。また、APIサーバへのセッションが有効なリクエストはフロント

この記事では、Webデザイン制作の面倒な作業をラクにするCSS便利ツール87個をまとめています。なお、新しいツールを随時アップデートしています。 CSS FlexboxやGridをつかったレイアウト生成ツールや、レスポンシブ対応の画像ツール、配色に困ったときに便利なツール、多彩なCSSアニメーション、話題のニューモーフィズムなど、CSSスタイリング時間節約や、さまざまな問題を瞬時に解決することを目的に作成された便利なツールが揃います。 Web制作に活用したい最新ツールと合わせてチェックしてみてはいかがでしょう。 これだけあれば困らない！Web制作を快適にする最新オンラインツール48個まとめ Web制作�の面倒�な作業をラクにするCSS便利ツールまとめ CSS box-shadow Examples さまざまなサイトで実際に使われているCSS box-shadowを集めているライブラリ。お好

先日 LINE が開発するライブラリ Decaton が OSS として公開されました。 Decaton は Kafka を利用したジョブキューライブラリで、LINE 社内で幅広く利用されています。 GitHub - line/decaton: High throughput asynchronous task processing on Apache Kafka 今回の記事では、LINE で Decaton がどのように利用されているか、実際に利用されているプロダクトの実例を交えて紹介します。 Decaton とは? Decaton は LINE 社内で非同期処理を行う際のジョブキューとして利用されているライブラリで、データストアとして Kafka を利用しています。 Kafka には、ストリーム処理を扱う公式のライブラリとして Kafka Streams があります。しかし、Kafka

はじめに AWS認定 機械学習 - 専門知識にスコア849点で合格しました。勉強期間は約1ヶ月でした。 私が実践した勉強方法を共有しますので、これから受験する方の参考になれば幸いです。 私とAWSと機械学習 AWS歴は約4年です。 機械学習を業務で扱ったことはありません。機械学習系のAWSサービスで言うとAmazon PersonalizeとAmazon Forecastのハンズオンセミナーに参加したことがあるくらいです。 元々の機械学習に関する知識もほぼ皆無でした。絞り出すとしたら、以下くらいです。 教師あり学習と教師なし学習というものがあるらしい 最近は強化学習というものも注目されているらしい がっつり学習しようとすると高性能なマシンが必要になるらしい こんな感じの人が以下の勉強方法で約1ヶ月勉強したら合格できたと思ってください。 私が実践した勉強方法を共有します。基本的に上から順番に

概要 low-codeで、機械学習ができるライブラリのPyCaretがついに、v1.0になりました。 機械学習モデルの 可視化 が便利なので、モデルの可視化 に着目し、まとめてみます。 ソースを確認すると、部分的に内部でYellowbrick@HP（Yellowbrick@qiita）を利用しているようです。 なお、QiitaでもPyCaretタグの下記で取り上げられています。 最速でPyCaretを使ってみた 機械学習を自動化するライブラリ『PyCaret』入門 やること 列挙してみると下記の通りですが、pycaretの自動化により数行で実行できます。 ①データ（クレジットカードのデフォルト）をロード ②前処理 ③モデル比較（アルゴリズム間の性能比較） ④パラメータチューニング ⑤モデルの可視化（★ここがメインなので、冒頭でここを説明★） やってみる（⑤モデルの可視化） 手順上は １番最