はてなブックマーク

これまで自分のブログ兼ポートフォリオサイトをHugo + CloudFlare + GitHub Pagesという構成で運用していましたが、無料でCIが使えるNetlifyという静的Webサイトのホスティングサービスへ乗り換えました。 この記事では、乗り換える前のGitHub Pagesでの構成と、乗り換え後のNetlifyでの構成の比較を比較し、Netlify導入のメリットとデメリットについて説明します。 補足: GitHub PagesとNetlifyとは どちらもGitリポジトリと連携して静的なWebサイトをホスティングできるサービスです。GitHub PagesはGitHubの中の一機能という立ち位置です。 GitHub Pages を使った静的サイトの公開方法が、とても簡単になっていた ｜ Tips Note by TAM 高機能ホスティングサービスNetlifyについて調べて使

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? この記事はLIGアドベントカレンダー2017のための投稿です。 こんにちは。僕は今LIGでフロントエンドエンジニアとして働いていますが、同時に社内随一のRedmine警察であることも自負しています。 LIGではプロジェクト管理ツールとしてRedmineを導入していますが、僕の入社当初はほとんど打ち捨てられたも同然の状態で放置されかけていました。そのような状況をどうやって改善し、社内にRedmineの運用を浸透させていったかについて、経緯や施策を説明します。 当時の状況 入社当時、全社で使う決まったプロジェクト管理ツールはありませんでした

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

弊社では、案件とは関係のないプロジェクトでも業務時間中にみんなにコードレビューを依頼できる時間が確保されています(参加は任意)。案件のコードレビューを依頼したり、ちょっとした個人の制作物を見てらったりと使い方は色々です。 先日、TypeScriptの練習にQiitaのAPIを叩いていて記事を表示するブログウィジェットを作成しました。このウィジェットのレビューを依頼したところ、クラスの設計について具体的な指摘と、それに対する改善を経験できたのでこの記事に記載します。 今回作ったQiitaWidgetの要件 Qiitaの公式APIV2から記事とユーザー情報を取得し、HTMLテンプレートに表示する 投稿の合計いいね数を算出するために、あるユーザーの投稿を全件取得する (このために複数回リクエストの送信とレスポンスデータの結合を行う) パラメータによってユーザー、いいね数によるソート、表示件数、ラ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? リキッドレイアウトのように幅が常に変動するレイアウトのデザインは、動かないカンプからは実際の挙動が読み取れず、デザイナーの意図が汲み取りきれないことが多い。また、複雑化するアニメーションの実装においても、カンプだけではコミュニケーションに不備が生まれてしまう。ほかにも、CMSを使った案件ではデザインカンプと実際のデータの間に齟齬がある可能性もある。 実装効率を高めてスケジュール通りに仕事を終わらせるには、とにかく事前に仕様を固めることが大事だ。ワイヤーフレームやデザインの途中の段階からなるべくデザイナーとコミュニケーションを重ね、想定外

Easy Ganttは、Redmineに高機能なガントチャート機能を追加するプラグインで、プロ版の他に無料版も用意されている。この無料版でもかなりの機能が使える為、たいへん重宝している。 おおむね好評に導入されたのだが、導入後に一番要望として上がってきたのが祝日をガントチャート上に出したいというものだった。 隠されたEasy Ganttの祝日機能 実は、Easy GanttにはRedmineの環境設定で設定した休日以外にも、カスタムの休日を設定する機能がある。この機能はEasy Redmine社のカスタマイズ版Redmineとの連携を想定しているため、通常は(おそらくプロ版であったとしても)使えない。 また、Easy Ganttの表はJavaScriptを使ってcanvas要素として生成されている為、RedmineのView Customize pluginでカレンダーに祝日表示 - Qi

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

<li class="article-list__item"> <!-- article-sneak --> <article class="article-sneak {{ if .Params.image }}article-sneak--thumb{{ end }}"> <div class="article-sneak__link" onclick="location.href='{{ .RelPermalink | safeJS }}'"> <div class="article-sneak__text article-sneak__wrapper"> <div class="article-sneak__inner"> <p class="article-sneak__date"> <a href="{{ .RelPermalink }}"><time datetime="{{

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? LPなどの視覚的なデザインを売りとしたサイトの場合、高い水準でカンプ通りの実装が求められる。自分では狂いなく再現したつもりでも、どこかでずれていてデザイナーから指摘されることもしばしばある。この記事では、1デザインカンプの徹底再現（2 ピクセルパーフェクト）の必要性と、そのための便利なMacOSXアプリケーションを紹介する。 要約 他人の作ったデザインを高いレベルで再現するには、ピクセルパーフェクトを狙うくらいの意気込みが必要 その為には、ブラウザへカンプを重ね合わせるチェックが有効 Helium/Mapture/LayxerXは、フロ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 筆者は元々デザイン系の出身なので、ソフトウェアのテストというものを真剣に考えたり調べたことはあまりなかった。この記事では、そんな自分がブラックボックステストをやることになり知った、組み合せテストにまつわる問題について説明する。 本記事の概要 テストにおいてパラメータの組み合せが厄介な性質を持っていることに気付いた 組合せテストの負荷を軽減する「ペアワイズ法」というものがある ペアワイズ法を使って無料でテストケースを生成できるPairwiserというWebアプリケーションがある 組み合わせの数が多すぎる あるWebサイトに、以下のような典

