Mach3.laBlog

SVG Colk Board で Vuex を使ってみた話

この記事は賞味期限切れです。(更新から1年が経過しています)

先日リリースしたWebアプリ「SVG Colk Board」の紹介と、 その中身の話を少し綴っておきます。

SVG Colk Board を作った話

SVG Colk Board

これは何?

Illustrator 上で図をコピーしてテキストエディタにペーストすると、SVGが出力されます。 しかし、そこで出力されるSVGは不要な記述も多く、末尾に付加されている謎文字のおかげで正常に表示されません。

これらをクリーンに最適化する為に作ったのが SVG Colk Board です。

使い方

  1. Illustrator上で図をコピーする
  2. それを SVG Colk Board 上でペーストする
  3. 配置された図を選択すると「SVG」「DataURI」ボタンが表示される
  4. 「SVG」「DataURI」のボタンをクリックすると、それぞれ最適化された結果がクリップボードにコピーされる
  5. 結果をテキストエディタにペースト

  • ペーストした図のデータは localStorage に保存されるので、ブラウザを閉じた後も保持されます
  • つまり貼り付けられる図の数は localStorage の容量依存です
  • もちろんブラウザをまたいでは保持されません

SVG Colk Board の中身

このアプリケーションは Vue.js で作られています。 そして Vue と共に利用しているのが Vuexvuex-persistedstate です。

Vuex

ここでは詳しい説明を省きますが、 Vuexとは、中規模以上のアプリケーション開発向けの状態管理ライブラリで、 公式ではこのように説明されています。

Vuex は Vue.js アプリケーションのための 状態管理パターン + ライブラリです。 これは予測可能な方法によってのみ状態の変異を行うというルールを保証し、アプリケーション内の全てのコンポーネントのための集中型のストアとして機能します。
https://vuex.vuejs.org/ja

簡潔に言うと、状態管理にストア(store)という概念を導入する為のライブラリです。 以下、ものすごくざっくりとした説明をします。

Vue.js のコンポーネントは各々が持つ data の値を基にビューを構築・描画し、必要に応じて処理を行います。 store というのはその data に似た振る舞いをしますが、 data が値へのアクセスで直接変更出来るのに対し、 store はセッターのようなメソッドを介してのみ値を変更する事ができ、 それにより値を保護し、変更を集中管理する事ができます。

ざっくりしすぎていてあまりイメージし辛いかと思いますので、下記ページを参考にしてください。

先に述べた通り、中規模以上のプロジェクトでなければあまり恩恵にあずかれず、冗長になるだけと感じるかもしれません。 しかし、Vue.js を採用するという事は、ある程度の規模のあるプロジェクトとなる予測が立つとも言えるので、 転ばぬ先の Vuex を問答無用で入れてしまうのも選択肢の一つだと考えられます。

vuex-persistedstate

今回作った様なミニマムなアプリケーションでは正直Vuexは不向きな気がします。 それでもVuexを導入したのは、半分はVuexで習作してみるため、 もう半分はこの vuex-persistedstate を使うためです。

vuex-persistedstate は、Vuexのストアの中身(state)をまるっとlocalStorageに保存してくれるプラグインです。 Vuexでストアを書く時にちょっとインポートしてやれば簡単に導入できます。 (下記はREADMEのコードそのままです)

import createPersistedState from "vuex-persistedstate";

const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState()]
});
Code language: JavaScript (javascript)

これで(同じブラウザで見る限りは)ページの状態を永続化できるという寸法です。 なんて便利なんでしょうか!

まとめ

もともとはイラレが吐き出すSVGを最適化する事しか考えてなかったのですが、 ちょうどよいお題だと思って Vuex を使って習作してみたというお話でした。 このアプリで使用している netlify の知見も少しずつたまり始めたので、それはまたいずれ。

