ケルビン＠斜壊人 @legendkelbin ラーメン屋で「醤油ラーメン」と注文した後に「半ライスつけて。餃子つけて。やっぱ塩で。ネギ多め。やっぱ炒飯で。メンマつけて。やっぱ味噌で。もやしつけて。海苔要らない」位の追加注文した客が、最初の醤油ラーメン代だけ払って帰るのを呆然と見るのがシステム開発です。

スクラムの導入は、わからない事が多くて知っている人がいないと導入が難しいという意見をよく聞きます。そこで、ステップバイステップで手順に沿って実施していくと、スクラムの導入がある程度完了していることを目指す説明をしたいと思います。 > スクラムとは?スクラムとは? スクラムはアジャイル開発手法の1つで、スクラムは「柔軟かつ全人的なプロダクト開発ストラテジーであり、共通のゴールに到達するため、開発チームが一体となって働くこと」とされています。スクラムはフレームワークであり、スクラムガイドというスクラム標準の定義もあります。 > 大事な用語大事な用語 スクラムを実施するに当って、スクラムの文脈で頻出する用語の定義を説明します。 > 役割に関する用語役割に関する用語 【プロダクトオーナー】 プロダクトオーナーは、そのプロダクトについて何をどの順番で作るのかについて責任を持っています。 【スクラムマ

ウェブ／アプリの重要テーマのひとつであるUXに関してのコラム後編になります。前編では、UXの意味に関して現場で活躍している方々にご意見をいただきました。 【再掲】アンケートに協力してくださった皆さん 【再掲】実施した４つの質問 ・「（あなたにとって）UXとは何か？」と聞かれたらどのように説明するか ・UXを考える上で大事にしているポイント ・UXを意識した象徴的な出来事（ご経験がおありの場合） ・UXについてどうやって学習／インプットをしているか この4つの設問をメールでお送りし、UXについての捉え方や設計の考え方をこの前編に、そして、過去の経験や知見に関するものを後編に分けてご紹介いたします。 ＊回答の中から4つほどピックアップをしております。 ＊回答の紹介順は順不同です。 ＊時々、私が回答に個人的に感動／共感し、レビューが長文になってしまっていますがご容赦ください。 【再掲】UXとは

TypeScript1.8の目玉機能と言えば、 ストリングリテラル（String literal）型 だ。 String Literal Type | TypeScript Deep Dive ストリングリテラル型は文字列型（string型）にさらに制約を加えて、 特定の文字列のみ許可する ものだ1。JavaScript的にはただの文字列で、コンパイルタイムに型チェックされる。 ストリングリテラル型のいい所 何と言ってもJSに多い、引数に文字列キーを渡して処理を分ける関数をちゃんとチェックできるようになるという点。他言語ならenumで処理する所だが、なぜかTypeScriptには数値enumはあるのに文字列enumがなく、有効な手段がとれているとは言いがたかった。 一応これまでも関数オーバーロードの形で、部分的にストリングリテラル型っぽいことは出来ていた。だが、関数を文字列キーの数だけ宣言

http://ddd-cqrs-es.connpass.com/event/27181/ 「Reactive Messaging Patternsプレ読書会 - CQRS、ESの基本を学ぶ -」の時間の都合上カットした部分も含めたフル版資料です。 Embeddedなままだと各種リンクが有効ではな…

Eureka EngineeringLearn about Eureka’s engineering efforts, product developments and more.

WEB上で、ボタンや画像などの補足説明に用いられるツールチップ、そこまで多くは見かけませんが、ユーザーナビゲーションとしては直感的で有効な手法で、制作するにあたって導入を検討するWEBデザイナーの方は多いのではないでしょうか？今日紹介するのはCSSのみで実現する軽量なツールチップ「Ballon.css」です。 CSSのみで制作されていますが、なめらかなアニメーションを実現しています。ICONフォントや絵文字にも対応しています。 詳しくは以下 上、下、左、右と4方向にツールチップが出せ、単語から文章まで大きさも5段階にコントロールする事が可能です。 導入は非常にシンプルで、「Ballon.css」CSSを読み込ませて、あとは動かしたい所定の動きをdata-balloon-posという型で呼び出すだけで実装できます。ソースコードなどは「Balloon.css — CSS tooltips fo

要素に影を落とすためのbox-shadowを確認するためのジェネレーターです。 各種プロパティなどページ下部に詳しい説明を書いてあります。 filter関数のdrop-shadowやReact Nativeのshadowのジェネレーターは別ページになります。 /* preview */ width: 200px; height: 60px; background-color: #3cb371; /* border-radius */ border-radius: 30px; /* box-shadow */ box-shadow: 0px 0px 16px -6px rgba(0,0,0,0.6);

