以前より国内トップクラスのWebエンジニアとして名を馳せていた伊藤直也氏。一休の執行役員CTOに就任することが発表されてから、約3年半が経過した。CTOのキャリアとしては「はてなブックマーク」の開発を手掛けたはてなに次いで一休が2社目となる。 7人目のメンバーとして参画したはてな時代とは異なり、ビジネスモデルがある程度確立している一休の組織で経験を積んでいくなかで、伊藤氏は事業会社のCTOとしてあるべき姿に気付いたという。 同氏は現在、CTOの役割をどう考えているのだろうか。外部技術顧問時代から関わってきた一休の5年間を振り返りながら、明らかにしていく。 問題を「解決する」のではなく、問題を「理解する」サポートをしていた技術顧問時代 ――はてな時代と現在の一休とで、CTOとしての役割に違いはありますか。 はてな入社時はエンジニアが3人しかいなかったので、CTOというよりはリーダーのような役

Helix ユーザーの僕ですが、会社ではステンレス版、自宅では通常版を使用しています。 そして、どちらもバックライト仕様のものを作成しました。 やはり光ると綺麗ですし、折角はんだ付けしたのであれば光らせないともったいないですよね。 ただ、デフォルトの設定では、左の OKED に Mac or Window と Layer の表示がされていますが、バックライトのモードがわかりません。 特にモードは同じで速さが変わるものは、「このモードになってから◯回目」というように判断するしかありませんでした。 そこで、OLED に今のパターンを表示したいと思いました。 いろいろ試した結果、とりあえず下記のようになりました。（反射してしまうためカバーを外しています） ※この後更に修正し改良しています。最後に少し記述しています。 LED_MODE14 と表示されています。 これを表示させるための手順をまとめて

CSSを書いていて、親要素からはみ出して表示したくなるときってありませんか？ ページを作成する上で、左右の padding を一括で設定してしまいたいですよ。 しかし、特定の要素だけそれを突き抜けて背景色が付いている…という状況です。 具体的には下記のような状態です。 （わかりやすいように左右に border を引いています） しかし、 padding を一括で設定してしまうと下記のような状態になってしまいます。 padding を指定したまま、横いっぱいに要素を広げる方法を紹介していきます。 対応方法 1. 設定した padding の値を左右のネガティブマージンに指定する これで解決できればこれでいいと思います。 この値を sass の変数として管理しておけば、変更にも強くなります。 #{} を使用して、マイナスにしてあげればいいです。 2. vw と calc を使ってネガティブマー

会話が無い。聞こえてくるのは仕事の指示や叱責のみ。そんなIT職場で働いた経験がある。 叱責が耳に付く職場だった。若手にヒステリックな声をあげている先輩社員も目立っていた。 筆者は外部の人間だったため多少の世間話は許された。しかし社員たちは雑談することなく黙々と作業をしていた。私がたまに雑談で声を掛けた時の、若手社員たちのうれしそうな（すがるような）瞳が忘れられない。彼ら／彼女らはその後そろって退職した。 雑談すらせず仕事に取り組んでいたのに、生産性が高いというわけではなかった。部課長や先輩社員から若手への叱責の内容を聞いていると、大半が意識違いや抜け漏れに起因する手戻りなのである。 「そういうことじゃない」 「なんで相談しなかったの？」 「普通こう対応するよね。常識だろ？」 この手の言葉がひっきりなしに飛び交う。 いやいや、雑談する隙すら無い職場環境で相談しないことを責めるのはあんまりだろ

2019年4月から6月末までの3ヶ月間、僕はカックさん(@kakakakakku)という方に技術ブログのメンターになっていただき、週に2記事のペースで技術ブログを書いていました。 ブログメンタリングを通じて、ブログを書く技術だけでなく理想のメンター像までカックさんから学ぶことができました。今回はそのブログメンタリングに応募した動機・学んだこと・成果・今後についてまとめたいと思います。記事にするのが恥ずかしい部分もあるのですが、これが僕のブログスタイルなのではないかと最近思うようになりました。 カックさん(@kakakakakku)とは ブログメンタリングとは 応募の動機について ブログメンタリングで学んだことと取り組み より良いタイトルを考える 黙読して読みにくい部分が無いかチェックする 視覚的な強弱や緩急をつける 人にされて嬉しいことは自分から積極的にする フォローされやすいTwitte

Anycloud Inc.COO ex-SAGOJO Inc. COO マーケのコンサル→プログラミング独学して起業。 プログラミング、データ分析、デジタルマーケディングなどが得意。 学校講師、プロボクサーもたまに。

VersolyはオンラインでLPを作成、公開できるLPビルダーです。ブロックレベルで作成する事ができます。 最初にどんなコンテンツのLPなのかを決め、メニューやヒーローイメージ、料金表、プロダクトの特徴やFAQなど、必要なパーツを追加し、編集する、という流れ。 コードエディタも備わっており、既存パーツを使用した簡単なものから、複雑にカスタマイズされたLPまで用途に合わせて作成できます。 フリープランは作成してそのまま公開する形となりますが、有償プランはHTMLやCSSのソースをDL出来るみたいです。 Versoly

