デザイナーのイラストノート - イラストや参考にしたサイトのご紹介、アプリケーションの技術向上を目指すブログです。Profile twitter Facebook website spicagraph(スピカグラフ)角田綾佳 大阪枚方でweb・DTPデザイン制作をしているフリーランスです。イラストや参考にしたサイトのご紹介、アプリケーションの技術向上を目指すブログです。ツッコミ・アドバイスお待ちしてます！
グリグリ動くUIをVueとSVGでサクッと書く - No Regrets in Bathing
これは Vue.js #3 Advent Calendar 2017 – Qiita 4日目の記事です。 こんにちは。SVGで色々なコンポーネントを作っているものです。最近の作品は下記のような感じです。 Webでグリグリ動くUIを作りたい！！という一心でやっています。 これらはほとんどSVGとVueの組み合わせのみで作っています。依存が少ないというのは大事で、ライブラリ間の相性でハマったり、いろんなドキュメント間を往復することがなくなります。 Webでグリグリ動くUIを作るのは基本的にめんどくさいです。jQuery pluginを駆使して作るのも闇が多いですし、divやcanvasをゴリゴリするのも結構手間がかかります。 ですが、最近はSVGで高度なUI実装されることが増えてきた気がします。特に自分が衝撃を受けたのは、CacooがFlashからSVGにスイッチしたことです。 nulab-i
Made By Tung – Computer Graphic Studies
Graphic Designs Fundamentals This video includes data related to line, shape, form etc. https://madebytung.com Continue Computer Parts Explained In this video, will discuss the important parts of a computer such as video card and memory card. https://madebytung.com Continue Gow Hastings Architects Website Businesses and professionals across various industries use online websites to showcase what t
ウェブページを1秒台で表示させる原理と方法 | Philosophy Guides
可能な限り最新の情報を反映していますが、追いつけていないこともあります。本サイトに採用していても、記事に反映できていない設定もあります。ページのソースを読んでいただくと、参考になる箇所があるかもしれません。 ウェブページの高速化に関するテクニックは、ネットで検索すれば簡単に見つけることができます。優れた情報も数多くありますが、｢CSSとJavaScriptはminify（ミニファイ）しておけばOK！」のような都市伝説も少なくありません。 そこで、ここでは本サイトのデザインリニューアル時に施した対策をもとに、一歩進んだウェブページの高速化の方法と、それを支える原理について、できる限り分かりやすく説明したいと思います。フロントエンジニアやデザイナーの方からすれば「んなもん知っとるわ！」な情報なのかもしれませんが、都市伝説を駆逐すべく、私なりの仕方で解説（≒加勢）したいと思います。 初めに結果を
リニューアルした日経電子版が高速すぎてヤバイ件｜こんぴゅ
日本経済新聞は国内を代表する経済誌だ。その電子版はwebでの継続課金を大成功させ、いまや50万以上の有料会員を擁するモンスターサイトだ。 その日経電子版が11月6日に全面リニューアルしたのだが、公開後、web業界がにわかにざわついた。表示速度が爆速だったのだ。日経公式もモバイルで2倍の表示速度を達成したと堂々と宣言していた。 webサービスは継続率こそ神KPIで、その継続率には速度が大きく影響する。 これはチェキらないとヤバイと感じ、友人のkitakさんとスピードの秘密を調査してみた。 Fastlyをコンテンツキャッシュに使う殆どのデータはFastlyを経由して取得されていた。Fastlyは最近注目を集めているCDN（世界中にエッジサーバーを配置し、高速にコンテンツを配信するサービス）で、非常に高機能でユニークなサービスだ。 一般に、CDNはいったん世界中にコンテンツをばらまくと、それを無
デザインアートの情報サイト[JDN]ジャパンデザインネット
つくる、使う、考える人のデザイン情報サイト「JDN」。デザインをキーワードに、国内外のニュース、インタビュー、注目のデザイナー紹介、イベント情報など、デザインを“もっと近く”する情報を発信しています。
![デザインアートの情報サイト[JDN]ジャパンデザインネット](https://cdn-ak-scissors.b.st-hatena.com/image/square/b3701b5e7fbf3e7d6d90873d2d2683059f44f9dd/height=288;version=1;width=512/https%3A%2F%2Fwww.japandesign.ne.jp%2Fwp%2Fwp-content%2Fuploads%2F2019%2F08%2Fjdn_ogp_190820.jpg)
ビジュアル・プログラミングの勉強方法｜深津 貴之 (fladdict)
ビジュアルアートの教本、「Generative Design」が、ついに再販されました！長らく欠品でプレミアムがついていた一品です。 以下はGenerative Designの序文への寄稿を、一部加筆修正したもの。表現者、技術者それぞれが、アートとプログラミングを学ぶための方法です。ビジュアルコーディングに興味のある人はどうぞ。（あと僕の落書きはこちらから見れます） Generative Design 序文Generative Designの日本語版が、いよいよ出版されました。本書は、プログラミングによる視覚表現の「最高の教本」です。この素晴らしい本の序文として、何を書くべきか非常に悩みました。結果として、歴史やカルチャーの話をするよりは、この本の読者に最も役に立つであろうことを、書くことにしました。表現者と技術者がビジュアル・コーディングをどう学習すべきか、についてです。 表現者が技術を
自己紹介と過去ログ | うめのんブログ
うめと申します。自分が欲しいなと思ったアプリを作って、こつこつアプデしてます。趣味は漫画、読書、海外ドラマ、音楽、ドライブ、ゲームなど。 作ったアプリ ListTimer – 爆速セットできるタイマー。音無しでも使える。 Zeny – 爆速入力できる家計簿。シンプルでサクサク動く。 Voicepaper – 通勤や運動中に小説やブログをながら聞き。 Taxnote – 帳簿入力アプリ。2021年、freee社に売却。 たくさん作って、ある程度長くやってきたのが上記の４つ。 今までの経緯 昔はアイデアばかりで脳内の妄想が膨らんでいましたが、自分で作れたほうがいいなとプログラミングを勉強しました。(初心者からサービスを作るまで) 実は、プログラミング向いてないわ！と２回ほど挫折した��あと、３回目で軌道に乗りました。(挫折確率を下げるプログラミングの覚え方) 個人で全てやるので、企画、デザイン
請求書などのPDF書類に電子印鑑を押す方法
本連載は、Adobe Acrobat DCを使いこなすための使い方やTIPSを紹介する。第14回は、請求書などのPDFファイルに電子印鑑を押してみる。 電子印鑑機能の使い方 最近は、請求書などのビジネス書類をメールで送ることが増えてきた。しかし、印刷してハンコを押し、スキャナーで取り込んでPDFファイルを作成しメールに添付するなら、ほとんど手間は減っていない。そこで『電子印鑑機能』が活躍する。Acrobat DC上でハンコを押せれば、印刷とスキャンの手間がかからないし、紙を無駄にすることもない。 まずはユーザー情報を確認する。「編集」メニューから「環境設定」を開き、「ユーザー情報」をクリック。姓名を確認しよう。また、会社名の印鑑を利用する場合は、会社名と電子印鑑に表示する会社名を登録する。電子印鑑には3～4文字を表示するのがちょうどよいので、入りきらないなら省略形などを入力する。 次に、「
初心者でもほぼ無料でGitHubの使い方を学べるコンテンツ7選 - paiza times
Photo by Luke Anderson こんにちは。谷口です。 開発業務未経験からITエンジニアを目指す方にとって、プログラミングだけでなく、習得しておきたいのがGitHubの使い方です。 GitHubは、Gitの仕組みを利用し、オンライン上でコードを管理できるサービスです。 github.com 複数人での共同作業に必要な機能もそろっており、個人・企業問わずにリモートリポジトリの作成・公開もできるため、個人・学校・企業など、さまざまな場面で広く使われています。 特にWebサービスやアプリ開発をしている企業では、ユーザーの反応を見てすぐに機能追加するなどスピード感のある開発をしていくために、多くがGitHubを使った開発フローを実践しています。そうした企業のエンジニア職を目指す人にとっては、GitHubの使い方の習得はほぼ必須と言えるでしょう。 そこで今回は、プログラミング初心者の方
子テーマを作ってWordPressの既存テーマをカスタマイズする方法
2017年5月1日 Wordpress いまやブログだけではなく、会社紹介のWebサイトやポートフォリオサイト、ECサイトに至るまで、様々なタイプのWebサイトで利用されているCMS、WordPress。すでにデザイン・コーディングが済み、自由に利用できる既存のテーマも豊富に配布されています。今回はそんな既存のWordPressテーマを使うメリットや、子テーマを作成してカスタマイズする方法を紹介します。 ↑私が10年以上利用している会計ソフト！ WordPressの既存テーマを利用するメリット ちょっと検索すればたくさんのWordPressの既存テーマが見つけられます。既存テーマを利用すると、どんなメリットがあるのでしょうか？ 制作時間を短縮できる こういった配布されているテーマを使うメリットは、なんといっても制作時間の短縮。豊富なテーマの中には、自分の思い通りのレイアウトのものも見つけら
日本らしさを表現！CSSで文字の縦書きに挑戦！
2017年8月24日 CSS 日本の書籍は元々上から下、右から左という縦書きで書かれてきました。しかしWebサイトでは横書きが基本なので、縦書きを取り入れることで日本らしさやWebサイトの個性を引き立てられます。かつてのWebサイト制作では縦書きが難しく、多くの場合画像を使って表示されてきましたが、CSSでも縦書きが実装できるようになりました！今回はそんな縦書き表現に注目したいと思います！ ↑私が10年以上利用している会計ソフト！ 縦書きにするには 縦書きを設定するのはとっても簡単！縦書きにしたい箇所にCSSで writing-mode: vertical-rl; を記述します。この「vertical」が縦、「rl」が右から左（Right to Left）という意味です。 また、IE用には別の書き方になります。 -ms- というベンダープレフィックスを付け、tb-rl（上から下、右から左＝
かゆいところに手が届く！Flexboxを使った便利な小技
2017年9月14日 CSS 要素を横並びにする時に便利なFlexbox（フレックスボックス）。みなさん、使いこなせていますか？今回はFlexboxを使ったちょっとした小技や、ハマりがちなポイントとその回避例を紹介します！ ↑私が10年以上利用している会計ソフト！ 画像とテキストを互い違いに表示 See the Pen Flexbox – row-reverse tip by Mana (@manabox) on CodePen. まずは画像とテキストが入るボックスを作成。それらを囲む .box という div を用意しました。 HTML <div class="box"> <img src="images/iphone1.jpg" alt=""> <div class="box-text"> <h2>見出しが入ります</h2> <p>テキストが入ります</p> </div> </div>
Flexboxで決まり！ | Webクリエイターボックス
2017年5月25日 CSS FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。今回はそんなFlexboxの魅力と使いドコロを、デモ付きで紹介していこうと思います！ ↑私が10年以上利用している会計ソフト！ 対応ブラウザー Can I use…で紹介されているように、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要です。IEについては11から正式に対応。IE10にも対応していますが、書き方が
「サラリーマンブロガー」こそ攻守最強 （ヨッピーの本が出ました） - ヨッピーのブログ
こんにちは。ヨッピーです！ 本を出したので宣伝させてください！！！ www.amazon.co.jp Kindle版もあるよ！ Kindle版は今日配信開始で、本は明日から届くはず！ 早速レビューも書いて頂いててめちゃめちゃ褒められてる！ 今度土下座して足とかペロッペロ舐めてやるからな！ありがとな！ ちなみに、あがってきた表紙を見て「情報商材屋っぽさすごいな」とか思ったんですけど、 これくらいキャッチーじゃないと売れないのかもしれない。 そもそもこの本、売れる、のか…？ ちなみにこの本はビジネス書、特にサラリーマン向けの本で、「なんで雑魚ライターのお前がサラリーマンを語れるんだよ」って言われそうなので一応言っておくと、僕はライターになる前までは商社で営業職、つまりはサラリーマンをしていたのである。 今でこそ年がら年中、Tシャツにサンダルといった、やる気ゼロパーの昭和のヒッピーみたいな恰好で
32歳女、正社員の仕事辞めました 好きなことで幸せに生きます - よりどりみどり
親愛なる皆さま！ この度、みどり、 お仕事を辞めました。 俗に言う会社員卒業ってやつ！ 「あーやっちゃったね」と思う方もいれば、 一方「あれ？まだ辞めてなかったの？」と感じる方もいるかと思います。 厳密に言えばまだ手続き中なのですが、会社とも話がつき、すでに会社には行っておらず、実質辞めた状態です。 みどりは大胆で行動的に見えるかもしれませんが、内心はものすごく臆病のチキンで、心配性。「石橋を叩いて叩いて叩き割る」と上司に言われたこともあるくらい（笑） 仕事は超ホワイトな大手外資企業の正社員。 同年代の平均的な一般男性よりも、十分に稼ぐことができる状況でした。 そんなみどりが、一体どうして会社を辞めたのか。 折角なので、その理由や経緯、これからしていきたいことなどを、つらつらと書いてみようと思います。長いよ。 ※この記事のタイトル&導入は、同じく会社員卒業したヒトデさんの記事を超パロってま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Photoshop VIP
POSTD | ニジボックスが運営するエンジニアに向けたキュレーションメディア
GitHub - everyleaf/el-training: 株式会社万葉の新入社員教育用カリキュラム
GitHub - thedaviddias/Front-End-Checklist: 🗂 The perfect Front-End Checklist for modern websites and meticulous developers
