Web制作者・デベロッパー向けに、クラウドでの同期機能も備えたオープンソースのコードスニペットマネージャーを紹介します。 macOS, Windows対応のアプリで、Web制作のさまざまな言語をサポートしています。日本語の入力など、日本語環境でも問題なく利用できます。エディタにはAceが使用されており、非常に快適で、高速に動作します。 massCode massCode -GitHub massCodeの特徴 massCodeのダウンロードとインストール massCodeの使い方 massCodeの特徴 massCodeは、デベロッパー向けのコードスニペットマネージャーです。ライセンスはGNUで、オープンソースなので商用でも無料で利用できます。 macOS 11.0+, Windows 10,11をサポート、Linuxも近日サポート予定です。 2年ほど前にv1.0がリリースされたときに紹介

無駄な損失が多いPNG画像を最適化し、画像品質の穏やかな部分を利用して、ファイルサイズを大幅に軽量化するmacOS対応の無料アプリを紹介します。 アプリの性質上、得意な画像と不得意な画像がありますが、ほとんどがファイルサイズ半分以下に軽量化されました。 Crunch -GitHub Crunchで最適化した画像 Crunchのインストール・使い方 Crunchで最適化した画像 Crunchで最適化する際の得意な画像と不得意な画像を見てみましょう。 「DSSIM類似スコア」は、0に近いほど画像が類似している値です。 ※DSSIMは人間の知覚をシミュレートして、画像の類似度を比較するツールです。 元画像（size: 325.6 KB） 最適化した画像（size: 124.3 KB） DSSIM類似スコア: 0.001481 Crunchの得意なタイプの画像です。 目で感知できない部分を減少させ

作成：2018/03/5 更新：2019/01/29 Mac > Web制作 Windowsを使っていたフロントエンドエンジニアやコーダーがMacに乗り換えたときに、最低限やっておきたいMac初心者向けの便利な初期設定。 エンジニア速報は Twitter の@commteで配信しています。 ターミナルのテーマ変更 ターミナルもしくは、iTerm等のテーマをiceberg、フォントをRictyに変更。 ダウンロード テーマ：Iceberg フォント：Ricty Diminished 参考：お前らのターミナルはダサい - Qiita 開発環境 コーディングに必要なツール管理をインストールします。不要な人は読み飛ばしてください。 Xcode インストール xcode-select --install homebrew インストール /usr/bin/ruby -e "$(curl -fsSL h

まさに、Web制作者のためのアプリです。 納品ファイルをまとめる際に、更新した差分のファイルだけをディレクトリ構造を保持したまま抽出し、ファイルリストと共に納品ファイルセットを作成できるWin, Mac対応のアプリを紹介します。 ディレクトリの枝葉に点在する更新ファイルでも、1クリックでまとめることができます。 バージョン管理のないプロジェクトでは、特に重宝すると思います。 Scone Diff Scone Diffの特徴 Scone Diffのダウンロード・インストール Scone Diffの使い方 Scone Diffの高度な使い方 Scone Diffの特徴 Scone DiffはWindows、macOS対応の国産アプリで、無料版と有料版がリリースされています。無料版でも十分な機能が備わっています。 Web制作のファイル納品時、必要なファイルだけをまとめて納品できます。 必要なファ

Adobe/Macromedia Fireworks がCS6で新規開発が停止になったのは丁度2013年の今日5/7。Fireworksユーザに衝撃とやっぱり感が襲った日でした。記念日でもあるので今回はデザインツールGravit Desinger v3を紹介したいと思います。 2017/05/07現在バージョンはv3.0.5。私が試したのはWindows版で他のプラットフォームで試したわけではないことに注意してください。 2017/05/09追記：日本語の表示は、日本語フォントをimportした上テキストのSpace(Char)を20前後にすると一応できます。しかし、直接のタイプはできません。 限りなく全てに近いクロスプラットフォーム対応！Gravit Desiner v3は、MacOS版、Windows10版(Store版とインストール不要なバージョンがある)、さらに、Linux版、Ch