コメント

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Owenmon0824ea95c0c62d66ec5964a9c86ba902
Your blog beautifully integrates both personal insights and professional expertise catching my attention and sparking curiosity. Id love to see you discuss the fascinating intersection of psychology and technology specifically areas like artificial intelligence reactions or neuro-technology developments. Your knack for juggling depth and readability is truly remarkable. Thank you for consistently offering such engaging perspectives—Im eagerly awaiting your next post Web Presence: https://talkchatgpt.com чат gpt
Charleswhantd2b8bb6d0a02a0f0ca50c7733ad59b59
Актуальный промокод укажи промокод получи бонус. Получите максимум при регистрации в одной из букмекерских контор. Mostbet предлагает сейчас 35000 рублей всем новым игрокам букмекерской конторы. промокод на сегодня на ставку бесплатную. Отличительной особенностью букмекерской конторы Mostbet является возможность совершения ставок по промокодам которые предоставляются бесплатно. В БК Мостбет промокод – это универсальный инструмент при работе с бонусами и акциями. Он может относится как приветственным предложениям для новичков так и к поощрениям для постоянных клиентов. Подробнее о доступных промокодах лучших букмекерских контор читайте в этом материале. Выделим несколько основных методов которые позволят получить промокод Mostbet.
Rentmumsdfecbdce3754ced31e52ccc83a79d6ae
1. Вход тут: https://kr34.com 2. Вход тут: https://captcha-kra34.com Onion: kraken2trfqodidvlh4aa337cpzfrhdlfldhve5nf7njhur7instad.onion Кракен маркетплейс является одним из самых популярных и надежных площадок в даркнете предлагая пользователям широкий ассортимент товаров и услуг. Если вы ищете безопасный и анонимный способ совершать покупки то Кракен маркетплейс — это отличный выбор. В этой статье мы подробно разберем как работает площадка как на нее попасть через официальные ссылки и зеркала а также какие преимущества она предоставляет. Для начала работы с Кракен маркетплейс вам понадобится кракен ссылка или кракен зеркало. Поскольку основной домен может быть заблокирован площадка регулярно обновляет свои зеркала. Официальные ссылки всегда можно найти на kr34.com либо на captcha-kra34.com в случае блокировки - 35 36 и т.д. Эти домены обеспечивают безопасный вход на Кракен маркет без риска попасть на фишинговый сайт. Кракен вход осуществляется через специальный переходник который шифрует соединение и защищает ваши данные. Это особенно важно для тех кто ценит анонимность. После перехода по кракен ссылка или кракен зеркало вам нужно будет ввести логин и пароль либо зарегистрироваться если вы новый пользователь. Кракен маркет предлагает огромный выбор товаров: от цифровых товаров и документов до электроники и веществ. Площадка работает по системе гарантийных сделок что минимизирует риск мошенничества. Продавцы проходят верификацию а отзывы покупателей помогают выбрать надежного поставщика. Одним из главных преимуществ Кракен маркетплейс является его стабильность. Даже при блокировках основного домена kr34.com и другие зеркала позволяют пользователям всегда оставаться на связи. Кроме того площадка поддерживает различные способы оплаты включая криптовалюты что делает транзакции максимально анонимными. Если у вас возникли проблемы с доступом попробуйте использовать captcha-kra34.com или поискать актуальные зеркала на тематических форумах. Важно помнить что только официальные ссылки такие как captcha-kra34.com и kr34.com гарантируют безопасность. Кракен маркетплейс продолжает развиваться предлагая пользователям новые функции и улучшенную защиту. Если вы ищете надежную площадку с большим ассортиментом и высоким уровнем безопасности то Кракен маркет — это то что вам нужно. Не забывайте проверять актуальные кракен зеркала и соблюдать правила анонимности для безопасных покупок. Таким образом Кракен маркетплейс остается одним из лидеров в своем сегменте предоставляя пользователям удобный и безопасный способ совершать сделки. Используйте только проверенные kr34.com домены и следите за обновлениями чтобы оставаться в курсе новых возможностей площадки. 1. Вход тут: https://kr34.com 2. Вход тут: https://captcha-kra34.com
Casino8ae6e9a58e78a98114402fba577098fb
Blending retro aesthetics with cutting-edge technology, Pin-Up Online- https://www.tommyhilfigerca.ca/ have carved out a distinctive niche in Canada’s gaming landscape. With their nostalgic 50s–60s decor and a wide selection of games, these casinos are becoming go-to destinations for Canadians and tourists alike. From the streets of Edmonton and Alberta to the heart of Ottawa and Manitoba, the Pin-Up brand is reshaping the local gambling scene. This review highlights what makes the Casino Pin-Up concept so appealing, explores its signature features, and dives into top-performing games like Aviator and Sweet Bonanza.