ElectronでSocket.ioを導入するテスト編です。 参考にしたところ Node.jsとSocket.IOによるPCとスマホブラウザのペアリングデモ Electron で jQuery をスマートに読み込む方法 やりたいこと スマホでリモート操作 Electronアプリと連動すること とりあえず、動かしてみる 前提条件: Node.jsやElectronのあれこれが済んでいること。 まだの場合は、コチラを参照するといいでしょう。 さっそく、Node.jsとSocket.IOによるPCとスマホブラウザのペアリングデモのコードをダウンロードし、適当な箇所に解凍します。 組み込み予定のElectron内に、先ほど解凍したコード全部コピーし、Electronのメインファイルへ「server.js → index.js」へ移植します。 ... // ここから // サーバー構築 var ht

進捗どうですか？ 新年を迎えてからしばらく経ち、皆様当初の目標からの進捗はいかがでしょうか？ 僕は全くダメです。 やりたいこと、やらないといけないなと思ってることは沢山あるんですが、「何をしようかなぁ」と考えているうちに、気づけば寝ていたり、気づけばデレステをやってる毎日です。マキノかわいい。 世の中にはタスク管理の手法は色々ありますが、それらはすべて「タスクをこなす意思がある人向け」であり、僕みたいな意思の弱い人間が、あれとこれをやりたいとリストアップしたところで、そのリストを前にした時点でうんざりしてしまうのは必然です。 リストを前にすると尻込みしてしまう。であれば、目に見えるタスクを一つだけにしてしまえばいい。　導入が長くなりましたが、そんなモチベーションから「タスクを一つ選び出すツール」を作ったお話です。 どんなアプリケーションを作ったか こちらになります。 https://gac

比較的最近，Electron に Chrome のページ内検索を JavaScript から行える API が入りました．最近そのことを知ったので，今日昨日あたりでその機能を使って Shiba に Markdown プレビュー内の検索機能を実装しました．案外手こずってしまったのでまとめてみます． github.com 実装コード 今回 Shiba 向けに実装したコードは この diff が全てです．僕の説明よりも実際に動いているコードを見て理解したいという方はそちらを見てください． ページ内検索 API 概要 WebContents オブジェクトに findInPage()，stopFindInPage() の2つのメソッドが生えています．また，WebContents.on() で飛んでくるイベントの中に found-in-page というイベントが追加されています．使う API はコレで

