WEB+DB PRESS本誌では久しぶりとなる連載インタビュー企画。新型コロナ禍のさなか対面での取材を避け、リモートで行います。ホストは関満徳が務めます。記念すべき第1回目のゲストとしてお迎えしたのは、Node.js日本ユーザグループ代表理事の古川陽介氏です。 古川氏は、日本トップクラスのJavaScriptエンジニアとして知られ、大学院を卒業後、数社での勤務を経て、社員のマネジメントとWebアプリケーション作成用のユーティリティツールやフレームワークの開発を担当されています。その傍ら、Japan Node.js Association代表理事として、国内外のカンファレンスへの登壇、Node.jsの勉強会やイベント運営など積極的に活動されています。 古川 陽介（FURUKAWA Yosuke）さん（⁠株⁠）リクルートテクノロジーズでマネージャーとしてアプリ基盤の改善や運用、開発支援ツールの

子宮頸（けい）がんを予防するヒトパピローマウイルス（HPV）ワクチンの積極的な接種勧奨を厚生労働省が中止し接種率が激減したことで、無料で受けられる定期接種の対象を過ぎた2000～03年度生まれの女性では、避けられたはずの患者が計1万7千人、死者が計4千人発生するとの予測を、大阪大チームが22日までにまとめた。成果は英科学誌サイエンティフィック・リポーツに掲載された。接種率が0%近い現状のままで

キチガイに刃物、ゴミプログラマに継承。危険なものは取り上げるべきだ。 オブジェクト指向プログラミングにおける継承は強力な手法であるが、これを正しく使えるプログラマは残念なことに極めて少ない。たいていの場合、継承を使うことで却ってプログラムの保守を困難にしてしまう。継承のアンチパターンの最たるものは、単なるメソッドやメンバ変数の共有のために継承を使うパターンだ。これを行うとデータが密結合になってバグの原因になり、プログラムを把握することも極めて困難になる。 そもそも、熟達したプログラマの感覚では、業務で書くアプリケーションの実装に継承を使うべき局面などほとんど無い。ライブラリ等のより低レベルな処理で仕様が確定しているものについては、継承が効果的となる場合もあるが、複雑なアプリケーションのロジックに継承を使うのはほとんどの場合、時期尚早な抽象化となる。 また、凡庸なプログラマが継承で実現したい

スクラムの初心者からエキスパート、ユーザー企業から開発企業、立場の異なるさまざまな人々が集まる学びの場でもあるスクラムフェス大阪2020。「今あえてのスクラム」のテーマで登壇するのが、株式会社アトラクタのFounder兼CBOでもある永瀬美穂氏。前半となる今回は、永瀬氏が今までの経験で得てきた、苦手だと感じる環境でも飛び込んでいく重要性。アジャイルで最近よく言及されているCynefin Frameworkの4つの分類などについて話します。関連資料はこちら。 株式会社アトラクタの創業者の一人 永瀬美穂氏（以下、永瀬）：こんにちは、永瀬です。 開原隆弘実行委員（以下、開原）：こんにちは。 秋元利春実行委員（以下、秋元）：イエイ！ 永瀬：合いの手入るのいいですね。よろしくお願いしますね。 秋元：いいですか？ 永瀬：はい、ぜんぜんいいですよ。いろいろな人がいると思うんですが、私は資料を作っていたら

先に英語で書いてから日本語訳しています。 こんにちは、個人アプリ作家のTakuyaです。 僕はInkdropというMarkdownノートアプリを独りで開発しています。 これはmacOSやWindows、Linux、iOSからAndroidまでスムーズに動作します。 なぜならデスクトップ版はElectron、モバイル版はReact Nativeで組まれているからです。 つまりアプリは基本的にJavaScriptで書かれています。 本稿では、vimにて効率的にJavaScriptをコーディングするためのワークフローについてシェアします。 僕はVSCodeのようなIDEを使わず、主にターミナル上で作業しています。 使っているツールはtmuxとNeovimです。 この構成での基本的なワークフローについてはこちらに書きました。 ここでは、更にvimの設定について掘り下げてご説明します。 僕のdotf