Step Into the Casino PinUp Universe

The hallmark of every Pin-Up Casino in Canada is its retro-chic interior. Visitors are transported back to mid-century glamour, where vintage posters, pin-up art, and bold neon signs set the tone. Staff uniforms are styled to match the era, enhancing the immersive feel of the space. Whether you're stepping into a land-based location or logging on to the online platform, the atmosphere oozes sophistication and playful nostalgia.

Games That Blend Past and Present

Despite their vintage flair, PinUp venues offer an impressive lineup of contemporary games. Players can enjoy timeless table games like poker, roulette, and blackjack, or dive into high-tech video slots with immersive sound and animation. Whether you're into classic three-reel slots or crave something flashier, you'll find it at Casino PinUp — with bets suited for any bankroll.

Fan Favorites: Sweet Bonanza & Aviator

Two games that consistently stand out in the Pin-Up Casino Online catalog are Sweet Bonanza and Aviator. Sweet Bonanza brings a candy-coated experience to the screen with vibrant visuals, a catchy soundtrack, and rewarding bonus features — making it a favorite among casual players and seasoned gamblers. Aviator, meanwhile, delivers a thrilling ride through the skies, combining fast-paced action with smart strategy. Both games capture the spirit of fun and adventure that defines the Pin-Up Casino Canada identity.

Changing the Canadian Casino Game

Casinos like Pin-Up Casino Canada are not just venues — they’re experiences. Their retro-meets-modern vibe is bringing a fresh perspective to gaming in Canada. By targeting a diverse audience that includes nostalgic boomers, curious Gen Xers, and entertainment-hungry millennials, the brand is revitalizing interest in casino entertainment. From Manitoba to Ottawa, these casinos are helping redefine the landscape of Canadian gambling.


Pin-Up Casino is more than a gaming hub — it’s a lifestyle destination. Fusing the glamour of the past with the innovations of the present, it creates an experience that’s visually captivating and thrilling to play. With continuous expansion and a growing fan base, PinUp Casino is well-positioned to become a major force in the future of Canada’s gambling industry.
WilliamAcighf246db65beb0c47448c99fd45f6a560c
- сеансовые cookie-файлы https://tribatron.ru/product/reshjotka-ventiljacionnaja-150h300/ Это временные файлы cookie которые хранятся на устройстве пользователя до того момента когда пользователь покидает Сайт НОЭЗ; 2 https://tribatron.ru/product/nastennaja-veshalka-s-derevjannym-sharikom-nvd-1/ 4 https://tribatron.ru/product/kronshtejn-150-150/ Продавец осуществляет продажу Товаров через Интернет-магазин на территории Российской Федерации и стран СНГ https://tribatron.ru/wishlist/ ПОЛЬЗОВАТЕЛЬСКОЕ СОГЛАШЕНИЕ https://tribatron.ru/product/nastennaja-veshalka-s-derevjannym-sharikom-nvd-2/ 495 229-78-87 ? Москва; 342 214-09-26 ? Пермь; 34271 7-10-02 ? Кунгур https://tribatron.ru/product-category/katalog/aljuminievyj-profil/ugolok-aljuminievyj/ 8 https://tribatron.ru/product/nastennaja-veshalka-s-derevjannym-sharikom-nvd-1/ 5 https://tribatron.ru/product/nastennaja-veshalka-s-derevjannym-sharikom-nvd-6-garmonija/ Если у Покупателя возникли сложности с приобретенным у Продавца Товаром он может обратиться в отдел по работе с клиентами Интернет-магазина по указанным адресам электронной почты и телефонам https://tribatron.ru/product/kronshtejn-200-200/ Туда же предоставляются фотоматериалы с обнаруженными недостатками https://tribatron.ru/product/nastennaja-veshalka-na-derevjannoj-planke-s-dvojnym-krjuchkom-komfort-2/ в Розничном магазине в момент осуществления Заказа или в момент передачи Товара Покупателю; путем передачи денежных средств курьеру Продавца или платежному агенту Продавца https://tribatron.ru/product/ruchka-okonnaja-ro-1/
Kevinboush67414c5aba25ecdcf8991df5c2af79cb
Muchos jugadores en Chile eligen Pin-Up Casino porque aqui no solo encuentras tragamonedas nuevas y clasicas, sino tambien porque es un casino regulado, donde cada detalle esta pensado para que puedas jugar sin preocupaciones.

