LINEスタンプ用 Illustrator テンプレートと書き出しスクリプト - はてゆき
うっかり3週間ぶりのあわゆきです。 LINE のクリエイターズスタンプを作るときに使う Illustrator のテンプレートのお話です。以前から GitHub で公開しているものをアップデートして、さらに画像書き出し用のスクリプトファイルも追加しました。 テンプレートについて その名のとおりのもの。1ファイルでスタンプセットの全アイテムを作れるように、アートボードを配置したテンプレートです。制作ガイドラインで規定されている余白などもテンプレートレイヤーとして入っています。 今回の更新 『4列 × 10行』のアートボード配置に変更しました（以前は描き上げたアイテム数をカウントしやすいように『5列 × 8行』のアートボード配置だった）。 なんで4列なん 販売ページや実際のスタンプ使用時のレイアウトが4アイテム横並びなので、それに合わせた形です。 40アイテム全体を俯瞰したバランスや、販売ペー
[JS]面倒なCSS3のベンダープレフィックスを自動で付与するスクリプト -Prefix free
ページにたった一行記述するだけで、CSS3のベンダープレフィックスを自動で付与してくれるスクリプトを紹介します。 Prefix free via: PrefixFree: Break Free From CSS Prefix Hell [ad#ad-2] Prefix freeの機能 ベンダープレフィックスとは、CSS3で採用予定のプロパティがブラウザに先行実装されており、それらを各ブラウザごとに機能させるためプロパティに加える接頭辞のことです。 「-moz-」「-webkit-」「-o-」「-ms-」などがあります。 例えば、CSS3グラデーションを通常のベンダープレフィックスを使用すると、下記のようなスタイルシートになります。 .download { background-image: -webkit-linear-gradient(transparent, rgba(0,0,0,.3
[JS]雑誌をめくるようにぺらっと画像を表示するスクリプト -mLivre
雑誌をめくる「Pege Flip」のエフェクトで画像を次々に表示するjQueryのプラグインを紹介します。 mLivre デモ [ad#ad-2] mLivreの実装 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="jquery.mLivre.min.js"></script> HTML img要素をdiv要素で内包します。 <div id="demo1"> <img src="celestin/couverture.jpg" width="650" height="325" /> <img src="celestin/illustration2.jp
フォームのselect要素内をインスタンス検索出来るようにし、美しいデザインにも変更できるjQueryプラグイン・Chosen
結構便利そうだったのでご紹介。フォームの select要素内に羅列されたoptionから、入力 するだけで結果を表示するインスタンス検索 を可能にするスクリプト・Chosenです。表題 にはjQueryプラグインと書きましたが、この スクリプトにはjQueryプラグインとprototype の2つが用意されています。 optionの量が多くなってしまうことはよくあるので、この手のユーザビリティ向上系スクリプトは多く存在しますが、これはかなり便利ではないかなと思いました。似たようなのもうあるんですかね。 通常のselectボックスでプルダウンさせると検索窓も表示、キーワードを入れるだけでソートしてくれます。いわゆるインスタンス検索が可能になるので大量のoptionが存在してもユーザーの利便性を全く損ないません。 デモ見たほうが早いですね。※追記：日本語だとFirefoxのみ動かないみたい。英
[JS]Flashでもない、HTML5でもない、タイムラインベースの複雑なアニメーションを作成できるスクリプト -Mashi | コリス
ぱっと見た瞬間「Flashだな」と思ってしまったくらいの、Flashで実装したような複雑なアニメーションやムービーを作成できるスクリプトを紹介します。 使用するのはHTML, CSS, JavaScriptで、こういったものにありがちなHTML5, Canvas, CSS3には頼っていません。jQueryなど他のスクリプトにも依存していません。 ※CSS3のエフェクトなどオプションとして利用が可能です。 Mashiの主な特徴 スタンダードなHTML, CSS, JavaScriptでFlashのようなムービー、アニメーションを作成できます。(X)HTMLコンテンツに設置が簡単にできます。 41KB/13KB(CDN+GZip)と非常に軽量で、オブジェクト指向、モジュール式です。 基本的な利用では、追加のプラグインは必要ありません。 IE6をはじめ、すべての主要なブラウザをサポートしています
[JS]ページ内のリンクを印刷時にQRコードにして配置するスクリプト -printQr
ウェブページを印刷する際、ページ内に配置されたリンクをページ下部にQRコードとして配置するスクリプトを紹介します。 ページをPDFで印刷したキャプチャ ※分割印刷には「iPrint」を使用してます。詳しい説明は「不必要な箇所は印刷しない！必要なページだけ印刷（割付印刷も）ができるフリーソフト -iPrint」をどうぞ。 printQrの実装 printQrの実装は簡単で、既存のページにも簡単に実装できます。 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして、指定します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script src="jquery.printqr.min.js"></script> JavaScript すべてのa要素を抽出す
テーブル内の行やセルなどの要素をドラッグ＆ドロップで自由に配置できるスクリプト・REDIPS.drag
使い方<script type="text/javascript" src="redips-drag.js"></script> <script type="text/javascript" src="script.js"></script>ライブラリと設定用のjsファイルを読み込んでマークアップするだけです。 デモのマークアップは以下のような感じ。 <div id="drag"> <table> <colgroup> <col width="30"/> <col width="100"/> <col width="100"/> <col width="100"/> <col width="100"/> <col width="100"/> </colgroup> <tbody> <tr> <th colspan="6" class="mark">テーブル</th> </tr> <tr c
すぐに実施できる、あなたのウェブページのスピードを改善する10のチップス
ウェブページのスピードを改善することは最適なユーザエクスペリエンスを提供するだけでなく、Googleの検索結果にも影響を与える大切な要因です。 すぐに実施できる、あなたのウェブページのスピードを改善する10のチップスを紹介します。 10 Tips for Decreasing Web Page Load Times [ad#ad-2] 下記は各ポイントを意訳したものです。 1. 現在のスピードをチェック 2. 画像の最適化 3. 画像は実寸で配置 4. コンテンツを圧縮して、最適化 5. スタイルシートは上に配置 6. スクリプトは下に配置 7. スクリプトとスタイルシートは外部ファイルで 8. HTTPリクエストは最小限に 9. キャッシュの利用 10. 301リダイレクトは避ける 参考資料とツール 1. 現在のスピードをチェック まず、現在のあなたのウェブページのスピードの分析からはじ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
