複数のウェブサービスを連携し、定型作業を自動化してくれるサービスはIFTTTやZapierが有名ですが、特定のサービス以外は使えなかったり、有料プランでしか使用できない機能があったりします。オープンソースで使える自動化サービス「n8n」は無料で利用でき、自社製ソフトのような他の自動化サービスでは未対応のサービスも自動化できるとのことなので、実際に使ってみました。 n8n.io - Workflow Automation https://n8n.io/ まずはn8nのホームページにアクセスします。 ホームページ下部へと進むとインストール方法が記載されていました。今回はWindows 10の機能の一つであるWSL上のUbuntuにn8nをインストールします。 n8nを動作させるにはNode.jsが必要なので、記事作成時点で最新の推奨バージョンのNode.jsをインストールしておきます。 Nod

セキュリティ対策もあって、インターネット上のサーバではSSL/TLSを使って公開するのが当たり前になっています。しかし開発時にはローカルでHTTPを使っていたりしないでしょうか。そのため、設定などを切り替えたりして開発せざるを得ず、さらに公開時には不具合に繋がったりします。 そこで使ってみて欲しいのがmkcertです。ローカル開発環境でもHTTPSを使えるようにするソフトウェアです。 mkcertの使い方 まずインストールを使って証明書をインストールします。 $ mkcert -install 次にドメインを指定して証明書を生成します。 $ mkcert example.com '*.example.org' myapp.dev localhost 127.0.0.1 ::1 そうするとWebブラウザからHTTPS経由でアクセスできます。 mkcertで生成した証明書はApacheやngi

サインアップ画面やデータ入力画面の「フォーム」は、サイトやアプリ設計において最も重要な要素の1つです。本記事では、入力フォームデザインのUXを高める15のルールをご紹介します。 ポップインサイトでは、ユーザーリサーチのファクトにもとづいたWEBサイト改善を支援しています。WEBサイトのUX改善に課題がある方はお気軽にご相談ください。⇒UXデザイン/UXリサーチについて相談する ※紹介資料の無料ダウンロードはこちら ※関連記事：【EFOとは？】入力フォーム最適化施策8選：CVR（コンバージョン率）改善のコツ ※この記事はuxdesign.ccの記事を許可のもと翻訳・編集したものです。 翻訳元記事：Design Better Forms (2016/7/5) 著者：Andrew Coyle

最終報告書を読む 九州商船株式会社のWEB予約サービスに対する不正アクセスについて、最終報告書が公開されました。報告書を読ませていただきましたが、その内容に関して大変勉強となることが多く含まれています。 弊社WEB予約サービスに対する不正アクセスに関する最終報告｜九州商船 ※ITmediaでニュースにもなっていましたので追記しておきます。 japan.zdnet.com 不正アクセスの目的は、linuxに不正侵入し仮想通貨マイニングを行うというものです。データを盗み出すのではなくマイニングというところが2018年っぽいです。ただCPUが100%に張り付くのですぐに見つかってしまっていますが。 この報告書について考察してみます。 原因についての考察 原因はvsftpdで使っているFTPプロトコルをANYで開けていて、ブルートフォースでパスワードが割れてしまったこと。かつ、OS/ミドルウェアの

Typetalk チームフロントエンドエンジニアの岡藤（@johnykei）です。先日 Typetalk Webサイトリニューアルに伴い、フロントエンドの技術を jQuery から React + styled-components に刷新しました。本記事では、React を用いた Web サイト制作についてお伝えします。 はじめに タイトルにもあるように、僕は今まで JavaScript を書く必要がある時は使い慣れた jQuery を使っていました。 フロントエンドエンジニアという肩書きではありますが、フロントエンドエンジニアという職種は幅広く、僕はどちらかというとページやUIのスタイリングが主な業務で、普段 JavaScript を書く頻度もそんなに高くありませんでした。 最近海外ではそのような業種の人をフロントエンドデザイナーと呼ぶ動きも出てきていますが、jQuery しか使ってい

はじめに php 5.xから約2倍の高速化を果たしたphp 7.0，そんなphp 7.0も登場から二年以上が経過し，すっかり枯れた，もとい安心して導入できる段階になりました。 また，昨年末にリリースされたphp 7.2の登場によりphp 5.6.xがサポートされている最後の5.xバージョンとなりました。 そんなphp 5.6.xのサポートも2018年いっぱいで終了することが公式にアナウンスされており，なるべく早く7.xへのマイグレーションを行いたいところです。 では，マイグレーション先は十分に枯れたphp 7.0.xが適切でしょうか？ いいえ，せっかくならphp 7.1以上に移行してしまいましょう。 php 7.1以上を使うべき理由 php 7.1以上への移行を勧める理由は，単なるできるだけ新しいものを使おうという考えではありません。php 7.1以上を用いることで得られる利点が遥かに大き

