UI/UXだけじゃない！ 古川陽介氏×丸山潤氏が語る、フロントエンドが進化する中でエンジニアが直面する変化
Webサービスなどの開発において、ユーザーと接する部分を担う「フロントエンドエンジニア」。モバイルファーストが一般化するなど、日進月歩で変化するWeb業界で、フロントエンドを取り巻く状況も大きく変化し、それに伴って求められるスキルや役割も変化している。その現状と今後のあり方について、UI/UXデザインのトップランナーであるニジボックスから、デベロップメント室室長でありNode.js日本ユーザーグループ代表を務める古川陽介氏と、同社でUI/UX事業を0から立ち上げ、現在は執行役員でありサービスプロデュース事業本部長を兼務する丸山潤氏に伺った。 株式会社ニジボックス デベロップメント室室長 古川陽介氏 ユーザードリブンなプロダクトのために、フロントエンドに注力する ――まずはお二人の現職および役割と、これまでのご経歴などについてお聞かせください。 古川陽介氏（以下、古川）：現在はリクルートのフ
Windows10の無償デスクトップ自動化ツール「Power Automate Desktop」でPDFからのデータ抽出を自動化する
対象読者 Excel／PowerPointなど、一般的なツールの操作を理解している人 RPAツールを用いて業務を自動化したい人 PDFアクション PDF（Portable Document Format）とは、Adobe社が開発したページ記述言語PostScriptをベースにしたドキュメント形式のこと。環境やプリンターによらずに保存・転送・閲覧・印刷が可能であり、電子ドキュメントにおける事実上の標準のファイル形式として広く使用されています。ファイルの中に、テキストデータと描画命令、画像などのコードが圧縮されて格納されています。 Power Automate for Desktopでも、これらのファイルを扱うアクションが用意されています。 PDFからテキストを抽出 PDFから画像を抽出 PDFからテーブルを抽出 新しい PDFファイルへのPDFファイルページの抽出 PDFファイルを統合 本稿
茂みのなかのイノシシを捕まえよう！ 「わかばちゃんと学ぶ」シリーズ著者が教える、自分の強みの見つけ方【後編】
漫画でWeb技術が身につく「わかばちゃんと学ぶ」シリーズの著者である湊川あいさん。彼女はこれまでのキャリアにおいて、積極的にアウトプットを続けることや人に教えることを大切にしてきた。書籍の執筆はもちろん、各種カンファレンスやオンライン講義への登壇、SNSでの情報発信などを精力的に行ってきたのだ。湊川さんがこうした活動を続けられた理由を、前後編の2回に分けてお届けする。後編では、自分の得意分野を見つける方法や人とのつながりを広げていく手段、コロナ禍の状況下において上手にアウトプットし続けるための知見について伺った。 得意分野をどうやって探し出す？ ――前編に引き続き後編でも、積極的にアウトプットを続けるための秘訣を伺わせてください。世の中には、何かをアウトプットしたいけれど、自分自身の得意分野や楽しんで取り組める領域がわからない方もいらっしゃいます。どうすれば、そういった領域を見つけられるで
AngularJSのリプレースにAngularを選んだ話
本連載では、株式会社ビズリーチのエンジニアが、急成長を続ける事業の中で得られた実践的なノウハウをつづります。第4回となる今回は、6月に始めたエンジニアブログ「BizReach Tech Blog」で反響が大きかった記事を加筆修正して掲載します。テーマは「AngularJSからAngularへのリプレース」。前編である今回はAngularの選定理由、後編では実際にAngularを用いてどのようにコンポーネント化を進めていったかをご紹介します。 BizReach Tech Blog はじめに ビズリーチで「HRMOS（ハーモス）採用管理」のフロントエンドエンジニアをしています、浅井です（※部署名・肩書は執筆当時の所属です）。 HRMOS採用管理は、2014年に開発がスタートし、当初よりSingle Page Application（以下、SPA）を全面的に採用し、そのフロントエンドのすべてをA
ツールが充実してさらに便利に！ 「Angular」バージョン6の新機能
はじめに Angularは、Googleとオープンソースコミュニティで開発されているJavaScriptフレームワークです。最初のバージョンはAngularJS（AngularJS 1）と呼ばれていましたが、バージョン2で全面的に刷新され、以降、おおむね半年に1回アップデートされています。 2017年3月のバージョン4、同11月のバージョン5に続き、2018年5月にAngularの最新版となるバージョン6がリリースされました。バージョンでは、ツールや周辺ライブラリーを中心に、さまざまな改良が行われました。 図1 バージョン6のリリースを告知する公式ブログ記事 本記事では、Angularのバージョン6（以下「Angular 6」）で変更された点や新機能を、サンプルとともに説明していきます。 対象読者 Angularをより深く使いこなしていきたい方 Angularの新しい機能や変更点を確認した
JavaScriptフレームワーク「Angular 4.0.0」がリリース
JavaScriptフレームワークAngularJSの最新メジャーリリースとなる「Angular 4.0.0」が、GoogleをはじめとするAngularJS開発チームによって、3月23日（現地時間）に公開された。同バージョンは、バージョン2.x.xとの後方互換性を備えている。 「Angular 4.0.0」では、AOTコンパイラの改良によって生成されるコードのサイズを60％程度削減するとともに、アニメーション関連機能をコアパッケージから分離したため、アニメーション機能を利用しない場合はさらなるサイズ削減が期待できる。 新機能としては、*ngIfおよび*ngForが改良され、if／else形式の記述とローカル変数の使用が可能になった。さらに、これまではコミュニティベースのプロジェクトだった、サーバサイドでの実行環境であるUniversalとの統合や、TypeScript 2.1／2.2との
【デブサミ2016】18-A-7レポート 大企業からエンジニア主導で起業してみた ～ 「スマホ広告をポジティブに変えたい」リッチラボの挑戦
スマートフォン向けのブランディング広告を開発しているリッチラボは、ヤフーの社内ベンチャー制度によってできた。エンジニアが主導となり、多くの人が経験している“ユーザーの行動を妨げるネット広告”に工夫を加え、ユーザー、広告主の双方に喜ばれる世界を創っていくのが目標だ。大企業にエンジニア、デザイナーとして10年間所属し、子会社の社長という立場に変わると、自分の仕事の価値や、大企業ならではの課題などが改めて見えてくる。本セッションでは、リッチラボ 代表取締役社長 鈴木辰顕氏が、起業にいたった経緯や現在の取り組み、子会社経営に寄せる思いなどを語った。 リッチラボ 代表取締役社長 鈴木辰顕氏 スマホ広告を、ユーザーと広告主の双方に喜ばれるものにしたい インターネット広告への出稿額は、媒体別ではテレビに次ぐ2位の規模だ。デフレの時代に唯一、成長を続けてきた分野ともいえる。しかし、ヤフーの社内ベンチャー制
【Adobe MAX 2014】PhotoshopファイルからのHTMLコーディングワークフローを一新させる「Creative Cloud Extract」
PSDファイルをデベロッパーに渡すときの苦労 色々なWebデザインツールがありますが、一番使われているのはPhotoshopでしょう。しかし、それをもとにHTML/CSSを作るのは大変なことです。画像を切り出すことはもちろん、会社やプロジェクトによっては、スタイルガイドを作ったり、デザインに赤字で色やフォントサイズなどを書き込んで、デベロッパーに分かるような資料を作ることもあり、デザイン修正のたびに資料の内容を更新するのは大変です。 そこで、今回アドビのクリエイティブ制作ツールおよびクラウドサービス群である「Creative Cloud」に登場したのが、「Creative Cloud Extract」（エクストラクト、日本語では「抽出」といった意味）です。PSDファイルのレイヤー、色、オブジェクト間の距離などを、Photoshopで開かなくても見られるようにする機能です。 利用方法は簡単で
米Adobe、SVGを扱うオープンソースのJavaScriptライブラリ「Snap.svg」を公開
「Snap.svg」は、SVGコンテンツのアニメーションと操作のための強力で直感的なAPIで、マスキング、クリッピング、パターン、フルグラデーション、グループ化などの機能によってコンテンツをインタラクティブで魅力的にできる。「Adobe Edge」ツール＆サービスを補完し、今日のモダンなWebブラウザに求められる強力な描画能力とパフォーマンスに優れたグラフィックス機能をサポートする。 Internet Explorer 6以降のWebブラウザ上でSVGを扱うためのデファクトスタンダード「Raphael」の作者である、アドビのディミトリ・ブラノフスキー（Dmitry Baranovskiy）氏が新たに作成しており、Apache 2ライセンスに基づいてリリースされる。なお、「Raphael」とは異なり、Internet Explorer 9以降、Safari、Chrome、Firefox、Op
Web制作者必見！ 軽量でオープン、拡張性の高い次世代エディタ「Adobe Edge Code CC」
なお、本記事はEdge Code CC Previewの内容をもとに執筆したものです。今後の開発において、機能や操作方法が変更となることがあります。Edge CodeはAdobe Creative Cloudから入手でき、無償メンバーでも利用できます。 Adobe Edge Code CCとは 「Adobe Edge Code CC」（以下Edge Code）は、Adobeから最先端のWebサイトを構築するためにリリースされたAdobe Edgeツール＆サービスのコードエディタ担当のツールで、8/26執筆現在プレビュー5が公開されています。 Edge CodeのリリースによりAdobeはDreamweaver（以下DW）と2つのエディタをラインナップとして掲げることになりましたが、DWが全部入りの統合エディタとすれば、Edge Codeは軽量かつ、最新の開発スタイルに必要な機能がふんだんに
アドビ、AIRアプリケーション登録型事例サイト「Adobe AppBox」を公開
「Adobe AppBox」は、FlashベースのAIRアプリケーション（Windows/Mac/Android対応）とHTML、CSS、JavaScriptといったWeb標準技術をベースにしたPhoneGapアプリケーション（Android/iOS/Windows Phone/BlackBerry OS/WebOS/Symbian/Bada）の登録に対応している。 訪問者は、プラットフォーム別/OS別/カテゴリー別に興味あるアプリケーションを検索できるようになった。また、ユーザーの評価の高いアプリケーションや閲覧数の高いアプリケーションもトップページに表示されるので、最近のトレンドとなるアプリケーションを管理できる。なお、これまで「AIR Gallery」に登録されてきた約400作品は、すべて「Adobe AppBox」に移行されている。 また、「Adobe AppBox」へのリニューア
【デブサミ2012】17-A-3 レポート HTML5でどこまでできる？ その実力とスマホ向けアプリ開発のポイント
「王道」も「邪道」も使ってJavaScriptのメモリ消費を抑える また、紀平氏は、JavaScriptの速度の問題についても説明。JavaScriptが重い理由としては、主にアルゴリズム、JIT（Just In Time）、GC（ガベージコレクション）の3つがあるという。 アルゴリズムが重いのは設計が悪いということなので、黙って設計を直すしかない。次に、本来は速くするための技術であるはずのJITが重いという場合、考えられるのはevalを使ったり、クロージャを生成していることだ。毎回JITのコンパイルを呼び出すようなコードを書いてしまうと、こうした問題が起こり得る。ただし、これはツールを使って容易に検出できるし、直すのもそう難しくはない。 「アルゴリズムやJITが重いという状況は、それほど問題にはならない。もっとも厄介で、JavaScriptが重くなる最大の原因は、GCにある」（紀平氏）
Adobe Edge Animateを触ってみよう！
対象読者 HTMLやJS（HTML5）の基礎知識があるユーザー アニメーションやインタラクティブコンテンツを作りたいユーザー 必要な環境 Windows 7以上、またはMac OS 10.6以上。 Adobe Creative Cloudに登録が必要ですが、バージョン1は無償メンバーシップでも利用することができます。 Adobe Edge Animateとは？ Adobe Edge Animate（以下、Edge Animate）は、タイムラインを使って直感的にアニメーションやインタラクティブコンテンツを作ることができるツールです。 Adobe Creative Cloudに登録すると使えるツールです。なので、一見するとオマケのように見えますが、「アニメーションやインタラクティブコンテンツをHTML/CSS/JavaScript形式で出力してくれる」という、とても便利なツールです。 タイム
【デブサミ2012】16-D-3 レポート HTML5が抱える課題～Yahoo! JAPANの導入事例と今後の戦略
スマートフォン向けサービスのHTML5対応を進めるYahoo! JAPAN 本セッションはそのタイトルの通り、国内屈指のWebサービス企業である「Yahoo! JAPAN」がHTML5の技術をどのように取り入れているかを、同社内のエンジニアが自ら解説するものだ。早くからHTML5に対する取り組みをスタートさせている同社だが、是井氏によれば「HTML5はあくまでも手段であって、目的ではない」という。 「われわれの目的は、お客さまへより良い情報と価値を提供すること。HTML5はあくまでも、そのためのさまざまな手段の内の1つという位置付けだ。決して、HTML5を利用することそのものが目的ではない。適材適所でバランスを考えながら、FlashやSilverLightといったRIA技術も併用している」 ちなみに同社サービスのHTML5対応は、スマートフォン向けのものが先行している。スマートフォンはブラ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
大きく進化した「Angular」バージョン9、次世代レンダリングエンジン「Ivy」を中心に機能紹介
「HTTP/2」がついに登場！ 開発者が知っておきたい通信の仕組み・新機能・導入方法
HTML／CSSコーディング時間を激減させる「Creative Cloud Extract」と、その真価を引きだすための10のポイント
「Adobe Edge Code」で使える、コーディングを加速させる様々なプラグイン
Flashプログラマーによる「Adobe Edge」プレビュー ～インストールから基本的な操作方法まで
風雲！ ITおじさん一覧