Desde el registro, que es rapido, sencillo, gratuito, hasta el momento de cobrar tus ganancias, todo funciona de manera agil, transparente, profesional. Con solo registrarte en Pinup Chile, ya puedes acceder a bonos de bienvenida, saldo extra, giros gratuitos y promociones especiales, que te permitiran comenzar a jugar con ventaja desde el primer giro.

Si deseas empezar a jugar ahora mismo, simplemente visita el sitio oficial de Pin-Up Casino Chile https://pinupcasinopinup.cl/ para obtener tus bonos de bienvenida inmediatamente.
A medida que exploras el catalogo de juegos, veras que hay miles de tragamonedas. No importa si prefieres el casino en vivo, aqui siempre hay algo nuevo para ti.

Muchos jugadores destacan el sistema de pagos rapidos, retiros inmediatos, depositos seguros. Y es que Pin-Up Casino Chile ofrece multiples metodos adaptados a los jugadores chilenos, permitiendo que puedas cobrar tus ganancias sin demoras.

Ademas, siempre tendras acceso a soporte profesional, para resolver cualquier duda o consulta de forma rapida, amable, eficiente. Ya sea para resolver un problema tecnico, consultar sobre promociones, o solicitar ayuda con un retiro, el equipo de Pin-Up Chile siempre esta disponible.

Lo mejor es que puedes jugar donde quieras, cuando quieras, desde cualquier dispositivo. La plataforma esta completamente optimizada para moviles, tablets, computadoras, laptops, cualquier pantalla, para que puedas disfrutar de tus juegos favoritos en casa, en el trabajo, o mientras viajas.

Para muchos jugadores en Chile, Pin-Up Casino se ha convertido en el lugar ideal donde vivir la emocion del casino online. Las ofertas permanentes, promociones personalizadas, programas VIP y constantes actualizaciones de juegos hacen que cada dia tengas nuevas razones para regresar.

Si estas buscando un casino con bonos atractivos y juegos de calidad, Pin-Up Casino Chile es el lugar donde la diversion y el dinero real se encuentran.