BFFとは Backend for Frountendの略で、UI/UXを向上させる目的でフロントエンド専用のサーバーを用意したアークテクチャパターンです。 Webアプリケーションサーバーは下記の処理を行います。 リクエストを受ける DBからデータの取得・更新 ページを構築 (これはクライアントですることも) ページ or データの返却 このうち、「DBからデータの取得・更新」とそれ以外をフロントエンドとバックエンドの役割に明確にわけます。 BFFの役割となるサーバーをクライアントをWebサーバーの間に設け、「リクエストを受ける」と「ページ or データの返却」、場合によっては「ページの構築」をここで処理します。 こうすることで、これまでリクエストというUX関わる部分をフロントエンドエンジニアの責務に移行することができます。 ページの構築をクライアントではなくサーバーで行う場合、これもBB

ng-lazyload-imageを使って、スクロールに応じた画像の遅延読み込みをしてみる。 今回はわかり易い例として、スクロールに応じてグリッド配置した画像を例にした。 レスポンシブのグリッドを作るために、AngularMaterialの grid-list も使っています。 デモ: AngularLazyloadGridimageDemo ng-lazyload-imageの導入 まずは、Angularプロジェクトにインストール $ npm install ng-lazyload-image --save app.moduleにインポートしておく。 (別途モジュール分割している場合は、インポートする先が変わってくる) app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgM

十三章第二回　Server-Sent Eventsこのページの最終更新日：2017年10月1日 今回紹介するのはServer-Sent Events (SSE)と呼ばれる仕組みです。これはJavaScriptからある種のHTTP通信を行う方法です。前回紹介したXMLHttpRequest (XHR)は、ある程度の制限こそあれ、自由にHTTP通信を行うことができるAPIでした。XHRは“生”のHTTP通信を行うことができます。つまり、自分でリクエストを作って送り、レスポンスの中身をそのまま渡されてあとは自分で処理するというものです。 一方、今回のSSEはXHRに比べてハイレベルなAPIです。SSEで行うことができるHTTP通信の形は決まっていますが、より抽象化された形で通信を扱うことができます。また、実はSSEによるHTTP通信はXHRで真似することはできません。 回りくどくなりましたが、S

八章第一回　Rangeとはこのページの最終更新日：2017年8月26日 八章では、Rangeというものを解説します。今回は、そもそもRangeとはどういうものかを解説します。 Rangeとは、文書中における「範囲」を表すものです。例えば、 あい<strong>うえ</strong>お。というソースががあれば、 あいうえお。のように表示されます。このとき、例えば あいう　えお　。 ↑　　↑ ここから　　ここまで のような感じである範囲を表せます。 要するに「『え』から『お』まで」なので、案外単純なように見えます。しかし、DOMという観点からこれを見ていくと、上の木構造は となっていて、この範囲は（木構造上で）離れた複数のノードにまたがっています。こうなると、一筋縄ではいかないのが想像がつくと思います。このようなものを扱うのが、Rangeなのです。 範囲の表し方Rangeは「開始点」と「終了点

ブラウザで動くエディタを開発していると避けては通れない contenteditable な caret の位置（座標）。いろいろなアプローチがありますが、一部のケース（縦書き）でうまく動かないことがあったので回避策をメモしておきます。 ダミーの DOM を挿入する わりと古典的でよく使われている方法です。caret のある位置にダミーの DOM を挿入して getBoundingClientRect で位置を取得するというもの。どんな場面でもほぼ確実に caret の位置が取得できます。ただ、大きな弱点があり DOM を挿入するので対象 DOM の TextNode が分割されてしまいます。contenteditable を使ってゴリゴリ開発をする場合、むやみに Node が変わるとつらすぎるので、あまり使うメリットはありません。 <p contenteditable="true">cli