Web制作者やデザイナー向けの定番のアプリ・ツールをはじめ、あまり知られていない便利なものまで、macOS用のアプリとツールを紹介します。 制作者やデザイナーに限らず、macOSを便利にするツールもたくさん揃っています。 Awesome Mac -GitHub MITライセンスで公開されており、せっかくなので、翻訳してみました。 私が日常的に使うツールや、気になっていたツールも含まれており、こんなのもあるんだ！という便利そうなツールもたくさんあります。 エディタとIDE（統合開発環境） 開発ツール テストツール コマンドラインツール バージョン管理 データベース デザイン&プロダクト 仮想マシン コミュニケーションツール データ復旧 オーディオとビデオ オフィス・読み書きツール Ebookリーダー FTPクライアント ハイブリッドアプリ用のフレームワーク ダウンロードツール オンラインスト

アプリやWebのUI制作では、もうSketchに完全移行したという方も多いのではないでしょうか。VASILYで開発・運用しているファッションサービス「IQON」でも、昨年の夏頃から徐々に移行を開始し、現在はほぼすべてのUI制作をSketchで行えるようになりました。 そこで今回は、Sketch移行を進めた際の「デザインのコンポーネント化」のポイントや、その恩恵をお話したいと思います。 デザインデータの属人化、という問題IQONは2010年にサービスを開始・運用してきたため、デザインデータの量がかなり多く、最新のデータがどこにあるのか分かりづらかったり、デザインデータのつくり方が「属人化」していたことが問題となっていました。 サービスの成長にともない2015年頃から徐々にデザイナーが増えてきましたが、新しいデザイナーが入った際すんなり作業を開始することが難しかったり、急対応が必要な際に作業し

WEB制作やシステム開発をしているとフローチャートを書くことも多く、専用のソフトウェアもリリースされていたりしますが、使い慣れたツールで創るのが一番早いという方も多いと思います。今日紹介するのはフローチャート作成のためのデザインキット「Flowchart kit for Sketch」です。 フローチャートに必要なデザイン素材をSketchで利用できるように、まとめて配布されています。 詳しくは以下 上記のように、フローチャート用に点線、実線、線の間にラベルが付けられたもの、エラーと成功のラベルなどなど、フローチャートの基礎要素が詰まっています。 Sketch形式で配布されていますので、自由にカスタマイズしながら利用ができるのが良いですね。こちらは全部で青、グレイ、黒と三種類のバージョンが無料で公開されており、ライセンスはCreative Commons Attribution 4.0 I

Affinity Designerは、Serif Ltd,が開発するデザイン用ソフトウェアです。Mac/Windowsの両OSに対応しています。ベクターでグラフィックを描画することが可能で、Adobe IllustratorやBohemian Coding Sketchと競合する立ち位置の製品です。 Affinity Designerの最大の特長は、IllustratorやSketchとは違い、Adobe Photoshopのようにピクセル（ラスター）も扱うことが可能なところです。「ペルソナ」と呼ばれるワークスペースを切り替えて、ベクターとピクセルの機能を同一ドキュメント上で使用することができます。 たとえば、Illustratorのようにベクターで描いたグラフィックに対してPhotoshopのようにトーンカーブで色を調整する、といったことが可能です。 本記事執筆時点のバージョンは1.5.

Sublime Text は現在もっとも人気のあるコードエディタのひとつです。そのスピードとシンプルさ、豊富なプラグインで多くのプログラマーに愛されています。最大限に Sublime Text を活用するために、今回は普段よく利用している拡張機能をまとめてご紹介します。 詳細は以下から。 Package Control まずはじめに Package Control をインストールしなければ始まりません。Sublime Text の拡張機能を管理するためのパッケージで、これなしで拡張機能のインストール、削除も大変な作業となってしまいます。今回紹介するプラグインをインストールする前に、まず最初に行いましょう。 詳しいインストール方法については、こちらのページを参考にどうぞ。 JavaScript & NodeJS Snippet より素早くJavaScriptを記述することができるスニペットの