僕は、プログラムをする上で変数や関数に良い名前を付けるのはとても重要と考えています。 というのも、良い名前を付ければ、それだけでそのコードがしたいことの説明になり、コメントと同等の働きをすることもあるからです。 自分がちゃんとそれをできているのかはさておき、僕は普段から、できれば読みやすくて分かりやすい名前を付けたいと思っています。他の人も読むコードであれば、できればプログラムでよく使われるような単語を利用して書いた方がより分かりやすいです。 ただ、よい名前を考えるのって、ちょっと面倒くさいんですよね。僕はこれまで、英語の辞書を利用して、考えたりしていたのですが、「何か、プログラムでよく使われる単語をまとめたものはないか？」と探したら、ドンピシャのものがいくつかあったので、それらをまとめて以下で紹介します。 photo by Michael Coté codic codic – デベロッパ

全ての「つくる人」に刺激を与え、互いの創作意欲を高められるような場所にしたい。 そんな想いから生まれた、エンジニア向けのSNSです。 さっそく使い始める Twitterの認証ページへ移動します

配色は、デザインにおける重要な要素のひとつです。この記事では、デザインプロジェクトの参考にしたい、最新の色の組み組み合わせ101種類をご紹介します。 配色は、どんなデザインでも見る人の認識を形成しながら、雰囲気やトーンを設定します。単色や明るい、涼しい、暖かい、または補色であれ、すべての色合いがデザインの役割を果たします。 デザインに適した色を見つける作業は難しいことです。そこで、配色の参考にしたい101種類の色の組み合わせをまとめています。各カラーパレットは、Shutterstockのイメージ画像にインスパイアされており、HEXコードも一緒に記載しているので、ウェブデザインやソーシャルメディア広告、Eメールデザインなど幅広く利用できます。 コンテンツ目次 1. 単色系カラーパレット 2. 寒色系カラーパレット 3. 鮮やかなカラーパレット 4. 暖色系カラーパレット 5. 補色系カラーパ

いま何時…？　今回紹介するのは、超クールな10個のjQuery時刻入力プラグインです。 日付やカレンダー入力のためのプラグインは巷にあふれていますが、時刻入力のプラグインはそう多くありません。さっそく見ていきましょう！ （追記：2016年3月24日時点で、古くて機能しない、または廃止予定のプラグインをリストから除外しました。現在のトレンドや水準に合わせてリストを更新し、いくつか新しいものも追加してあります） 1. jquery.timepicker シンプルなデザインをお探しなら、Googleカレンダーからインスピレーションを受けた「jquery.timepicker」がおすすめです。しっかりとしたライブラリーで、簡単に時刻入力できるようにデザインされています。 Homepage/Demo | GitHub 2. Wickedpicker Wickedpickerは数あるテーマの中でも、見

2018/02/13追記：「サンプル用のドメインを使おう」の説明に “.example” と “.test” の使い分けについて追記しました。 Web システム開発時のテストデータを作成する時、また各種ドキュメントを書いている時など、サンプルの URL を使う場面は多いと思いますが、その時に適当なドメイン名を使うのはやめましょう、という話です。 知っている方には当たり前レベルの話ですが、意外と IT 企業のシステム開発現場等でも普通に見かけることがまだまだありますので・・・。 よく見かける例 例えば、こんなドメインの URL で開発中システムのテストデータを作っていたり、仕様書に説明が書かれていたりする場面をよく見かけませんか？ test.com aaa.com abc.com sample.com dummy.com hoge.com でも、これらのドメインって存在していて、また実際に利

直近で新しいWebサービスのセキュリティ周りを整備する機会があったので、その時に検討した内容をメモしておきます。 このnoteの前提重点的にみたのが認証機構の部分でしたのでそれに寄った内容になります。 また、一般的なセキュリティ対策（XSSやSQLインジェクション）などについて触れていません。そういった内容については2018年の現在でも徳丸先生の本を一読することが近道かと思います。 体系的に学ぶ 安全なWebアプリケーションの作り方 脆弱性が生まれる原理と対策の実践 | 徳丸 浩 https://www.amazon.co.jp/dp/4797361190 "なぜ"セキュリティ施策をするのかセキュリティ対策は大切だということはわかっていても、"なぜ"対策をしないといけないかということにパッと答えられる人はそう多くないのではないでしょうか。 総務省が公開しているテキストには、以下のようなこと

正直ひさしぶりに、感動的なメールソフトに出会った気がします。その名は「Astro（アストロ）」です。 2017年3月にiOS、及びMac版がリリースされ、現在はAndroid版も公開済み。さらにAmazonが開発したAIアシスタントAlexaや、社内チャットツールSlackとも完全に連携しています。 （最後に説明していますが、Slackとの連携はマジで使えます。Slackユーザーにはほぼマスト、と言っても過言ではないかもしれないので、Slackユーザーは最後まで読んでね！） Astroは、Office 365とGmailのメールアドレスと連携させて使うことができます。一言で言うと、「超イケてるメールソフト」という感じです。 ▼実際に使ってみると、こんな感じの画面です。 Astroでできることを簡単に紹介すると、 チャット感覚でメールを書いて送信することができるようになる。 重要なメールを読