メドピアCTO室フロントエンドエンジニアの小宮山です、よろしくおねがいします。 趣味はボルダリングとヨガとピラティスです、よろしくおねがいします。 ６月某日、長野県松本市の地にて開催されたメドピア開発合宿で取り組んだことについて紹介していきたいと思います。 アンパサンドへのウラミツラミ タイトルにも挙げたとおり、今回立ち向かったのはSass/SCSSのアンパサンド（&）です。 メドピアのリポジトリはほぼSCSSで統一されているので、この記事ではSCSSの記法ベースでコード例を載せていきます。 アンパサンド記法は、BEMライクなセレクタを書くときによく利用されるのではと思います。 例えばこのようなものです。 .header { &__foo { color: green; } &--bar { color: blue; } } アンパサンドを使い、冗長な記述を限りなく減らしたスマートな書き方

フロントエンドエンジニアの立場から「デザインシステム」をつくることができたので、その作成プロセスとできたデザインシステムをご紹介します。 「デザインシステム」とは あるプロダクトのデザインに関するルールを定義し、そのルールに則ってプロダクトをデザインしていく仕組みのことです。 具体的には どうやってデザインするか（フォントや色や配置などの決め方） どうやって繰り返し使えるようにパーツを分割するか （ヘッダーやフッター、ボタンなどのパーツ分割の仕方） 何を基準にそれを更新していくのか どうやって関係者全員がそれを理解している状態にするか これらを仕組み化したものです。 簡単な例だと、みなさんもパワポでプレゼン資料を作るとき、 「タイトルはこのフォントやサイズや色を使って」 「コンテンツはこのフォントサイズで」 「使うオブジェクトの角は丸くして」 「フッターにはこのロゴを置いて」 などを考える

先日掲載の「『バイト炎上動画』問題で露呈した、外食大手チェーン店の脆弱性」等の記事で、日本の外食産業の問題点を指摘してきた、米国在住の作家・冷泉彰彦さん。冷泉さんは今回、自身のメルマガ『冷泉彰彦のプリンストン通信』で、古き良き個人経営の飲食店が事業として成り立っているアメリカの現状を紹介した上で、日本から「自営の食堂」が消えてしまった理由と、激増するチェーン店の現場に希望が全く見えなくなってしまった原因を記しています。 なぜ、日本の外食産業の現場には希望がないのか？ 大陸横断鉄道の150周年記念式典、そして史上最強の蒸気機関車「UP4000型」復活運転の取材でユタ州に行ってきました。ユタ州といっても、今回は州都のソルトレイク・シティーとその北部にある州第3の都市オグデンが中心だったのですが、驚いたのは「食」のレベルが高いということです。 そうは言っても、完全な山国ですから、そんなに各国料理

みなさん、こんにちわ！ ジャングルオーシャンのラファエロです！！ つい最近、Webデザイン初心者の友人からこんなことを言われました。 「CSSでレイアウトしたいんだけど、ネットで調べてみるとfloatとかFlexboxとか出てきて意味わかんない(T ^ T)」 確かにCSSでのレイアウト方法を検索してみるとfloatを使った方法とFlexboxを使った方法が混在していて、Webデザイン初心者には分かりづらいですよね(^^;) ラファエロは断然Flexboxを使った方法をおすすめしていますが、実際のところfloatとFlexboxのどっちが簡単なのかサンプルコードを用意したので比較みましょう！ <nav> <ul> <li><a href="＃">Top</a></li> <li><a href="about/">About</a></li> <li><a href="service/">S

脱jQueryという主張をよく耳にします。 私の個人プロジェクト「Beautifl - Flash Gallery」のリニューアルでも、依存しまくっていたjQueryの採用をやめました。 サイトを立ち上げたのは8年前の2009年。最盛期のjQueryをふんだんに使って、インタラクションの充実したRIAの開発に挑戦していました（参照「wonderflのギャラリーサイトBeautiflを作りました」）。 この記事では、なぜjQueryをやめようと思ったのか、別の技術で得たものは何なのかを紹介します。 ▲リニューアルしたBeautiflは、jQueryをすべて抜きました ※この記事は「CSS Grid Layoutをガッツリ使った所感 - ICS MEDIA」に対する後編（JavaScript編）となります。 リニューアルにあたってJavaScriptで改善したかったこと リニューアルにあたって

CSSのセレクタがいまいち、という人にお勧めです！ セレクタの使い方が分かりやすくまとめられたPDFのチートシートを紹介します。 このチートシートは通常のチートシートだけでなく、ゲーム版もあり、CSSのセレクタをどれくらい知っているか確認することもできます。

シンクロ・フードの四之宮です。 前回ブログを書いてからかなり時間が経ってしまいましたが、その間に自作キーボードデビューしました。 Mint60, レツプリ, Helix, Fortitude60, ErgoDash を作りました。 社内の自作キーボード勢もかなりいるので、いずれ社内のキーボード紹介があるかもしれません？ （僕は作ったことないですが、Iris, Corne, Lily58 勢もいます） さて、挨拶はこのくらいにして、今回は「リポジトリを横断したコンポーネント（Sass）管理を行う」について書いていきます。 コンポーネントと言い切ってしまっていますが、Utilityなどの普通のclassも可能です。 「リポジトリをまたいで CSS (Sass) を共通化したい」そんな要望を満たすための方法になります。 タイトルだけだとよくわからないと思いますので、弊社の現状をふまえて説明してい

