『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。
こんにちは、freee でエンジニアをしています @tohashi です。 これは世紀末のボストンでモヒカン達と戯れたい欲求に抗いながら書かれた、 freee Engineers Advent Calendar 2015 の21日目の記事です。 今日は freee のプロダクトに欠かせない「CSS組版」と呼ばれる作業と、それを効率化するためのツール CSS-Typesetter についてご紹介します。 CSS組版とは 「バックオフィス最適化」を掲げる freee では会計 freee、給与計算 freee、会社設立 freee、マイナンバー管理 freeeといったプロダクトを展開しています。その中で欠かせないのが、各種申告や手続きのための書類をブラウザ上で確認したり、PDF形式で出力する機能です。例を挙げると、 確定申告書 扶養控除申告書 登記事項証明書交付申請書 といったものがあります。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>タイトル | サイト名</title> <meta name="description" content="ディスクリプション" /> <meta property="og:type" content="website" /> <meta property="og:title" content="タイトル" /> <meta property="og:image" content="/img/icon.png" /> <meta property="og:url" content="http://example.net/" /> <me
サイマルキャストはWebRTCになぜ必要なのか?W3C TPACで交わされたもっとも重要な議論を解説する 岩瀬 義昌(HTML5 Experts.jp編集部) 2015年10月26日から30日にかけて、札幌で「TPAC2015」が開催されました。本記事はその中でも、29日と30日に開催されたWebRTCワーキンググループの議論をレポートします。 TPACとは? TPACとは、Webの標準化団体であるW3C(World Wide Web Consortium)が開催する1週間のイベントのことです。様々な国、様々な企業からメンバーが集まり、現在のWeb標準・将来的なWebの機能(例えば、cryptoやaudio)について議論します。今回は、札幌開催であり主要なWebRTC仕様策定者が一同に日本に集結しました。 最大の議論の焦点となったサイマルキャスト WebRTCのW3C側の仕様は、まだCR(
目次 はじめに 読書メーターのスクレイピング 概要 Pythonによる実装 実装上のポイント ソースコード 結果 D3.jsによるグラフの描画 概要 実装 結果 クリスマス・キャロル(新潮文庫) 二百十日・野分 (新潮文庫) 桜の森の満開の下 (講談社文芸文庫) 雪国 (新潮文庫) 草枕 (新潮文庫) おわりに はじめに 以前の記事で、読書メーターという読書記録サービスからデータを収集して分析するということをやってみました。roomba.hatenablog.com この記事では、その応用として「本の季節感を可視化」してみます。より具体的には、Pythonによる「読書メーター」のスクレイピングによって「ある本が何月に読まれることが多いか」を調べ、D3.jsというデータ可視化Javascriptライブラリを用いてブラウザ上にグラフを描画します。 これにより、『クリスマス・キャロル』をクリスマ
前置き 最近スライドを作る時は reveal.js を使ってmarkdownベースでスライドを作ることが多いです。 サンプル スライド:http://sue445.github.io/omotesandorb-04/ リポジトリ: https://github.com/sue445/omotesandorb-04 markdownでスライドを作れるのは便利なのですが、効率よくスライドを作ろうとすると毎回下記のようなハックが必要でした markdownはhtml中に埋め込む必要があるのでmarkdownのシンタックスハイライトが効かないのが不便。そのためmarkdownだけを別ファイルにしてhtmlに埋め込むrakeタスクを作成 https://github.com/sue445/omotesandorb-04/blob/gh-pages/Rakefile htmlを確認するのに毎回手動でr
ウェブページの描画 (first-paint) までの時間を測定するツールを作った件、もしくはHTTP2時代のパフォーマンスチューニングの話 ウェブページの表示までにかかる時間をいかに短くするかってのは、儲かるウェブサイトを構築する上で避けて通れない、とても重要な要素です。 少し古いデータとしては、たとえば、ウェブページの表示が500ミリ秒遅くなると広告売上が1.2%低下するというBingの例なんかも知られているわけです。 「ウェブページの表示までにかかる時間」と言った場合、実際には以下のようないくつかのメトリックがあります。 イベント 意味
ホームページビルダーで生成された静的な HTML で構成されるサイトをリニューアルする際に JavaScript のルーターを導入して、検討したことや学んだことについて述べます。 ルーターとは このドキュメントでは、ルーターとは URL を解析して、URL のパターンごとに開発者が割り当てた関数もしくはメソッドを実行する機能をもつライブラリのことを指します。ルーターの代わりにルーティングが同じ意味の用語として使われます。 ねらい ルーターを導入することで次の項目の改善が期待されます。 保守性の向上 ページの切り替え速度の向上 保守性の向上 ルーターを導入する場合、レイアウトとコンテンツを分離することになります。HTML ファイルはただ1つの index.html に限定されます。コンテンツは別のテキストファイルとして保存して、Ajax 通信で取得することになります。 複数の HTML ファ
Emmet(旧 zen coding)を、できるだけ覚えずに入門するための、考え方を紹介します。 zen codingのときに私は一回挫折というか、面倒だなとおもって放置していた方で なんで面倒と思ったかというと、速さに気を取られて一文で(何行ものHTMLを一発で=爆速を再現するため)長い呪文のような命令文をみて「あーだめだ」って思ったんですよね。 そのあたりも踏まえて、爆速にはならないかもしれないけど、短い文で面倒なコーディングを少しだけ楽にする基本を書いてみたいとおもいます。 Emmetは、gitのようにサーバーとつないだり、Sassのようにコンパイルの設定が不要です。 必要なのは、使っているエディタにemmetのプラグインをインストールするだけ。 Atomだと、Emmet plugin Atom editorとか、sublime text だとこのあたりの記事が役に立つのかな。 (C
パソナテックさん主催コミュニティ「SHIBUYA☆LABU」のイベントの際のスライドです。 https://shibuya-labu-pt.doorkeeper.jp/events/30744 現在Web制作の現場において、コーダーとしてお仕事されているみなさん、今後のご自身のキャリアマップは描けていますでしょうか? 専門的なフロント知識を活かして技術を極めていくのか、それともディレクターとしてキャリアを積んでいくのか悩まれている方も多いかと思います。 もしディレクターへのキャリアを考えているそんなあなたに! ご自身の制作経験や強みを活かして、作れるディレクターとして活躍できるディレクション術をお伝えいたします!
★ 正規表現で、簡単に文章を検索・置換していきましょう めんどくさい作業も一発変換 作業効率アップ間違いなし★ HTMLタグの削除 <("[^"]*"|'[^']*'|[^'">])*> 解説 htmlタグ、 <p class="bk1"><a href="index.html">TOP</a></p> <p class="bk2"><a href="page0101.html">特殊文字</a></p> <p class="bk3"><a href="page0201.html">数字の検索</a></p> <!--///////////////* ページタイトル ここから *///////////////--> <div id="pagetitle"> <h3>正規表現とは?</h3> 例えば、このサイトのHTMLタグですが、ここから本文だけ取り出したい、 そんな時に使用する正規表
Webデザイナーとしてのキャリアを歩み始め1年目。基本的なスキルを学び、業務をひと通りこなせるようになったものの、先輩デザイナーと比べると、差を感じてしまうという方もいるのではないでしょうか? Webデザイナーはクリエイター系の職種であるため、「センス」が重要視されるシーンが多いです。しかし、“学び”によってスキルアップできるのもまた事実。むしろ、テクノロジーの発展が著しい業界ということから、プロとして仕事を続けるのであれば学び続けなければならないのは宿命かもしれません。 そこで、今回は「Photoshopを使ったデザイン」や「HTMLなどの言語を使ったコーディング」、「Webデザイナーとしてインプットしておきたい情報」に関する30記事をご紹介します。 Photoshopなど、デザインに関する記事10選1.良いデザインって?技術を学ぶ前に知っておきたいデザイン・レイアウトの基本的なこと こ
スマホからウェブにアクセスするユーザが増え、ウェブサイトの表示速度の高速化がより重要な制作の課題になっています。1ページもののサイトなら、フロントエンド・エンジニアが一人で実装できるかもしれませんが、ある程度の規模のウェブサイトではワークフローやサイト全体の設計にも関わってきます。また、表示速度の高速化の方法を知らなければ、最適化しやすい、より高度なデザインは実現できないでしょう。エンジニアだけでなく、デザイナーやディレクターがこういった情報を知っていれば、よりスムーズに結果を出せるウェブサイト制作ができるはずです。 ページ表示速度の改善にはいろいろな方法がありますが、この記事では一番効果がありそうなところから攻めていきたいと思います。自分もまだまだ勉強中なので、まずはfilament groupのScottさんの記事 やClearleftのJeremyさんの記事 を参考に、フロントエンド
今日もウェブの世界は平和です。 みんなが知ってる正体不明の組織によってホームページが改竄されて。 軽はずみな気持ちで軽犯罪をカミングアウトしたどこかのツイッターが炎上して。 ほんと、ウェブって平和だよね。 ええ、とっても。 悪いインターネットに毒されないように、とネット上の良識者様方が常日頃から啓蒙してくれるおかげか知りませんが。 こうして不自由も齟齬もなくテキスト情報をお届け出来て助かって… ちょ、ちょっとー。 何か変な線みたいなものが文章に被さってませんか? ギザギザな縦線が見えてるの私だけでしょうか。 もー邪魔なんですけど。 ฺด้้้้้็็็็็้้้้้็็็็็้้้้้้้้็็็็็้้้้้็็็็็้้้้้้้้็็็็็้้้้้้้้้้้้้้้้้้้้้้็็็็็็็็็้้้้้้้้้ ←って、さっきから何ですかこれ・・・! タイ語の発音記号 はい
HTML の表をスクレイピングするのは結構だるい作業です。 私は以前は、単純な HTML であれば、うまく特徴を見つけて awk や sed を作ったり、 Perl の正規表現で取り出したり、 Google Chrome のコンソールから XPath を使って取り出すような苦労をやっていました。 ところで pandas というとデータ解析用のツールとして主流ではあるのですが、 意外にも HTML からのデータ入力も可能になっていて、これが表のスクレイピングにはかなり楽だということがわかりました。 なので紹介してみます。 サンプルに使うページ 以下で示すサンプルに国税庁の所得税の税率のページを使うことにしました。 https://www.nta.go.jp/taxes/shiraberu/taxanswer/shotoku/2260.htm (2019.9.28 移転したようなので、URLを
理解しておきたい、CSSによるインラインレイアウトの仕組み(inline-block編)Inline Layout─Frontrend Conference 高津戸壮(株式会社ピクセルグリッド) この記事は、Frontrend Conferenceのセッション「Inline layout」でお話させていただいた内容を基に、連載記事(全4回)として書き起こしたものです。今回は第4回目、最終回です。 背景画像でリストのビュレットを配置した場合の問題 今回は、前回までの内容を踏まえ、主にインラインブロックについて見ていきます。まずは、以下のようなリストを「HTMLとCSSで作りたい」と思います。この時、リストのビュレットはオリジナルの画像にしたいです。 こんな時、背景画像を利用し、以下のような方法でこの見栄えを再現するという方は多いでしょう。筆者も昔からずっと、この方法で実装してきました。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く