連載： HTML5 Conference 2017特集 (16) こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に、様々なお話を伺おうというものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、Googleのえーじさんです。 えーじさんのセッションは「ウェブのための次世代決済法」でした。 スライド資料はこちらで公開されています。 Web Paymentsは（モバイル）Webの決済体験を変える 白石: 本日は、Web Paymentsについてお聞かせください。 Web Paymentsというのは、その名の通りWeb上での支払い体験を改善するものだと思いますが、そもそもなぜWe

tl;drコードレビューが上手く回って無くてチームが疲弊して辛かったよレビュアーの言い方を変えるだけで大体解決するよ立場とかで例外を許さず、みんながレビューしてレビューされると良いよはじめにあるプロジェクトでGitHubのPRベースでのコードレビューを導入をしました。いかんせんチーム開発が初めてレベルの新人さんが多く、何かと苦労しました。特にレビュイーに対して不効率な指摘はそのまま指示の不明確さに繋がり、チーム全体の開発生産性を下げるので、レビュアーはレビュイー以上に気を使う必要があると感じました。下手をすると、レビュイーのメンタルが弱って闇堕ちするので、チームメンバーの最も大人な人がメンタルケアしたりします。大人な人は大体がリーダー格なので、その人の時間が奪われると何かと開発現場が疲弊しちゃいますね。コードレビューってそんなに難しいものだっけと思ったりもしますが、反省の意味も込めて実際に

Twitterクライアント『モバツイ』開発者であり、2012年11月に想創社（version2）を設立した有名エンジニア・えふしん氏が、変化の激しいネットベンチャーやWeb業界の中で生き残っていくエンジニアの特徴を独自の視点で分析 藤川真一（えふしん） FA装置メーカー、Web制作のベンチャーを経て、2006年にpaperboy&co.へ。ショッピングモールサービスにプロデューサーとして携わるかたわら、2007年からモバイル端末向けのTwitterウェブサービス型クライアント『モバツイ』の開発・運営を個人で開始。2010年、想創社（現・マインドスコープ）を設立し、2012年4月30日まで代表取締役社長を務める。その後しばらくフリーランスエンジニアとして活躍し、2012年11月6日に想創社（version2）設立 若干釣り気味のタイトルですいません。今通っている大学院の授業で、漫画家の浦沢直

ギーク直伝の技術習得メソッド！トレタ増井雄一郎の考える、効率のよい言語選択のワザ 最初に学ぶべき言語は？ 新たな技術の習得フローは？ 若手エンジニアの成長戦略にまつわるメソッドを日本を代表するギーク、トレタのCTO増井さんに聞いてみました。 自身の技術力を向上させるために、皆さんはどのような羅針盤を持っていますか？ 情報や選択肢が無数に存在するなかで、「自分にとってのベストな成長戦略」を採用するのは、なかなかに難しい作業です。ならば、人に聞いてみましょう。それも、未開の領域を切り拓いてきた、トップエンジニアに。 今回、若手エンジニアに向けて技術習得にまつわるメソッドを教えてくれたのは、株式会社トレタのCTOであり数多くの講演・執筆活動も行っている増井雄一郎（ますい・ゆういちろう／@masuidrive）さん。増井さんがここまで培った技術・知識を一挙に棚卸ししていただくと同時に、その中から若

Ajaxで通信を強制停止するには XMLHttpRequestのabortを使います。 実際には、abortなんてそうそう使う機会はありません。 果たして使い道はあるのでしょうか？ 例えば、Ajax通信中に、「Now Loading・・・」なんていうメッセージをモードレスダイアログで表示し、さらにユーザが手動で通信を停止させる手段としてダイアログの右上に×ボタンを用意しておき、ボタンが押されたタイミングで、abortする、なんていうことが考えられます。 Ajax通信中に他のページに移動する際の問題 ミッションクリティカルなWebシステムでない限り、Ajax通信中に他のページへの移動を許容する事は間々あるかと思います。 例えば、最近私が作成したWebシステムでは、Topページのパフォーマンス向上のために、Ajaxで情報を遅延ロードして表示するような仕組みを採用しました。 どれぐらい、パフォー

アップロードと比較するとタイトルは釣り気味なのですが、ダウンロードにまつわるパターンをまとめます。 ふつうのダウンロード アップロードほど考えなきゃいけないことは多くないですが、ハマりポイントはいくつかあります。 ファイル名 何も対策せず日本語をファイル名にすると、当然のように化けます。