コーディング。

June 19, 2021

ADAアクセスビリティ対応

久しぶりにお仕事関係の話題です。っていっても私が対応してるわけじゃないので、詳しくは対応方法がわからないんですが・・・。

どうやら、企業の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で無理やり見るツールもあるんですけどね〜〜〜・・。

これをクリックすると、
Screen Shot 2021-06-18 at 8.04.51 AM


Screen Shot 2021-06-18 at 8.04.36 AM

アクセスビリティのメニューを出してくれるツールもあります。月45ドルするみたいです。

自分のサイトがADAに対応しているのか確認するツール:
https://wave.webaim.org/

Anti Virusの会社がVirusを作ってるみたいに(あくまで噂です)こういうツールを作ってる会社が訴訟してたりしてね・・。アメリカぽい利権の戦いだなーと思いました。

毎年毎年規定が変わるADAアクセスビリティ。個人で対応するWebデザイナーをやってる人は大変かもしれませんね💦

とりあえず、写真ベースにしない、イメージのALTタグをしっかり書く、フォームなどはtabでちゃんと次々移動するようにする、見やすく文字はでかく!などなど、ベーシックな部分のみですが、これからウェブサイトを立ち上げる際は気をつけて作りましょう・・。

とかいって、最近ALTタグ書くのサボリ気味だった・・。(このブログも)

California accessibility : https://www.ca.gov/accessibility/

aya_welcom at 09:07|PermalinkComments(0)clip!

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...
{
"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"
]
}
...not working

---
Dart-Sass :
Tools > Build System > New Build System...
{
"cmd" : [
"sass",
"--update",
".:.",
"--stop-on-error",
"--style",
"compressed"
],
"selector": "source.scss"
}
...not working

文献:
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続きを読む

aya_welcom at 16:01|PermalinkComments(0)clip!

March 22, 2019

RSS to Gmail

GmailがAPIを変更したことに伴ってIFTTTのGmailのトリガーが全てInactiveになってるみたいですね。。


とりあえずは、Send mail when RSS Feed updateというのを見つけたのでそれで代用できる分は代用。そのあと、Gmail内でフィルターわけすればいいかな。。

しかし、グーグルさんは見切りを付けるのが早いですね。RSS readerも収益が見込めないと手を引き、G+もさっくり辞めて、Google Mapからもゼンリンを切って自社に切り替えて劣化もいいところみたいだし。。色々着手して、使ってるユーザーのことも考えずにポイするなーー💢

にほんブログ村 海外生活ブログ ロサンゼルス情報へ ←ランキングに参加しはじめました。よかったらポチッとお願いしまーす!

aya_welcom at 09:57|PermalinkComments(0)clip!

September 20, 2017

自分のブログをIPでブロックする方法

自分のサイトにいたずらをする人がいる
自分のサイトを会社の人にみられたくない

などなど

そんな時にご利用ください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>





aya_welcom at 07:29|PermalinkComments(0)clip!

October 04, 2014

scssでcss

久しぶりに真面目な話www

仕事でscssを使い出しました。

mixinを自作してみたのでshare( ´ 艸` )w
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

まだまだひよっこです(´・ω・`)

aya_welcom at 12:39|PermalinkComments(1)TrackBack(0)clip!

July 01, 2007

Google Custom Search Engine

ブログに、Googleのカスタム検索機能をつけてみました。

指定したページに、指定したサイトの検索結果出力可能になります。
融通が聞く分、ちょっと設置に苦労しました。

手順は、
1.  Custom search engineに登録/検索該当サイトを登録/コード(ソース)を確認

2. ブログの検索飛び先として、ブログ記事を投稿。記事には、指定されたコードを記入

3.  ブログのプラグイン部分に検索窓のソースを挿入(飛び先のurlを入れる)

それだけ。

でも!なんだか記事にjavascriptだけの文を書くとおかしなことになったり、検索結果枠の枠をwidth:500px以下にしてもそれ以下にはならなかったり(結局、cssで回避しました)日本語は、化けちゃったり(文字コードもinputで一緒に送信させてなんとか直りました)...
そんな感じで、ちょっとめんどくさかったです。

検索結果もイマイチだわ、(iframeで検索結果を出してるのですが)iframe内のソースはいじれないので白くぽっかりと検索結果がでているのが気になるわってな感じですが。。

まぁいいか!w


aya_welcom at 14:15|PermalinkComments(0)TrackBack(0)clip!
Recent Comments
プロフィール

あや。@ロス
出身地:鹿児島
生息地:カリフォルニア
続きを見る >>