シンプルなデザインで使いやすいOS X用の定規・ルーラーの無料アプリを紹介します。 Web制作に役立つよう設計されており、単位はpxだけでなくemでも利用できます。 イメージとしては、ノギスのように測る感じです。 Linear App Linear -GitHub Linear Appの特徴 Linear Appの使い方 Linear Appのダウンロードとインストール方法 Linear Appの特徴 Linear Appは、Web制作者のための定規アプリで、完全無料のオープンソースで開発されています。 ブラウザの機能拡張ではなく、OS X用のアプリです。 Chromeのデベロッパーツールや他のアプリ上でもオーバーレイで動作します。 複数の定規を作成できます。 作成した定規をそのまま複製することができます。 カラーはダークとライトの2種類。 定規の単位は、pxとemに対応。 ショートカット

OS XでInternet Explorerを使う方法があるというので試してみました。 OSXDailyの記事を参考にやってみましたが、最初はうまくいかず。どうも最初にmodern.IEにログインしておく必要があったことが後になって分かりました。 詳しくは次の記事をご覧ください。 mi.kobonemi.com MacでIEが使えるからどうした、という感じかもしれませんが、こんな方法もあるとのことで覚えておいても損はないかもしれないです。 必要のは無料のMicrosoftアカウントとインターネット環境だけ。Parallels DesktopやVMwareなどの仮想環境は必要ないので敷居は低いです。 スポンサーリンク Apple Store Microsoft Store Amazon.co.jp

こんにちは、霙(@xxmiz0rexx)です。 スマートフォンサイトを制作している時、たまーに困ることがあります。 それは、実機でしか再現しない表示崩れ。 Macでみた時は大丈夫だったのに、何故かiPhoneでは謎の余白が…なんてことが先日もありまして、 解決のためにSafariのWebインスペクタ機能を使ってみましたので使い方をメモしたいと思います。 Webインスペクタ機能とは iPhoneで見ているページのソースをMacで見ながらデバッグできる機能です。 使うには双方へのちょっとした設定と、お互いをケーブルで繋ぐことが条件。 みんなだいすきGoogle Chromeの開発者ツールと同じようなものですね。 必要なもの 1.Mac 2.iPhone 3.ケーブル 次の章で使い方を書いていきたいと思います。 Webインスペクタ機能を利用する手順 1：iPhoneとMacをケーブルで繋ぐ まず

こんにちは！みう(@miu0512)です。私がiMacを購入したのは去年の夏。iMacはもはや私にとって欠かせない仕事ツールの1つです。定番なものから制作に関するアプリまで、最初に導入したMacアプリ達をまとめてみました。 １．Adobe関連 Webデザインの仕事に欠かせないデザイン制作アプリ PhotoshopやIllustratorでWebデザインを行っているので、このアプリは私にとって必須。現在はCCを利用しています。他にも沢山の代替アプリが出ていますが、やっぱりAdobeは毎日起動しています。

2015年4月1日 アクセシビリティ, 便利ツール, 色彩 以前からWebアクセシビリティにはちょこちょこ勉強中の私です。しかしWebアクセシビリティについて書かれたサイトや本ってあまり多くなく、リソースを探すだけで苦労してしまったり…。そんなわけで今回はWebアクセシビリティのチェックに使えるツールや役立つ本、Webサイト、ブログなどを集めてみました。 ↑私が10年以上利用している会計ソフト！ アクセシビリティとは？ 「アクセシビリティ」とは、アクセスのしやすさを意味する言葉で、転じて利用環境や身体の制約に関係なく誰でも使えるという意味で使われます。どのような状況でもWeb上のコンテンツや機能を十分に利用できるWebサイトを「アクセシブルである」と言えます。 「ユーザビリティ」と混同されがちですが、使えないものを使えるようにするのがアクセシビリティの向上、使いにくいものを使いやすくするの

