コーディング。
December 07, 2022
Webアクセシビリティー
デジタル庁からデジタル庁、初心者向け「Webアクセシビリティー」導入ガイド無償公開が公開されています。
初心者向けとのことですが、とっても重要なことがいっぱい書いてありました！
欲を言えば、スラッシュ、半角全角のどちらを打ち込んでもエラーにならないでほしいな。後日本語のサイト、老眼では読めないサイトが多い・・・。
後ついでだから言うけど、もうデータ量いっぱい読み込める時代に「記事の全文を読む」で次のページに行かなくてもいいし、長いインタビューとかもページ分けいらないな〜とも😅💦
特にやほーさんご検討頂けると嬉しいです😂😂
初心者向けとのことですが、とっても重要なことがいっぱい書いてありました！
欲を言えば、スラッシュ、半角全角のどちらを打ち込んでもエラーにならないでほしいな。後日本語のサイト、老眼では読めないサイトが多い・・・。
後ついでだから言うけど、もうデータ量いっぱい読み込める時代に「記事の全文を読む」で次のページに行かなくてもいいし、長いインタビューとかもページ分けいらないな〜とも😅💦
特にやほーさんご検討頂けると嬉しいです😂😂
September 01, 2022
【Photoshop】100% zoom is too small on screen
Photoshopを入れ直したせいで、またまたRetinaディスプレイで画像が小さく表示される問題が復活して、前どうやって直したっけな〜？と思い出せないまま数ヶ月が立ち、小さいままで作業してたんですが、（老眼で😂）細かいところが見えず、ケアレスミスが偶発。
こりゃいかんとググるもなかなか見つからず、途方に暮れていてやっとみつけました。
Photoshopのアプリの「情報を見る」で
低解像度で開くのチェックマークをする
これだけでした。
ちくしょー！
すみません、久しぶりの自分専用メモ日記でした。
追記（2/10/23)：Monterey及びVenturaになってそれができなくなりました。（サポートスレッド）
抗議したら復活するかもしれません。
こりゃいかんとググるもなかなか見つからず、途方に暮れていてやっとみつけました。
Photoshopのアプリの「情報を見る」で
低解像度で開くのチェックマークをする
これだけでした。
ちくしょー！
すみません、久しぶりの自分専用メモ日記でした。
追記（2/10/23)：Monterey及びVenturaになってそれができなくなりました。（サポートスレッド）
抗議したら復活するかもしれません。
June 19, 2021
ADAアクセスビリティ対応
久しぶりにお仕事関係の話題です。っていっても私が対応してるわけじゃないので、詳しくは対応方法がわからないんですが・・・。
どうやら、企業のWebsiteにADAアクセスビリティに対応してない！と訴訟するのが流行っているようです。友人のレストランも訴訟を起こされてしまいました。
Appleも対応してないじゃん。と思って調べたらどうやら戦ってる最中ぽい
障害を持っている方が、chromeのextensionで無理やり見るツールもあるんですけどね〜〜〜・・。
これをクリックすると、
アクセスビリティのメニューを出してくれるツールもあります。月45ドルするみたいです。
自分のサイトがADAに対応しているのか確認するツール：
https://wave.webaim.org/
Anti Virusの会社がVirusを作ってるみたいに（あくまで噂です）こういうツールを作ってる会社が訴訟してたりしてね・・。アメリカぽい利権の戦いだなーと思いました。
毎年毎年規定が変わるADAアクセスビリティ。個人で対応するWebデザイナーをやってる人は大変かもしれませんね💦
とりあえず、写真ベースにしない、イメージのALTタグをしっかり書く、フォームなどはtabでちゃんと次々移動するようにする、見やすく文字はでかく！などなど、ベーシックな部分のみですが、これからウェブサイトを立ち上げる際は気をつけて作りましょう・・。
とかいって、最近ALTタグ書くのサボリ気味だった・・。（このブログも）
California accessibility : https://www.ca.gov/accessibility/
どうやら、企業のWebsiteにADAアクセスビリティに対応してない！と訴訟するのが流行っているようです。友人のレストランも訴訟を起こされてしまいました。
Appleも対応してないじゃん。と思って調べたらどうやら戦ってる最中ぽい
Apple has become the target of a new lawsuit, one that claims the iPhone producer's website is violating the Americans with Disabilities Act (ADA) by not being fully accessible to blind or visually-impaired consumers, due to the way the website itself is coded. ... Apple is the sole defendant in the lawsuit.
障害を持っている方が、chromeのextensionで無理やり見るツールもあるんですけどね〜〜〜・・。
これをクリックすると、
アクセスビリティのメニューを出してくれるツールもあります。月45ドルするみたいです。
自分のサイトがADAに対応しているのか確認するツール：
https://wave.webaim.org/
Anti Virusの会社がVirusを作ってるみたいに（あくまで噂です）こういうツールを作ってる会社が訴訟してたりしてね・・。アメリカぽい利権の戦いだなーと思いました。
毎年毎年規定が変わるADAアクセスビリティ。個人で対応するWebデザイナーをやってる人は大変かもしれませんね💦
とりあえず、写真ベースにしない、イメージのALTタグをしっかり書く、フォームなどはtabでちゃんと次々移動するようにする、見やすく文字はでかく！などなど、ベーシックな部分のみですが、これからウェブサイトを立ち上げる際は気をつけて作りましょう・・。
とかいって、最近ALTタグ書くのサボリ気味だった・・。（このブログも）
California accessibility : https://www.ca.gov/accessibility/
November 07, 2020
Sublime Text/DartSass/Figma
Mac移行用（自分用）のメモです！
Sublime Text3
Package Control: Win/Linux: ctrl+shift+p, Mac: cmd+shift+p
Type Install Package Control, press enter
動かないとき：
Click the Preferences > Browse Packages… menu
Browse up a folder and then into the Installed Packages/ folder
Download Package Control.sublime-package and copy it into the Installed Packages/ directory
Restart Sublime Text
スニペット：
SublimeLineter：エラーチェッカー
HTML5：HTML5のスニペット集、自動補完とハイライト
BracketHighlighter：開始/終了タグの強調
SublimeLinter-html-tidy：HTML5の構文チェッカー
SublimeLinter-jshint：JavaScriptの構文チェッカー
SublimeLinter-json：JSONの構文チェッカー
SublimeLinter-phplint：PHPの構文チェッカー
SublimeCodeIntel：関数・変数が定義されているところにジャンプする
abacus：イコールやコロンなどを綺麗に揃える
Phoenix Theme：Sublime Textの見た目をおしゃれにするテーマ。配色やデザインを自分でカスタマイズできます。
SFTP
ConvertToUTF8
Codecs33
SCSS
SCSS Snippets Complete
SCSS Compiler
Emmet
Compass:
Tool > Build System > Compass
Sassのコンパイル方法
プロジェクトディレクトリをSublime Textで開く（ドラッグなど）
一番上の階層にconfig.rbファイルを作成。（書き方はCompassの公式ページを参照）
（例）config.rb
Tools > Build System > New Build System...
---
Dart-Sass :
Tools > Build System > New Build System...
文献：
Sassを@importから@useに置き換えるための手引き
Sassのモジュールシステムを@importから@useに移行する方法を考えてみた
Homebrew
install Dart Sass by running
npm（Node.jsインストール）
---
Figma
Html-to-figma (Chrome plug-in)
使い方：
Figma file to PSD
https://www.photopea.com/
��Load a Figma file from your device: press File - Open (in the top left corner) and find and select a Figma file (or use drag and drop).
��The content of a Figma file (all pages and artboards) should be in front of you. You can click File - Save As PSD and get a PSD version of your file続きを読む
Sublime Text3
Package Control: Win/Linux: ctrl+shift+p, Mac: cmd+shift+p
Type Install Package Control, press enter
動かないとき：
Click the Preferences > Browse Packages… menu
Browse up a folder and then into the Installed Packages/ folder
Download Package Control.sublime-package and copy it into the Installed Packages/ directory
Restart Sublime Text
スニペット：
SublimeLineter：エラーチェッカー
HTML5：HTML5のスニペット集、自動補完とハイライト
BracketHighlighter：開始/終了タグの強調
SublimeLinter-html-tidy：HTML5の構文チェッカー
SublimeLinter-jshint：JavaScriptの構文チェッカー
SublimeLinter-json：JSONの構文チェッカー
SublimeLinter-phplint：PHPの構文チェッカー
SublimeCodeIntel：関数・変数が定義されているところにジャンプする
abacus：イコールやコロンなどを綺麗に揃える
Phoenix Theme：Sublime Textの見た目をおしゃれにするテーマ。配色やデザインを自分でカスタマイズできます。
SFTP
ConvertToUTF8
Codecs33
SCSS
SCSS Snippets Complete
SCSS Compiler
Emmet
Compass:
Tool > Build System > Compass
Sassのコンパイル方法
プロジェクトディレクトリをSublime Textで開く（ドラッグなど）
一番上の階層にconfig.rbファイルを作成。（書き方はCompassの公式ページを参照）
（例）config.rb
Tools > Build System > New Build System...
{...not working
"file_regex": "^([^:]*):([0-9]*):.*$",
"selector": "source.scss, source.sass",
"cmd": [
"/usr/bin/sass",
"--unix-newlines",
"--trace",
"--style=compressed",
"--default-encoding=UTF-8",
"$file",
"$file_path/$file_base_name.css"
]
}
---
Dart-Sass :
Tools > Build System > New Build System...
{...not working
"cmd" : [
"sass",
"--update",
".:.",
"--stop-on-error",
"--style",
"compressed"
],
"selector": "source.scss"
}
文献：
Sassを@importから@useに置き換えるための手引き
Sassのモジュールシステムを@importから@useに移行する方法を考えてみた
Homebrew
install Dart Sass by running
brew install sass/sass/sass
brew install sass/sass/migrator
npm（Node.jsインストール）
brew install node
---
Figma
Html-to-figma (Chrome plug-in)
使い方：
��go to figma and hit cmd+/ on mac (or ctrl+/ on PC)
��type "html to figma" and hit enter to launch the plugin.
�� in the window that pops up for the plugin choose "upload file" and upload the file your browser downloaded
Figma file to PSD
https://www.photopea.com/
��Load a Figma file from your device: press File - Open (in the top left corner) and find and select a Figma file (or use drag and drop).
��The content of a Figma file (all pages and artboards) should be in front of you. You can click File - Save As PSD and get a PSD version of your file続きを読む
March 22, 2019
RSS to Gmail
GmailがAPIを変更したことに伴ってIFTTTのGmailのトリガーが全てInactiveになってるみたいですね。。
とりあえずは、Send mail when RSS Feed updateというのを見つけたのでそれで代用できる分は代用。そのあと、Gmail内でフィルターわけすればいいかな。。
しかし、グーグルさんは見切りを付けるのが早いですね。RSS readerも収益が見込めないと手を引き、G+もさっくり辞めて、Google Mapからもゼンリンを切って自社に切り替えて劣化もいいところみたいだし。。色々着手して、使ってるユーザーのことも考えずにポイするなーー💢
←ランキングに参加しはじめました。よかったらポチッとお願いしまーす！
Google is cutting off @IFTTT Gmail access because it doesn't comply with new data privacy rules announced a few months ago: https://t.co/f2KCDKATg8 pic.twitter.com/tBFipYFVum
— Stephen Shankland (@stshank) March 21, 2019
とりあえずは、Send mail when RSS Feed updateというのを見つけたのでそれで代用できる分は代用。そのあと、Gmail内でフィルターわけすればいいかな。。
しかし、グーグルさんは見切りを付けるのが早いですね。RSS readerも収益が見込めないと手を引き、G+もさっくり辞めて、Google Mapからもゼンリンを切って自社に切り替えて劣化もいいところみたいだし。。色々着手して、使ってるユーザーのことも考えずにポイするなーー💢
←ランキングに参加しはじめました。よかったらポチッとお願いしまーす！September 20, 2017
自分のブログをIPでブロックする方法
自分のサイトにいたずらをする人がいる
自分のサイトを会社の人にみられたくない
などなど
そんな時にご利用くださいw
自分のサイトを会社の人にみられたくない
などなど
そんな時にご利用くださいw
<script language="Javascript" src="https://www.l2.io/ip.js?var=UserIP"></script>
<script language="Javascript">
function preloadFunc()
{
var ip = UserIP;
var bannedips=[
"xx.xx.xxx.xxx.",
"xx.xx.xxx.xxx."
]
var handleips=bannedips.join("|")
handleips=new RegExp(handleips, "i")
if (ip.search(handleips)!=-1){
window.location.replace("http://google.com");
document.write('<!--');
}
}
window.onpaint = preloadFunc();
</script>
October 04, 2014
scssでcss
久しぶりに真面目な話ｗｗｗ
仕事でscssを使い出しました。
mixinを自作してみたのでshare( ´ 艸` )ｗ
CSS3でも、フレキシブルデザイン用でもあーりません。
…もっと良い書き方がありそうですが。。
それと、時間をかけて作った割には、
全然評価されなかった（苦笑）less vs sassのプレゼンテーションファイル。
http://www.slideshare.net/awelcom/less-vs-sass-38038783
まだまだひよっこです(´・ω・｀)
仕事でscssを使い出しました。
mixinを自作してみたのでshare( ´ 艸` )ｗ
CSS3でも、フレキシブルデザイン用でもあーりません。
//columns
$width: 1050px //ご自由に
$default_margin: 20px //ご自由に
@mixin col-unit($span) {
float: left;
margin-right: $default_margin;
$column-width: ($width - ($default_margin * ($span - 1))) / $span;
width: floor($column-width);
&:last-child {
margin-right: 0;
}
}
//使い方
footer {
margin: 30px 0;
li {
@include col-unit(6); //カラム6
}
}
…もっと良い書き方がありそうですが。。
それと、時間をかけて作った割には、
全然評価されなかった（苦笑）less vs sassのプレゼンテーションファイル。
http://www.slideshare.net/awelcom/less-vs-sass-38038783
まだまだひよっこです(´・ω・｀)
July 01, 2007
Google Custom Search Engine
ブログに、Googleのカスタム検索機能をつけてみました。
指定したページに、指定したサイトの検索結果出力可能になります。
融通が聞く分、ちょっと設置に苦労しました。
手順は、
1. Custom search engineに登録／検索該当サイトを登録／コード（ソース）を確認
2. ブログの検索飛び先として、ブログ記事を投稿。記事には、指定されたコードを記入
3. ブログのプラグイン部分に検索窓のソースを挿入（飛び先のurlを入れる）
それだけ。
でも！なんだか記事にjavascriptだけの文を書くとおかしなことになったり、検索結果枠の枠をwidth:500px以下にしてもそれ以下にはならなかったり（結局、cssで回避しました）日本語は、化けちゃったり（文字コードもinputで一緒に送信させてなんとか直りました）...
そんな感じで、ちょっとめんどくさかったです。
検索結果もイマイチだわ、（iframeで検索結果を出してるのですが）iframe内のソースはいじれないので白くぽっかりと検索結果がでているのが気になるわってな感じですが。。
まぁいいか！w
指定したページに、指定したサイトの検索結果出力可能になります。
融通が聞く分、ちょっと設置に苦労しました。
手順は、
1. Custom search engineに登録／検索該当サイトを登録／コード（ソース）を確認
2. ブログの検索飛び先として、ブログ記事を投稿。記事には、指定されたコードを記入
3. ブログのプラグイン部分に検索窓のソースを挿入（飛び先のurlを入れる）
それだけ。
でも！なんだか記事にjavascriptだけの文を書くとおかしなことになったり、検索結果枠の枠をwidth:500px以下にしてもそれ以下にはならなかったり（結局、cssで回避しました）日本語は、化けちゃったり（文字コードもinputで一緒に送信させてなんとか直りました）...
そんな感じで、ちょっとめんどくさかったです。
検索結果もイマイチだわ、（iframeで検索結果を出してるのですが）iframe内のソースはいじれないので白くぽっかりと検索結果がでているのが気になるわってな感じですが。。
まぁいいか！w