今年8月、福岡市・天神の真珠販売店。女（30）がカッターナイフを店員に向けて現金を脅し取ろうとした。結果は未遂。恐喝未遂と建造物侵入の罪に問われ、福岡地裁は21日、懲役1年2月、執行猶予3年（求刑懲役1年2月）の判決を言い渡した。新型コロナウイルスの影響で解雇され、路上生活を経ての犯行。相談は恥だと思っていたという。コロナ禍は弱い立場の人ほど追い込んでいく。福祉、行政は頑張りどころにきている。 判決によると、被告は8月20日昼、店員の女性にカッターナイフを向け「お金を出してください、切りますよ」と脅迫。通報するそぶりに逃げ出した。判決理由で加藤貴裁判官は「被害者に相当の恐怖心を与えた」と指摘する一方、犯行直後に自首したことなどを踏まえ、執行猶予とした。 公判での被告人質問などによると、物心がついた時には「九州北部の施設」にいた。中学卒業まで施設で過ごし、飲食店での勤務を転々とした。当時から

はじめに こんにちは、Classiの佐々木（@sasata299）です。前回の投稿からだいぶ間が空いてしまい、季節はすっかり秋になってしまいました。 この期間、Classiでは外部の攻撃者による不正アクセス（4月）があり、また、サービスの高負荷によるアクセス障害（4月・5月）が続くなど、利用者の方々には多大なるご心配とご迷惑をおかけしました。この9月までClassiのCTOとしてサービスとお客様に向き合ってきた立場として、改めてお詫びを申し上げます。 本記事では、この2つの問題について改めて振り返りると共に、当時の状況と今我々がどのように対策を進めているのかについてお伝えします。 （※当社のCTOの変更については、後日改めて記事を出す予定です） 外部の攻撃者による不正アクセスが発覚（4月） 「Classi」は、学校現場の多様なシーンで活用されるクラウドサービスです。スマートフォン・タブレッ

この記事は旧バージョンのエディタについてのものになります。 現在は進化した新バージョンがリリースされています。 前の記事で、noteがHTML5のcontenteditableを利用している事、そしてそのままではとても使えない事を書きました。それをどうにか使えるようにしているのがエディタなわけですが、今回はそのエディタの成り立ちや、どういう開発をしてきたのか、といった事を書こうと思います。 noteエディタの歴史私が開発担当している現行（201810現在）のエディタ（初版201704リリース）は、実はnoteのサービスローンチ時まで遡って数えると、3代目になります。 初代 弊社CTOのkonpyuが、突貫で作り上げた…と聞いています。 曰く、「すぐに引っ込めた」との事。note自体のローンチに向けた開発も多忙な中にあって、エディタに人員を割り当てて実装する、というのはなかなか難しかったので

この記事は旧バージョンのエディタについてのものになります。 現在は進化した新バージョンがリリースされています。 初めてエンジニアらしい記事を書きます。 記念すべき？初回はHTML5のcontenteditableのお話です。 contenteditableコンテントエディタブル、と読みます。content editable。 こいつは何なのか、超ざっくり言ってしまうと、HTMLタグ内のテキストを編集可能にしてくれる属性、です。百聞は一見にしかずで例を出してみます。 <p contenteditable=true> コンテントエディタブル </p>これをブラウザで表示すると、pタグの中身が編集可能（キャレットを合わせて、キーボード入力可能）な状態になります。一般的にHTMLの世界でテキストを入力する手段といえば、inputやtextareaを思い浮かべるのではないかと思いますが、通常表示する

この記事は検証可能な参考文献や出典が全く示されていないか、不十分です。出典を追加して記事の信頼性向上にご協力ください。（このテンプレートの使い方） 出典検索?: "WYSIWYG" – ニュース · 書籍 · スカラー · CiNii · J-STAGE · NDL · dlib.jp · ジャパンサーチ · TWL（2011年9月） 左側のプログラムは、WYSIWYGエディターを使用してLorem Ipsum文書を生成している。右側のプログラムにはLaTeXコードが含まれており、コンパイルすると左側の文書と非常によく似た文書が生成される。フォーマットコードのコンパイルは、WYSIWYGプロセスではない。 WYSIWYG（アクロニム: ウィジウィグ）とは、コンピュータのユーザインタフェースに関する用語で、ディスプレイに現れるものと処理内容（特に印刷結果）が一致するように表現する技術[1]。