Hoy mismo puedes registrarte, recibir tu bono, girar tus primeros slots y comenzar a ganar. La experiencia de casino online en Chile empieza aqui, en Pin-Up.
Buket_zdet665dc967bacab98e0bd846ca9ae03836
Букет гортензий с бесплатной доставкой в Москве — это отличное решение для тех кто хочет удивить своих близких. Гортензии в букете символизируют любовь и дружбу что делает их идеальными для подарка. Букет гортензий с бесплатной доставкой в Москве. Вы можете заказать доставку букета гортензий в любое время и в любое место в Москве. Каждый букет гортензий создается мастерами флористики с любовью и вниманием. Цветы гортензии великолепно смотрятся как в одиночных букетах так и в смешанных композициях. Букет гортензий отлично подойдет как для празднования так и для украшения дома. Не упустите возможность порадовать себя или своих близких роскошным букетом гортензий с доставкой. Сделать заказ букета гортензий с доставкой очень просто и быстро.
Bukety_qqMrd11008590c6812d4bf5928f82b07cb4a
Хризантемные букеты с доставкой по Москве без дополнительных затрат — это отличное решение для всех кто хочет порадовать близких. Эти цветы славятся своей необычной формой и широкой палитрой оттенков. С помощью хризантем возможно формирование красивых цветочных ансамблей. Букеты из хризантем с бесплатной доставкой по Москве Мы предлагаем разнообразные варианты цветочных композиций. Все букеты создаются с вниманием к деталям. Мы ценим уникальность вашего подарка и наши букеты это подчеркивают. Вы можете заказать букет онлайн и выбрать время доставки. Мы обеспечим доставку вашего букета своевременно и качественно. Наши курьеры заботятся о том чтобы цветы прибыли в идеальном состоянии. Выбирая хризантемные букеты вы дарите себе и близким радость и красоту. Не упустите возможность порадовать своих близких цветами. Свяжитесь с нами и мы с удовольствием поможем вам выбрать лучший букет.
Arthursligo1aedb8d9dc4751e229a335e371db8058
Lo mas importante al usar el codigo promocional 1win: https://buscamed.do/ad/pgs/?1win_c_digo_promocional_1.html es introducirlo a tiempo. Este codigo te da derecho a recibir un bono del 500 por un importe total de hasta 1025.
Ronaldabats6fee5d478e85a56c75d3dacabe33386f
I’ve been using cordyceps tincture daily in regard to during the course of a month for the time being and I’m truly impressed before the absolute effects. They’ve helped me judge calmer more balanced and less solicitous everywhere the day. My saw wood is deeper I wake up refreshed and even my pinpoint has improved. The quality is outstanding and I cognizant the common ingredients. I’ll obviously keep buying and recommending them to person I recall
Zakazat_dpOi933ce510645d2e2e27e1f754d85e595e
Заказать цветы с доставкой в Москве Доставка цветов в Москве – это удобный способ порадовать близких. Множество компаний предлагают услуги доставки цветов в Москве что дает возможность выбрать подходящий вариант. Важно заранее решить какой букет вы хотите заказать. Рекомендуется рассмотреть как стандартные варианты так и более креативные решения. При заказе цветов стоит учитывать сроки доставки а также другие предлагаемые услуги. Многие сервисы предоставляют возможность дополнить букет открыткой или другими мелкими подарками. Очень важно доверять только проверенным компаниям с положительной репутацией. Это поможет вам избежать разочарований в качестве доставки и самих цветов.
Jessicaacuctc4dd33face1f21508e01cd1ac7fde964
progressive jackpot online slots online scratch cards real money best online roulette real money online keno real money online casino sports betting progressive jackpot online slots progressive jackpot online slots online slots USA real money
WilliamFribed2b8bb6d0a02a0f0ca50c7733ad59b59
Промокод при регистрации Mostbet на 35000 рублей. Данный промокод Мостбет нужно ввести при регистрации в соответствующее поле. Mostbet промокод при регистрации можно использовать только 1н раз в рамках одной учетной записи но вы можете делиться им со своими друзьями. В mostbet регистрация по номеру телефона является бесплатным и вторым по простоте способом создать личный аккаунт. Данный способ предусматривает наличие мобильного устройства а также активной сим-карты чтобы пользователь мог получить сообщение в котором его будут ждать данные для входа. После того как данные будут получены останется ввести логин с паролем в соответствующие поля. Воспользуйся новые промокоды получи бесплатную возможность увеличить свой первый депозит до 35000 рублей в БК Mostbet. Промокоды Mostbet актуальные сегодня. На игровой платформе БК «Mostbet» функционирует бонусная программа способствующая привлечению новых игроков и мотивации делать больше ставок для зарегистрированных пользователей. Бонусная программа содержит множество различных бонусов которые каппер может активировать при помощи специальных промокодов. 125 бонус от первого депозита на ставки. Получай бонус до 125 но не превышающий 35000 рублей на ставки от Mostbet. Переходим на сайт букмекера.
Jamesruick1aedb8d9dc4751e229a335e371db8058
Lo mas importante al usar el codigo promocional 1win: http://cvaa.com.ar/06inc/articles/1win_c_digo_promocional_1.html es introducirlo a tiempo. Este codigo te da derecho a recibir un bono del 500 por un importe total de hasta 1025.
Danieldix561ccf5ea63a5f8b0cf8b8f3ebf1b45c
<b>Trademark modern</b> pills at huge orgasms - expanded and greater powerful orgasms!
<b>ever viewed</b> earlier - greatly current in health discipline research!
<b>Completely safe</b> and potent - likewise enhanced passion as still increased penile stiffness!
<a href="https://psee.io/7qlgd7" rel="nofollow ugc"><b>Enhance volume in personal releases now right now!</b></a>
Danielelego97ba50a9aedf524210a75ae90704ba48
Your Guide to Pin-Up-Canada.bet