CSS設計やコンポーネント化を考える上で、ボタンというのはよく例にあげられます。 しかし、パターンが多いと、コンポーネント化がとても難しいです。 ボタンのパターン ボタンのよくあるパターンを考えてみます。 （ここからはBEMを使用していることを前提に進めていきます） 色違い これは特に問題ありません。 下記の用になるかと思います。 hover 処理を mixin にしています。 .btn { // 共通ルールは省略 @mixin set_btn_color($background_color, $amount: 7) { background-color: $background-color; transition-duration: 0.3s; &:hover { transition-duration: 0.3s; background-color: darken($backgroun

フロントエンドの世界では、日々新しいフレームワークやライブラリが生まれています。 初めてそういった新しいものを習得する場合に、なるべくなら近道したいと思うのが人の気持ちだと思います。 まず大変なのが、Hello World から実際のプロダクトやプロトタイプで利用する場合で、これは初めてで何もわからない土地を一人で散策するような感覚にも似ています。 今日、紹介するのは私が進化の早いフロントエンドの世界で、より早く未開の土地に慣れるためにスタイルガイドを有効活用しているという話です。 ちなみにこの記事はFrontrend Advent Calendar 2014 - Qiitaの 6 日目の記事です。 5 日目はじめての CSS 設計 - Qiita(@moschann) 7 日目CSS のプリプロセスとポストプロセス、そして Rework と PostCSS(@morishitter) 良

CSS設計を導入する際、エンジニアだけで進めることはとても難しいです。なぜ難しいのか、どうすればいいのか、といったことに対する僕の経験と意見をまとめてみました。 僕はデザイナーではなくエンジニアです。デザインの入門書のようなものはいくつか読んでいるので本当に初歩的なことはわかりますが、デザインを仕事で行うことはありませんし、デザインのアプリケーションの使用もできません。 また、今回はCSS設計そのものではなく、会社やチームでCSS設計を導入し、コンポーネント化を行い、極力CSSを書くことを減らしていくまでに必要なことについて述べていきます。すでにやってみたことについては失敗例にも触れまとめていきます。さらに、今後どうしていくべきなのかということについても、僕の意見を書いていきます。 エンジニア側のみでCSS設計を導入する まず最初にやったのは、エンジニア側のみでCSS設計を導入していくとい

CSS フレームワークが辛い。 ここでいう CSS フレームワークとは Bootstrap とか Bulma とかそういうやつのことである。昔から自分はこういうのが苦手で、一定の便利さは感じつつもどうしても馴染めないという状態が続いていて、それでも「それは使い方が悪いだけで、ちゃんと使いこなせばペイするんだろう」と思って今までズルズル使ってきてしまったのだが、やっぱりそれでもどうしても辛くなり脱フレームワークしようと思う。 もちろん使いこなせる人には使いこなせるんだろうし「使うべきでない！」という主張をするつもりはない。頭のいい人には使えるんだろう。昔は「今すぐ〜すべき 10 の理由」みたいなことを適当に書いてたんだけど、どうせ自分がやってることは「 Web 系」のメインストリームからは外れてるんだろうし、合わせるつもりもなければ合わせさせるつもりでもない。使う理由も使わない理由も人それぞ

この記事について この記事は adventar.org 上記アドベントカレンダーの３日目の記事です。前日の記事は、 @mycor さんの この沼の素晴らしさ(仮) でした。 今回の記事では私がどのようにしていわゆるJIS配列フルキーボードからスプリットキーボードに至ったかまでを紹介させて頂きたいと思います。そういう意味ではタイトルは大げさでしたね。 既存のフルキーボードに違和感を持ち始める 私も最初はPC付属のキーボードを使っていました。いわゆるJIS配列のフルキーボードですね。最初はキーボードの配列、キー配置を覚えるのが大変でタイピングオブザデッドをしたものでした。 そこそこブラインドタッチが出来るようになり、不自由をあまり感じずに文書を作ったりWebサイトを作ったりしていました。どちらかというと、Windows でマウス操作主流の時だったと思います。 フルキーボードの例 私にとっての転

1年ぶり3度目のReact Native入門してるんだけど、expo.ioっていうサービスがメッチャ便利そうだったので紹介します。 何がどう便利かっていうと、 ケーブルなしで、実機の動作確認ができる もちろんコード変更も即座に反映される 開発版アプリの配布がワンタッチでできる 便利なReactコンポーネントもついてくる youtu.be expo.io とは React Nativeでのアプリ開発を支援するサービスです。 公式サイトはこちら。めっちゃ素朴…… expo.io expoは create-react-native-app XDE expo client といったツールを公開しています。 create-react-native-app: アプリの雛形を作るCLIツール XDE: アプリ開発を支援するデスクトップアプリ。実機のログをみたり、アプリを再起動したりできる expo cl