※MacOSXを対象とした記事 仮想マシンのディスクイメージは巨大なバイナリデータである為、差分バップアップが取りにくい。少しでも変更があると全く異なるデータとして認識されてしまう為、TimeMachineバックアップの容量を無駄に消費してしまう。 [mac]TimeMachineバックアップ対象からVirtualBox仮想マシンを除外する 仮想マシンの状態が変わる度、何十GBもの容量をフルで消費してしまうのはかなり非効率だ。だからといってバックアップはしたい。そこで、VMWareFusionとVirtualBoxの2つのソフトで、バックアップ容量を削減する為の方法を調べた。 先に結論を言うと、Fusionユーザーは「AutoProtect」機能を。VirtualBoxユーザはOSXの「スパース・バンドル」ディスクイメージ内に仮想マシンを保存するのがてっとりばやい解決策だと思う。 方法1.

今年の春くらいにWEB+DBの「サーバ/インフラ徹底攻略 (WEB+DB PRESS plus)」を読み、イミュータブルインフラストラクチャというものに興味が湧いた。そこで、これまではBitnami StacksでOSXに直接インストールしていたWebアプリケーションを、VagrantとDockerで不変なものに置き換えてみることにした。 ※スライド版資料もあります →Dockerで楽しむ自宅サーバ 2016-02-15追記 紹介しているサーバ構成の簡易版をgithubにアップロードしました。自宅と全く同じ構成ではありませんが(非SSL・内部ネットワーク化など)、VagrantとOSXさえあれば動作するようになっています。 →デモ用Vagrantfile + docker-compose.yml 最終的に出来上がったシステムの俯瞰図 設定ファイルの一覧 ├── Vagrantfile ├─

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

1988年生まれ。多摩美グラフィックデザイン学科を中退。デザイナーとしてグラフィック・エディトリアル・Web・UIのデザインを経験した後、Webフロントエンドエンジニアも経験。現在はITコンサルタントとして外資系SIerに在籍中。※投稿内容は私個人の意見であり、所属企業・部門見解を代表するものではありません。 Follow

自動テストって意識高そうで恰好良いですよね! 普段ブラウザ用のJavaScriptしか書かない人なのですが、テストについて調べても、難しい話から始まる記事ばかりで「アサーションって何?」とか「何で通常のファイルとは別のjsが必要なの?」みたいな気持でした。この記事では簡単な前提条件から、mocha/chaiの使い方の概要が分かる部分までを説明したいと思います。 そもそもテストとは何? ソフトウェア開発におけるテストとは、ソフトウェアの振舞いが想定した通りであるかを検証することです。ソフトウェアのサブルーチンを取り出してテストする「単体テスト／ユニットテスト」と、ソフトウェア全体の挙動をテストする「結合テスト」があります。mocha・chaiはこのうちの「単体テスト」を対象としたツールです。 じゃあ単体テストって何をすることなの? 単体テストとは、ある特定の関数を対象に、入力値と出力値が仕様

最近SVGに初めて触れる機会があり、それまで抱いていたイメージとは大きく違ったものだという感想を持った。この記事では、これまでSVGに触れたことのない人向けに「SVGのそんなに怖くないところ」を紹介する。 SVGになんとなく抱いていた印象 ベクター形式のなんかよく分かんない画像まわりの最新技術 仕事で実用するには新しすぎる 使いこなすには何か高度で新しい技術を勉強しないと無理 中を覗くと数字がたくさんあって難しそう。算数嫌い <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><path d="M112.8 234.8c-2.4-1.5-7.6-3.8-14.6-3.8-11.5 0-15.9 7.1-15.9 13 0 8.2 5 12.3 16.1 17 13.4 5.7 20.2 12.5 20.2 24