If you're looking for a complete online betting experience in Canada, Pin-Up-Canada.bet offers everything a bettor needs. With a wide range of sports betting, this site delivers unmatched variety for every type of player.

At Pin-Up Canada Online, you’ll find exciting casino slots. Whether you enjoy hockey odds, Pin-Up-Canada.bet provides huge payouts.

From the moment you create your free profile, you unlock free bets to kick-start your journey. New members at Pin-Up Canada Online Platform receive rewarding first deposit offers immediately after registration.

Whether you’re playing from Quebec City, Pin-Up-Canada.bet offers secure withdrawals that ensure safe transactions.

The entire platform is fully optimized for mobile and desktop. Players can play casino games on mobile with seamless navigation.

Every day, more Canadians experience the thrill at Pin-Up Canada and enjoy huge jackpots. Whether you're into esports tournaments, Pin-Up-Canada.bet delivers top-tier entertainment.

Create your account at https://pin-up-canada.bet/ and experience Canada’s best online betting platform!
Richardfaurf75224e3b8c7a32a3205abaa7e258bfa9
<a href="https://rlvnt.de/" / rel="nofollow ugc">Mega даркнет</a>
KennethRoafed2b8bb6d0a02a0f0ca50c7733ad59b59
1xBet—это одна из самых известных платформ,предлагающийразнообразные функцииищедрые акциидля своих пользователей.Неважно,вы—начинающий игрокилиопытным игроком,промокоды 1xBet—это отличный способрасширить возможности для выигрыша.<a href="http://www.medtronik.ru/images/pages/1hbet_2021_promokod_pri_registracii.html" rel="nofollow ugc">леон промокоды бесплатно</a> — этосекретный промокод,активирующая до 32 500 рублей на счет.Действует это предложениедля новых пользователейипосле регистрацииони получают 130% от суммы пополнения первого депозита.Промокоды 1xBet—это не просто бонус, а и преимущества.Вы получаете дополнительный капитал для ставок,что повышает ваши шансы на победу.Полученные бонусы можно применять в разных форматах ставок,в беттинге, азартных играх и развлечениях от 1xBet.Это позволяет играть с удовольствием и шансом на победу.
Richardfaurfd81b60da86defdfac26a4ff442c20d3a
<a href="https://kra33cc-cc.ru" rel="nofollow ugc">kraken onion</a>
Charlesbeava1aedb8d9dc4751e229a335e371db8058
Актуальный промокод, укажи промокод получи бонус. Получите максимум при регистрации в одной из букмекерских контор. Mostbet предлагает сейчас 35000 рублей всем новым игрокам букмекерской конторы. <a href="https://www.magazinmagazinov.ru/include/pages/promokod_mostbet_2.html" rel="nofollow ugc">промокод на на геймс</a>. Отличительной особенностью букмекерской конторы Mostbet является возможность совершения ставок по промокодам, которые предоставляются бесплатно. В БК Мостбет промокод – это универсальный инструмент при работе с бонусами и акциями. Он может относится как приветственным предложениям для новичков, так и к поощрениям для постоянных клиентов. Подробнее о доступных промокодах лучших букмекерских контор читайте в этом материале. Выделим несколько основных методов, которые позволят получить промокод Mostbet.