最近、nodeでCLIツールを書くことも増えてきました。単純に実行するだけなら簡単ですが、オプションをつけたり、ヘルプやパイプでの実行などCLIに欲しい機能を考えると色々面倒になります。 そこで使ってみたいのがCLIツールを作るためのフレームワークです。node向けにVorpalを紹介します。 Vorpalの使い方 まずはコマンドラインオプションをつける場合です。これだけで-b/-tオプションが使えるようになります。 const vorpal = require('vorpal')(); vorpal .command('say [words...]') .option('-b, --backwards') .option('-t, --twice') .action(function (args, callback) { let str = args.words.join(' '); s

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Reactを使った多くのコンポーネントが出てきました。Reactの利点として、デザインも一緒になっているので再利用しやすいということが挙げられます。そのため、良いコンポーネントだと思ったら、自分のプロジェクトに取り込むのも難しくないでしょう。 今回はその一つとしてReact-designerを紹介します。Reactで作られたベクターグラフィックスエディタです。 React-designerの使い方 デモ画面です。この四角いオブジェクトがそれぞれ編集できます。 プロパティがあり、色を変えたり、並び替えることもできます。 実際に操作しているところです。オブジェクトの追加も可能です。 React-designerはともすると移動の制御などの面倒くさい機能をReactを使うことでうまく実装

Angular2実践入門〜ng-japan 2016 セッションレポート〜 仲 裕介（HTML5 Experts.jp副編集長） この記事は、「ng-japan 2016」のセッションレポート（速報）です。講演内容を忠実に再現していますが、ニュアンス等伝えきれない場合があるので、気になるところは、記事末尾に掲載の講演資料やYoutube動画でご確認ください。 Angular2実践入門 / 白石俊平氏 当メディアの編集長であり、TechFeedの開発者でもある白石俊平氏によるセッション。スライド40枚以上の大作でライブコーディングもあります。 ライブコーディングで学ぶAngular2 今日のライブコーディングを追体験できるスターターキットを作った。是非活用してほしい。 https://github.com/shumpei/angular2-webpack-starter-minimum –

自分がng-kyotoコミュニティに参加しているのもあって、はじめてng-japanに行ってきました。 心の師（たくさんいる）である @laco0416 さんの発表に刺激されたので早速アウトプットすることにします。 いろいろ学びはありましたが、一番心に残っているのは皆さん口をそろえて「TypeScriptの静的型付けはいいぞ。」といってたことじゃないですかね。 今はBabel一辺倒なんですがTypeScriptに戻りたくなりました。Babel始めた頃と状況も違いますからね。 セッションは2トラックに分かれていて40分のセッションを最大6つ受講できました。 全体的に長いセッションが多かったので聴講する側も疲弊していましたが、 それだけ濃い内容でした。Angularの未来は明るいと感じましたよ。 発表は当日配信されていたみたいなんですけど、あとからでも見れるんですかね……？ まあとにかく学ぶこ

はじめに AWS Lambdaが2016年2月11日に待望のVPCアクセスをサポートしてから1ヶ月とちょっと経ったわけですが、その特性や気をつける点については以前こちらで簡単にまとめました。今回は実際にVPCアクセスを利用しようとして上手く行っていない場合にチェックすべきポイントについて簡単にまとめます。 といっても基本的にはAWS Lambda固有の話ではなく、VPC周りの確認が主になります。 なお、VPCの件以外にもAWS Lambdaの挙動などハマりがちなポイント、確認すべきポイントについて先日のJAWS DAYS 2016で登壇した際にまとめたのでこちらも合わせて参照ください。 本投稿は個人によるものであり、所属する企業や団体に関係するものでも代表するものでもありません AWS Lambdaにおけるネットワーク的な制限 まず、AWS LambdaでVPCアクセスを有効にしたにも関わ

http://qiita.com/mizchi/items/3bbb3f466a3b5011b509 で紹介したモダンJSスタックの上に、flowtype を導入して型をボトムアップに追加していくアプローチを紹介します。 なぜflowtypeか、そのゴールは 流行っているライブラリのみを組み合わせて使う場合や、バックエンドとの連携において型が十分に提供される環境なら、正直、flowtypeよりtypescriptでいいと思っています。flowtypeが力を発揮する環境は、既存のJSが大量に存在する環境や、railsなどの動的な型のフレームワーク環境で、静的な定義が抽出できない環境だと思います。 よほど品質が低いライブラリを使わないかぎり、バグはほとんど自分が記述したコードによって発生します。なので、まずは「自分が書いたコードのIFを明確にし、その静的なチェックを行なう」、というのを最初の目

技術推進室の色川です。 ここ一年くらいランキングシェアというキュレーションメディアのフロントエンドを担当しています。その記事作成画面をReactで実装しており、先日アイテムの移動をDrag&Dropで行えるようにしたのですが、動きはガクガク、ブラウザは途中で固まる、という有様で、パフォーマンスチューニングを余儀なくされたのでその内容を紹介します。 ［ランキングシェアの記事作成画面］ ※画面は開発中のものです。（動画にしたら？との意見があったのですが、Windowsで画面を録画する方法が分からず…） Reactのパフォーマンス改善の基本Reactはコンポーネントをツリーとして管理していて、あるコンポーネントの更新が必要になるとそのコンポーネントをルートとするサブツリー全体を更新します。 引用元：Reactive, Component-based UIs with React | Consta

はじめに：「僕にもそんな頃があった」 先日、西脇.rb＆神戸.rbの合同勉強会として「RailsプログラマのためのSQL勉強会」を開催しました。 この勉強会は出題者（＝僕）が出したSQL問題を他の参加者が解く、というスタイルの勉強会です。 参加者の方の中には最近プログラミングを始めた、という人も何人かいました。 そういう人にとっては問題がちょっと難しかったので、ときどき僕がサポートに回って質問に答えたり、解き方をある程度教えたりしていました。 また、話がちょっと脱線して「僕が作ったこれぐらいのWebアプリは、伊藤さんなら何時間ぐらいで作れますか？」みたいな質問を受けたりもしました。 その中で言われたのが、 「説明されたらわかるけど、自分一人でこの答えにたどり着くのは無理です」 「えっ、そんな短い時間で作れるんですか」 といったようなコメントです。 そういったコメントを聞くと、「あー、僕にも

2018年4月25日をもちまして、 『CodeIQ』のプログラミング腕試しサービス、年収確約スカウトサービスは、 ITエンジニアのための年収確約スカウトサービス『moffers by CodeIQ』https://moffers.jp/ へ一本化いたしました。 これまで多くのITエンジニアの方に『CodeIQ』をご利用いただきまして、 改めて心より深く御礼申し上げます。 また、エンジニアのためのWebマガジン「CodeIQ MAGAZINE」は、 リクナビNEXTジャーナル( https://next.rikunabi.com/journal/ )に一部の記事の移行を予定しております。 今後は『moffers by CodeIQ』にて、 ITエンジニアの皆様のより良い転職をサポートするために、より一層努めてまいりますので、 引き続きご愛顧のほど何卒よろしくお願い申し上げます。 また、Cod

Help us understand the problem. What is going on with this article?