VueとFirebaseの基本機能全部使ってぬるぬる動くポートフォリオサイトを作ったのでソースと解説 - Qiita
絵描きとかUXとかやりつつフロントもやってる「ゆき」です。ポートフォリオサイトは10年くらい前にMoveableTypeで作ったきり。最近流石に「これでフロントやってますとか言ったら絶対次転職できなくね？」と危機を感じたので0から作り直しました。 サイト： https://pf.nekobooks.com/ ソース： https://github.com/yuneco/portfolio 機能・性能・運用を考えて作った結果、VueとFirebase(Web)の機能を一通り使ったサイトが出来上がりました。これからちょっと凝ったポートフォリオサイトを作りたい方向けに、どういう目的でどの機能を使ったのか、その時のポイントはなんだったのかを共有します。 2019.4.18追記 春なので期間限定1で桜が咲くアニメーションを追加してみました。単体のアニメーションはテストページで試せます。複雑に見えるか
Vue.jsとFirebaseでOGP画像生成系のサービスを爆速で作ろう - Qiita
はじめに 質問箱や、ボタンメーカー、診断メーカー等を始めとする 「OGP画像生成系」 を ２個以上作ってそれのベストプラクティスがわかってきたので、共有したいと思います。 宣伝 この技術を使ったサービスを実稼働２日ぐらいで作りました！ 使い方は簡単です！ メッセージカードを書いて、Twitterにシェアするだけ。 #嵐ありがとう OGP画像生成系サービスとは？ 質問箱 みんなのボタンメーカー （｡･ρ･）ｵｼﾃﾐﾃ キズナアイな気分のときに押すボタンを作りました！みんな押してね！#キズナアイな気分のときに押すボタン#みんなのボタンメーカー https://t.co/2mzJUE48zj — Kizuna AI@hello,2019‼︎ (@aichan_nel) 2019年1月29日 「ツイッターでつぶやけるボタン」を簡単に作成できるサービスをリリースしました【個人開発】 すごくいいサービ
SVGで手書き風アニメーションを実装する方法 | Will Style Inc.｜神戸にあるウェブ制作会社
こんにちはアートディレクターの奥田です。 最近はハンドドリップコーヒーにはまっています。 手軽にペーパードリップですが思っていたより手間もかからず抽出している時間がいいリラックスタイムにもなってオススメです。 コスパでいくと業務スーパーの「ラグジュアリッチコーヒー」がいいのですが味はハマヤのコーヒーが個人的には好きです。 もっと他のコーヒーも試してみたいですね。 さて、ウェブサイトにより強烈な印象を与えるにはアニメーションが欠かせませんが、よくあるSVGアニメーションではつまらなく感じることはありませんか？ 今回は少し個性的な印象を与えることができる手書き風アニメーションの実装方法をご紹介いたします。 Table of contents今回実装したいもの用意するものマスク用のレイヤーをつくるSVGでマスクを作るvivus.jsでアニメーションさせるさいごに今回実装したいものまずは今回の完成
macOS 10.14 MojaveおよびiOS 12では「OpenType-SVG フォント」がサポートされるもよう。
macOS 10.14 MojaveおよびiOS 12では「OpenType-SVG フォント」がサポートされるようです。詳細は以下から。 OpeyType-SVGフォント(カラーフォント)はベクター形式のSVG画像でOpenTypeフォントの字形の一部を表すフォント形式で、Adobe PhotoshopやIllustratorで扱われたり、絵文字フォント「EmojiOne」で利用されていますが、 OpenType-SVG は、OpenType フォントの字形のすべてまたはほんの一部が SVG（Scalable Vector Graphics）アートワークとして表されるフォント形式です。これにより、1 つの字形で複数のカラーおよびグラデーションを表示できます。こうした機能から、OpenType-SVG フォントを「カラーフォント」とも呼んでいます。 OpenType-SVG フォントを使用
IllustratorとかのSVGのパスをUIBezierPathのコードに変換するツール作ってみた - Qiita
はじめに iOS/macOS向けのアプリ開発でアイコンやボタンなど簡単な図形を描きたい場合に、UIBezierPathやNSBezierPathを使います。毎回パスを描く際に、紙に図を書いて頂点の相対距離などを計算して出していました。そこで、IllustratorなどのSVGのパスをそのままUIBezierPathにしてしまおうと思いました。 Google先生に質問してみると、すでに目的を達成していそうなものがありました。が、全てのパス形式に対応していた様ではなかったので自分なりに作り直してみました。 できたツール 上のテキストエリアにSVGのパスデータを貼り付け、目的の変換ボタンを押すことで下のテキストエリアにコードが生成されます。iOS開発の場合はUIBezierPathですが、macOSの場合はNSBezierPathなので、そこも対応してみました。 補足 ドーナツ型などくり抜き型に
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