こんにちは、LINE Fukuoka の tarunon です。LINE BLOG iOSのリリースまで、クライアントとエディタの開発を担当していました。昨年11月に、LINE BLOG は一般開放と、iOS/Androidクライアントの公開を行いました。ほぼ1年がかりの開発だったのですが、クライアント側で最も大変だったのがエディタの開発でした。この記事では LINE BLOG のエディタの根幹を支えている Workaround について解説します。普段は Swift を書いていて、ほぼその話しかしていないのですが、今回は HTML と JavaScript の話になります。 LINE BLOG はこういったサービスです。 LINE BLOG - 芸能人・有名人ブログ LINE BLOGエディタはWebブラウザの上で動作しています。開発は iOS/Android 共通のソースコードで、 i

非推奨: この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。 execCommand メソッドは、複数の異なるコマンドを実装しています。クリップボードへのアクセスを提供するものもあれば、フォーム入力フィールドや contenteditable の要素、文書全体（デザインモードに切り替えた場合）を編集するためのものもあります。 クリップボードにアクセスするには、execCommand() よりも新しいクリップボード API が推奨されます。しかし、編集コマンドを置き換えるもの

知っている方には、すみません。 HTML5 には contentEditable という属性がありまして、この値が true だと、その要素はブラウザ内で編集可能となります。 ちょっと試してみましょう。 <div contentEditable="true">ここは編集できる</div> ↑ ここは編集できるのです。(ただの <div> 要素なのですが！) 編集内容はどこかに保存されるわけではないので、ブラウザをリロードすれば元に戻ります。 body要素に contentEditable 属性をつけてみる さきほどのボタンでは、クリックすると JavaScript が実行され、<body> 要素の contentEditable 属性を変更しています。結果、ブラウザで表示されるすべてが編集可能になるのです。 JavaScript コードはこんなかんじ。 javascript:(functi

【Amazon.co.jp 限定】Google Chromebook Lenovo ノートパソコン Ideapad Duet 10.1インチ 日本語キーボード WUXGA MediaTek Helio P60T 4GBメモリ 限定スペック 64GB eMMC モデル 発売日: 2020/06/05メディア: Personal Computers iPad が使えなくなってしまったので電子書籍を読むときにちょっと困っていて、8インチくらいの安い Android タブレットでもないかなーと社内で相談したところ、「Chromebook はどうか」と薦められた。えー10インチだし予算オーバーだし……と思っていたけど、魂が否応なく惹かれてしまう衝動があって Lenovo Chromebook Duet を買ってしまったのだった。運命だったのかもしれない。 社内ガジェットチャンネルに相談すると想定予算

新型コロナウイルス対策において、台湾で開発された「マスクアプリ」は国際社会の注目を集めた。この迅速な対応を可能にしたのが、地域の課題をITを通じて解決するエンジニア、「シビックハッカー」たちだ。近年、彼らの存在が台湾の政治のあり方を大きく変えている。 以前の私は、ウェブ上で「台湾」の文字が躍っていると、大急ぎで目を逸らした。日本好きと称する台湾人が日本を讃えたり、日本を仰ぎ見てくれる台湾は世界一の「親日国」だと言い立てたり、要するに、日本はスゴイ、と言いたがる一部の人たちのエゴを満足させるために台湾が利用されるといった内容を、あまりに多く見せられてきたせいだ。 それが近頃は、台湾関連の記事につい目が吸い寄せられる。おそらく、新型コロナウイルス対策のための「マスクアプリ」開発を牽引した人物が世界から注目されるようになった時期からだ。私は、オードリー・タンやタンのようなIT大臣を擁する台湾につ

Talked at "AWS Dev Day Online Japan" 2020.

DXの全体像と、各種技術のマッピング、 何故DX関連のPoCが失敗するのか、 という怪文章 3時間分の講義資料を10分に極限圧縮しています。講義が必要な方はご連絡ください。Read less

君のことが大大大大大好きな100人の彼女 中村力斗/野澤ゆき子 <毎週木曜更新>ＴＶアニメ第２期制作決定♡第１期は各種動画サイトで大大大大大好評配信中!!　中学で100回目の失恋をした恋太郎は、高校でこそ初めての彼女を！と願う。しかし、恋の神様は「高校生活で出会う運命の彼女は100人！しかし彼女達は、幸せになれなければなんやかんや（中略）あって…死ぬ」と告げる。100人の彼女を脱落しない！させない！DEAD OR LOVEなハーレム・ハイスクールライフ開幕！