デスクトップアプリケーションに比べるとWebアプリケーションの導入は面倒だが、DockerやVagrantの登場によって敷居が低くなっている。誰かがDockerHubへ使いやすいイメージを公開してくれたり、Webアプリの開発元がDockerfileを公式に提供しているケースが増えてきているためだ。 この記事では、筆者が実際に使用したことのあるWebアプリの一覧と、docker-composeの設定ファイル(またはDockerfile)をまとめる。既にDocker環境が整備されている状態であれば、YAMLファイルやDockerfileをコピペしてdocker-compose up -dするだけで自動的にWebアプリケーションが起動する。(もし動かなかったらスミマセン) セキュリティとかは考えていないので、LAN内のみでの使用を想定 記載の設定では、永続化データはDockerが動作しているマシ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? DTP・Web・UIなどのデザインをする上で、ネットから落としてきたテンプレートや資料、フォントやテクスチャー素材といったものを活用することが多い。そういった資産を使用条件などのライセンス情報とセットで管理し、いつでも閲覧・検索ができるようになったらとても便利になる。 これまでは普通に外部ハードディスク入れてFinder上で管理していたが、無料で使えるDAMシステムを見つけたので使ってみることにした。 最新情報 抜粋です。VersionHistoryからフルバージョンを閲覧できます。 リビジョン7683が配布されています OCRプラグイ

1.トラッカー「ToDo」のチケットがステータス「進行中」の時、そのチケットをトラッカー「DTP制作」に変更する 2.すると、そのチケットのステータスは「進行中」の状態でグレーアウトし、ロックされてしまう 3. このチケットはトラッカーを「ToDo」に戻すまで二度とステータスが変更できない このケースでチケットをトラッカー「DTP制作」に正しく変更するには、両者の間で共通している「新規」と、すべての項目が相互に遷移可能な状態に設定されている必要があります。 トラッカー「ToDo」のチケットのステータスを、一度「新規」にする トラッカーを「DTP制作」に変更する 変更後、ステータスを任意のもの(「入稿待ち」〜「校了」までのどれか)に変更する この手順を可能にするには、両方のトラッカーで すべてのワークフローから「新規」に戻れるようにする 「新規」からすべてのワークフローへ進めるようにする こ

docker-composeを使うと、複数のコンテナから構成されるサービスを従来よりも簡単に管理できるようになる。 dockerだけで管理する場合の不便さ たとえば dockerだけでmysqlとgitbucket・redmine・リバースプロキシ(nginx)を立ち上げる場合には、次のようなコマンドをシェルスクリプト化しておく必要があった。linkオプションがあるので、コンテナの立ち上げ順序も気にしなればいけない。 # mysql docker run --name mysql \ -d \ -p 3306:3306 \ --volumes-from data-mysql \ -e 'MYSQL_ROOT_PASSWORD=password' \ mysql # redmine docker run --name redmine \ -d \ --link mysql:mysql \ -

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Webサイトのディレクトリ構造とその命名って、特に決まりがなくて迷う 筆者は英語についてはほとんどよく知らないため、完全な独断による記事。 ただし、できるだけモヤモヤしないことを優先し、筋が通っていそうなルールを目指す。 画像・スクリプト・スタイルシート等をHTMLと分けて入れるフォルダの名前をどうするか? よくある名前 ルート直下に「HTML以外をまとめるフォルダ」を作るときは、 特に決まりはないが、だいたい以下のような名前が多いと思う。 assets, public, module, modules, common, commons

gulpとGraphicsMagickによるPDFの差分比較 DTPの校正を重ねる過程でしでかすと怒られるのが、「修正指示されていない部分で意図しない変更が発生してしまう」こと。特に大量のデータの入ったカタログのようなものを作る際、こちら側の作業ミスで大事な部分に間違い(たとえば電話番号や商品の価格など)のあるデータを入稿して何万部も刷ってしまうと、損害賠償問題にも発展してしまうかもしれない…。 意図しない変更が起こっていないかをチェックするには、修正を行う度に、古いバージョンと新しいバージョンで機械的な差分チェックをするのが一番だと思う。 やりたいこと 前のバージョンのPDFと新しいバージョンのPDFを用意し、画像の差分比較をしたい PDFは複数ページで、印刷入稿を前提とした仕様になっているとする 一度に複数ファイルの比較をしたい 上記を自動処理したい 難しそうなので、新旧でページの入れ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

文脈と経緯 以下は「一通りのタグの種類や、アウトラインアルゴリズムについては一応理解しているので何も分からない訳ではないけど、デザイン画をどんな風に実際のコードとしてマークアップしていけばいいかよく分からない」と言っていた新人デザイナー向けに書いたドキュメントです。 新人の子は、セクションを厳密に定義しようとして時間をかけすぎてしまっていました。それも重要ですが、実際の業務における優先順位を明確にしたかったという意図もあります。 筆者もデザイナーです。 HTMLのマークアップをする時は、以下の3段階のルールでどんな要素が適当かを判断してください。 第1段階：正しく技術仕様に沿っているか タグの入れ子関係には一定の仕様があり、 これをHTML5では「コンテンツ・モデル」と言います。 XHTML1やHTML4で言うところの「ブロックレベル要素とインラインレベル要素」の 関係を複雑化して更に分か