制作の効率が劇的にアップする『Avocode』の正式版が、1/29にリリースされました！ Avocodeは簡単に言うと、PSDのプレビューや書き出しをPhotoshop無しで行うもので、書き出しは画像だけでなく、SVGやCSSにも対応しています。画像のスライスやスタイルシートのコーディング作業がググッと楽になるWin/Mac/Linux対応のアプリです。 正式版で、特に大きく変わったのがデザイナー用簡単GitHub。これは無料で単体利用できる機能で、PSDファイルの共有やリビジョン管理が非常に簡単にできます。 ベータ版の時から、そして正式版がリリースされてからみっちりと試したので、Avocodeの使い方や登録方法を紹介します。 Avocode Avocodeには無料と有料のプランがあり、有料プランの優待コードがコリスのビジター限定でもれなく使用できます。無料プランだけを使ってもよし、有料プ

Mac App Storeには現在申請中だそうですが、NormさんのWebサイト”Ui Store“では既に$49.99で販売が始まっており、トライアル版もダウンロード可能です。 使い方 使い方は非常に単純で、ユーザーはページを作成し、決められたBlocを編集していくだけです。まず、Blocを追加し、 次にBlocのスタイルを選択します。BlocはBricという要素に分かれており、各Bricは画像や動画、テキスト、リンク、見出し、フォーラム、ミュージックなどに変更可能です。 また、Bric要素の編集はサイドメニューから行います。 Bricの編集が終わったら、新たにページを増やすために右上の[+]ボタンか、メニューバーの [Page] > [New] からページを追加します。流れはメニューバーにある順番[File] > [Page] > [Bloc] > [Bric] で行えばわかりやすいと

こんにちは、湘南生まれデトロイト育ちのきんぐです。 入社してから1年半ほどWebマーケターをやった後、気付いたらエンジニアになってました。 そんなこんなで異動してから9ヶ月が経ち、合コン等で Q.「お仕事は何されてるんですか？」 A．「うぇ・・うぇぶえんじにあです。ほーむぺーじの運営してます。」 くらいは言えるようになったので、 本日は僕の相棒とも呼べる Sublime Text 2(3)のオススメプラグインを紹介したいと思います。 （そんな技術的なこと書いても、ね。） 私はSublime Text 2を使っていますが、これから導入する方はせっかくなので3使いましょう。 （当時2にあって3にはないプラグインがあった為未だに乗り換えてません） ※Sublime Textのインストール方法などは端折りますので、知りたい方は各自ggってくださいませ。 ■絶対入れるよねプラグイン ●A

ども、Web屋のQtaro（@Daisuke_9taro）です Web屋ってどんな環境で仕事してるの？ 他のブロガーさんってどんな道具使ってるの？ なんて、誰しも少なからず興味ありますよね？ 。。とか思ってたら ぼくのブログ更新のためのPC周辺環境をご紹介 | 日常ぴよぴよ 私のPC周辺環境をご紹介！デュアルモニター＆縦置きは結構いいですよ！ | love guava! おー！やっぱ面白い！！ 。。てコトで、僕はそんな特殊な環境ではない（と思う）んですが、せっかくなのでどなたかの参考になればと、PC周辺環境を晒してみようかなと思います。なんだかんだの 全15アイテム 意外とあったな。。なんて思ったものの実際使ってるものはしょうがない。 では早速いってみましょう。 【最高】Mac買うのやめてドスパラでWindowsゲーミングPC買いました。間違いなく2016年ベストバイです最近仕事で使ってい

OpenAIのWhisper文字起こし25MB制限を解決するPHP, Laravel, ffmpegを使ったファイル分割の例 OpenAIのAPIを使った音声の文字起こしは、今や多くのアプリケーションで利用されています。この記事では、特にWhisper文字起こしの25MB制限に焦点を当て、PHP, Laravel, ffmpeg…