サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Nintendo Direct
qiita.com/y_hokkey
const { app, BrowserView, BrowserWindow, screen } = require('electron'); app.on('ready', () => { // デスクトップ領域の大きさを取得 const workArea = screen.getPrimaryDisplay().workArea; // 推奨サイズ const initialWidth = 1300; const initialHeight = 940; // BrowserWindowを新規作成 let win = new BrowserWindow({ width: Math.min(workArea.width, initialWidth), height: Math.min(workArea.height, initialHeight), }); // BrowserWind
これまで自分のブログ兼ポートフォリオサイトを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について調べて使
この記事はLIGアドベントカレンダー2017のための投稿です。 こんにちは。僕は今LIGでフロントエンドエンジニアとして働いていますが、同時に社内随一のRedmine警察であることも自負しています。 LIGではプロジェクト管理ツールとしてRedmineを導入していますが、僕の入社当初はほとんど打ち捨てられたも同然の状態で放置されかけていました。そのような状況をどうやって改善し、社内にRedmineの運用を浸透させていったかについて、経緯や施策を説明します。 当時の状況 入社当時、全社で使う決まったプロジェクト管理ツールはありませんでした。ほとんどの業務上のコミュニケーションがChatWorkで行われており、それ以外では僅かにBitbucketのWikiやIssue機能が使われている状況でした。 また、かつてはプロジェクト管理にRedmineを使っていた過去もあったようなのですが、保守のため
PugやEJSなどのHTMLプリプロセッサはとても便利だが、出力後のHTMLファイルはインデントや改行などが汚いので、そのまま客先に納品するのがはばかられる。そこで、js-beautifyというパッケージを使ってインデントや空白をバッチで除去できるスクリプトを作成した。 js-beautifyのインストール npm install --save-dev js-beautify js-beautifyのオプション オプション一覧 CLIオプション オプション 説明
弊社では、案件とは関係のないプロジェクトでも業務時間中にみんなにコードレビューを依頼できる時間が確保されています(参加は任意)。案件のコードレビューを依頼したり、ちょっとした個人の制作物を見てらったりと使い方は色々です。 先日、TypeScriptの練習にQiitaのAPIを叩いていて記事を表示するブログウィジェットを作成しました。このウィジェットのレビューを依頼したところ、クラスの設計について具体的な指摘と、それに対する改善を経験できたのでこの記事に記載します。 今回作ったQiitaWidgetの要件 Qiitaの公式APIV2から記事とユーザー情報を取得し、HTMLテンプレートに表示する 投稿の合計いいね数を算出するために、あるユーザーの投稿を全件取得する (このために複数回リクエストの送信とレスポンスデータの結合を行う) パラメータによってユーザー、いいね数によるソート、表示件数、ラ
勉強したくないけど英語ができるようになりたい 僕は特に暗記が嫌いで、数学の公式も古文の活用も英単語も全然覚えられません。しかし、日本のそう明るくない将来や、海外と比較して安すぎる給与のことを考えると、そのうち何とか英語を身に付けて外国人と仕事ができるようになりたいものです。 そこで、できるだけがんばらずに、エンジニアの業務内で無理なくできる学習方針を考えてみました。 具体的な期限や目標を決めない 期限を定めるとがんばらなくてはいけなくなってしまうので、期限は定めません。やらないよりはやった方がいい、という程度のことを積み重ね、いつか本気で勉強したくなった時に今よりも高いステップへ自然と到達できていることを目標にします。 日常業務の中で自然にできることだけをやる 仕事が終わったらゲームで遊びたいので、プライベートタイムに頑張って単語を覚えたりはしません。通勤中も2ちゃんねるを読みたいので、「
リキッドレイアウトのように幅が常に変動するレイアウトのデザインは、動かないカンプからは実際の挙動が読み取れず、デザイナーの意図が汲み取りきれないことが多い。また、複雑化するアニメーションの実装においても、カンプだけではコミュニケーションに不備が生まれてしまう。ほかにも、CMSを使った案件ではデザインカンプと実際のデータの間に齟齬がある可能性もある。 実装効率を高めてスケジュール通りに仕事を終わらせるには、とにかく事前に仕様を固めることが大事だ。ワイヤーフレームやデザインの途中の段階からなるべくデザイナーとコミュニケーションを重ね、想定外の要件が発生しないように気をつけるべきだろう。 この記事では、デザイナーやフロントエンドエンジニアが見落としがちなWebフロントエンドの課題について列挙していく。 ホバー表現を後から指示される ツッコミ 後から仕様追加されると困るから先に決めて! メモ 最近
Easy Ganttは、Redmineに高機能なガントチャート機能を追加するプラグインで、プロ版の他に無料版も用意されている。この無料版でもかなりの機能が使える為、たいへん重宝している。 おおむね好評に導入されたのだが、導入後に一番要望として上がってきたのが祝日をガントチャート上に出したいというものだった。 隠されたEasy Ganttの祝日機能 実は、Easy GanttにはRedmineの環境設定で設定した休日以外にも、カスタムの休日を設定する機能がある。この機能はEasy Redmine社のカスタマイズ版Redmineとの連携を想定しているため、通常は(おそらくプロ版であったとしても)使えない。 また、Easy Ganttの表はJavaScriptを使ってcanvas要素として生成されている為、RedmineのView Customize pluginでカレンダーに祝日表示 - Qi
早稲田大学の研究グループが、ディープラーニングを使った白黒写真の着彩ツールを公開したというニュースを読んだ。 人工知能で白黒写真をカラーに 早大が技術開発、GitHubでコード公開 - ITmedia ニュース satoshiiizuka/siggraph2016_colorization: Code for the paper 'Let there be Color!: Joint End-to-end Learning of Global and Local Image Priors for Automatic Image Colorization with Simultaneous Classification'. サンプルを見てみると、確かにそれっぽく色が付いている。しかし、どれも最初から白黒写真だったものの様で、実際の色とどの程度差があるのかがよく分からない。そこで、どれくらい色
<!-- article-list --> <section class="article-list"> <h2 class="article-list__head" itemprop="name">記事一覧</h2> <ol class="article-list__list"> {{ range .Data.Pages.ByDate.Reverse }} {{ .Render "li" }} {{ end }} </ol> </section> <!-- /article-list --> <li class="article-list__item"> <!-- article-sneak --> <article class="article-sneak {{ if .Params.image }}article-sneak--thumb{{ end }}"> <div class=
LPなどの視覚的なデザインを売りとしたサイトの場合、高い水準でカンプ通りの実装が求められる。自分では狂いなく再現したつもりでも、どこかでずれていてデザイナーから指摘されることもしばしばある。この記事では、1デザインカンプの徹底再現(2 ピクセルパーフェクト)の必要性と、そのための便利なMacOSXアプリケーションを紹介する。 要約 他人の作ったデザインを高いレベルで再現するには、ピクセルパーフェクトを狙うくらいの意気込みが必要 その為には、ブラウザへカンプを重ね合わせるチェックが有効 Helium/Mapture/LayxerXは、フローティングと透過機能を持った非常に便利なアプリケーション なぜピクセルパーフェクトを目指すのか Webサイトという技術の特性上、フォントが違ったり、組版の仕様が違ったり、文字サイズのデフォルト値が違ったり、モニタの色見が周辺環境や端末スペックによって違ったり
筆者は元々デザイン系の出身なので、ソフトウェアのテストというものを真剣に考えたり調べたことはあまりなかった。この記事では、そんな自分がブラックボックステストをやることになり知った、組み合せテストにまつわる問題について説明する。 本記事の概要 テストにおいてパラメータの組み合せが厄介な性質を持っていることに気付いた 組合せテストの負荷を軽減する「ペアワイズ法」というものがある ペアワイズ法を使って無料でテストケースを生成できるPairwiserというWebアプリケーションがある 組み合わせの数が多すぎる あるWebサイトに、以下のような典型的な検索UIがあったとする。この画面を対象にブラックボックステストを実施したい。 検索UI: 文字列の部分には以下のような文字列を入れてテストしたい。 一般的な文字列 未入力 極端に複雑な文字列 極端に長い文字列 チェックボックスの部分はオンとオフしかない
※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 ├─
※gulp-ejsでのビルドを想定しています。 EJSでできること 数や文字列や配列やオブジェクトの宣言と処理(JavaScriptと同じ) HTMLへの値の展開 ループと条件分岐 外部ファイルの読み込みとパラメータの引き渡し <% %>の種類 <% %> このタグの内側はJavaScriptワールドになる。HTMLとしては出力されない
上位のmodifierから下位のelementを上書くときに名前を省略したい ※この記事はSCSSでBEMスタイルのコーディングをすることを前提としている。 最近のSassでは、&をクラス名に使うとコンパイル後にセレクタを外出ししてくれる便利な機能がある。 // blockクラス .my-class { // デフォルトのスタイル &__body { // 本文elementのスタイル } // 強調アレンジの為のmodifierクラス &--emphasis { // ここにelement上書きのスタイルを実装(※) } }
今年も一杯ググった一年だった。 2015年にTwitterで共有したURLから技術関係のものを抽出・整理してまとめる。 必ずしも記事自体が2015年のものとは限らないので注意。 デザイナーからフロントエンドエンジニアにジョブチェンジ 表の中には自分の書いた記事は入れていない JavaScript CoffeeScriptからES6に移行 Node.jsについて調べる機会がどんどん増えて来ている 来年はちゃんとテストを書いて開発できるエンジニアになりたい 記事 Twitter投稿(リツイート含む)
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が動作しているマシ
DTP・Web・UIなどのデザインをする上で、ネットから落としてきたテンプレートや資料、フォントやテクスチャー素材といったものを活用することが多い。そういった資産を使用条件などのライセンス情報とセットで管理し、いつでも閲覧・検索ができるようになったらとても便利になる。 これまでは普通に外部ハードディスク入れてFinder上で管理していたが、無料で使えるDAMシステムを見つけたので使ってみることにした。 最新情報 抜粋です。VersionHistoryからフルバージョンを閲覧できます。 リビジョン7683が配布されています OCRプラグインが標準搭載になりました CSVファイルからユーザーをバッチ作成できるようになりました チェックサムが重複するファイルのアップロードを拒否するオプションが追加されました リビジョン7458が配布されています リソースの履歴を管理できるバージョン管理機能が追加
これまでWeb・DTP制作/システム開発の両方で日常的にRedmineを使用してきた中で生まれたプラクティスをまとめます。 「いやそれは違う」という箇所もあるかもしれないので、もし指摘があればコメントをお願いします! 基本方針 情報の集約度を高める ガチガチの設定を沢山定義するのではなく、シンプルな設定で柔軟に運用する アクセス解析を入れる チケットが増えてくるとRedmineは重くなります。この重さを改善するために色々な施策が必要になるタイミングがいつかやってきますが、サーバの応答速度などのデータがないと改善策がどれくらいの効果だったのかが分かりません。 ほかにも色々な測定ができるので、とりあえず入れておいて困ることはないでしょう。Google Analyticsの導入はプラグインで簡単に可能です。 チャットサービスとの連携を考える Redmineの欠点の1つは、チャットなどでのリアルタ
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 \ -
Webサイトのディレクトリ構造とその命名って、特に決まりがなくて迷う 筆者は英語についてはほとんどよく知らないため、完全な独断による記事。 ただし、できるだけモヤモヤしないことを優先し、筋が通っていそうなルールを目指す。 画像・スクリプト・スタイルシート等をHTMLと分けて入れるフォルダの名前をどうするか? よくある名前 ルート直下に「HTML以外をまとめるフォルダ」を作るときは、 特に決まりはないが、だいたい以下のような名前が多いと思う。 assets, public, module, modules, common, commons, resource, resources それぞれの単語の意味合いをまとめまた。リンクをクリックするとweblio辞書に飛ぶ assets:複数形で 個人・会社の 財産・資産 public: 公開の・共有の modules:モジュール commons:共通
gulpとGraphicsMagickによるPDFの差分比較 DTPの校正を重ねる過程でしでかすと怒られるのが、「修正指示されていない部分で意図しない変更が発生してしまう」こと。特に大量のデータの入ったカタログのようなものを作る際、こちら側の作業ミスで大事な部分に間違い(たとえば電話番号や商品の価格など)のあるデータを入稿して何万部も刷ってしまうと、損害賠償問題にも発展してしまうかもしれない…。 意図しない変更が起こっていないかをチェックするには、修正を行う度に、古いバージョンと新しいバージョンで機械的な差分チェックをするのが一番だと思う。 やりたいこと 前のバージョンのPDFと新しいバージョンのPDFを用意し、画像の差分比較をしたい PDFは複数ページで、印刷入稿を前提とした仕様になっているとする 一度に複数ファイルの比較をしたい 上記を自動処理したい 難しそうなので、新旧でページの入れ
# スペース区切りでまとめてインストール可能 brew cask install app1 app2 app3... # サイトのホームページをまとめて確認する brew cask home app1 app2 app3... # インストール済ソフトを確認 brew cask list 無料ソフト 開発/ネットワーク管理/IDE 0xed - バイナリエディタ angry-ip-scanner - LAN内のIPを総当たりでスキャンして一覧 atom - GitHub製の高機能テキストエディタ dockertoolbox - OSX用のDocker環境を構築 brackets - Adobe製のWebベースな多用途エディタ cocoarestclient - RESTクライアント cyberduck - FTP/WebDav/S3クライアント eclipse-php - PHP版Ecli
最近gruntからgulpに移行した。gruntの時はgruntプラグインで実現していた機能の一部は、gulpプラグインではなく普通のnodeモジュールを使って実現しているものもある。サンプルコードはすべてCoffeeScriptで記載している。 どんなニーズに基いているか デザインやちょっとしたプログラミングをする人なので、単体テストとかはないです。 CoffeeScriptとSCSS/Compass好き。 とりあえず入れると便利 gulp-load-plugins "gulp-"で始まるモジュールを自動的にrequire()してくれる。 plugins = require 'gulp-load-plugins' # pluginsオブジェクトの下へ自動的にぶらさがる。"gulp-"は省略される .pipe plugins.coffee() # ハイフン付きのモジュール名はキャメルケース
文脈と経緯 以下は「一通りのタグの種類や、アウトラインアルゴリズムについては一応理解しているので何も分からない訳ではないけど、デザイン画をどんな風に実際のコードとしてマークアップしていけばいいかよく分からない」と言っていた新人デザイナー向けに書いたドキュメントです。 新人の子は、セクションを厳密に定義しようとして時間をかけすぎてしまっていました。それも重要ですが、実際の業務における優先順位を明確にしたかったという意図もあります。 筆者もデザイナーです。 HTMLのマークアップをする時は、以下の3段階のルールでどんな要素が適当かを判断してください。 第1段階:正しく技術仕様に沿っているか タグの入れ子関係には一定の仕様があり、 これをHTML5では「コンテンツ・モデル」と言います。 XHTML1やHTML4で言うところの「ブロックレベル要素とインラインレベル要素」の 関係を複雑化して更に分か
次のページ
このページを最初にブックマークしてみませんか?
『@y_hokkeyのマイページ - Qiita』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く