学生、社会人、高齢者と多くの人がスマートフォンやタブレットを持っている。これだけ普及したので、それらはコンピューター以上にwebページへのアクセシビリティーが高いデバイスになっていると言っても過言ではない部分がある。コンピューターと比較するとデバイスを使用している年齢層が広い気が感覚的にしており、スマートフォン、タブレット用サイト制作の重要度は日に日に増していると考える。

上記は当たり前のことだとは思うのだが、webサイト制作の勉強をしていると、PC版サイトに偏りがちになりそうな気がしているので、あえて意識をスマートフォン用サイトへ向けるという意味で書いてみた。

ということで、スマートフォンサイトは重要なので、お気に入りサイト100選はスマホ用サイトの選定を始め、jQueryMobileの学習も自主的に始める予定である。

2014-10-19

(mac)Excelで改行

mac版のエクセルで、セル内での改行が出来なくて困った。

Windowsと同じ様に、option(alt)+enterでは出来ない。

mac版はoption+command+enterらしい。

■mac版

option + command + enter

■win版

alt + enter

2014-10-18

レンタルサーバーに登録

昨日、無料レンタルサーバーに登録しました。

手が回っていないので、しばらく更新出来そうにないですが、勉強したJavaScript,jQueryを載せたいなぁと思っています。どこかにリンクを貼る予定。

2014-10-18

OS X Yosemite

OS X Yosemiteを入れてみました。

DockがTiger以前の様になっています。

一言感想を言うとすれば…重い。

4GBのメモリでは、重いです。知人は16GB搭載しているそうですが、重いそう。

Safariのツールバー類は閉じるボタンとブックマーク欄が一列になり、幅が縮まった。

写真の様に、アドレスバーをクリックすると、ブックマークが表示されるので、これは便利。

とは言っても、iOSに近づいた感じだから、特別な感想はない。

フォントも以前のでも良かったけど、今回のでも良い。という感想。

以上。

f:id:web-sync:20141018211818p:plain

2014-10-15

梨の生産高

林先生の番組で放送されていたのだが、日本の梨の生産量が一番多い都道府県は千葉らしい。

東京に近いので、熟した鮮度の高いものが食卓に届く、というのが理由だそうだ。

梨が食べたいなっしー。

2014-10-11

はてなダイアリーから、はてなブログへのインポート

はてなダイアリーの場合、Google ウェブマスターツールやGoogleアナリティクスを使用しようとすると有料のため、ダイアリーをブログへインポートしました。

いろいろと設定できるようだが、文字のCSSを変更しようとしたところ、出来なかった。どうすれば良いのだろうか。。。

2014-10-11

Googleウェブマスターツール

自身のjimdoサイトがgoogle検索で更新されている形跡がしばらく見当たらなかった。
google ウェブマスターツールを久しぶりにのぞいてみたところ、エラーが出ており正常にインデックスされていなかったことが判明した。
エラーをチェックし、セットアップ最適化を促されるので、それを設定した。

Select your preferred version/wwwのバージョンを追記した。
Select your target country/日本を設定した。

googleアナリティクスも登録して、ヘッダーに埋め込んだ。

よくわからないが、Fetch as Googleというものの操作もし、インデックスの送信を行った。

2014-10-10

CMS

現在、Jimdoでサイトを更新しているが、単なる興味本位が働き、WIXやBiNDにも触れてみたいと考えている。ドットインストールも含め、明日登録することにする。

javascriptに関する、わかりやすそうな記事を見つけたが、明日読むことにする。Javascriptの「変数」とは [Javascript] All About

2014-10-03

Illustrator レイヤーごとにPNG形式で画像を出力する

Illustrator

Photoshopはレイヤーカンプからの書き出しメニューがあるが、Illustratorには存在しない。

[Illustrator] レイヤーごとにPNG形式で画像を出力する

上記を参考にしました。

スクリプトをテキストエディタに入力して、拡張子を.jsxにしてスクリプトメニューから読み出すだけだが、毎回スクリプトを指定しないといけない点が難点でした。

デフォルトの解像度でPNGファイルで書き出すスクリプト

var folder = Folder.selectDialog();
var document = app.activeDocument;
if(document && folder)
{　　
　　var options = new ExportOptionsPNG24();
　　options.antiAliasing = true;
　　options.transparency = true;
　　options.artBoardClipping = true;
 
　　
　　var n = document.layers.length;
　　for(var i=0; i<n; ++i)
　　{
　　　　hideAllLayers();
　　　　var layer = document.layers[i];
　　　　layer.visible = true;
 
　　　　var file = new File(folder.fsName+"/"+layer.name+".png");
 
　　　　document.exportFile(file,ExportType.PNG24,options);
　　}
　　
　　showAllLayers();
}
 
function hideAllLayers()
{
　　forEach(document.layers, function(layer) {
　　　　layer.visible = false;
　　});
}
 
function showAllLayers()
{
　　forEach(document.layers, function(layer) {
　　　　layer.visible = true;
　　});　　　　
}
 
function forEach(collection, fn)
{
　　var n = collection.length;
　　for(var i=0; i<n; ++i)
　　{
　　　　fn(collection[i]);
　　}
}

2014-10-03

Sublime Text ショートカットキー

Sublime Text

コメントアウトのショートカットキーを調べていたところ、他にもたくさんあることを学んだのでメモ。

画面分割
option + command + 数字

カーソルを画面の端へ
command + ←
commnad + →

今いるカーソルの行をコメントアウトする
command + /　

16進数を一瞬でrgbaに変換 – Hex-to-RGBA
ctrl+shift+r

【参考サイト】
SublimeText2で便利なショートカットまとめ
 SublimeText2 - Sublime Text 2の便利なショートカット一覧 - Qiita
【便利ツール】Emmetで、ちょっと気持ちいいコーディング with sublime text 2・下巻｜ Developers.IO
Zen-coding (Emmet) を使ってみる | Web Design Leaves
手放すなんて絶対無理!SublimeTextの便利パッケージ - Catcher in the tech
SublimeTextの教科書で紹介されてるプラグインまとめ - Qiita

また、他のツール類も下記を参考に入れてみました。
SublimeText2を3ヶ月使ってみて利用を決めたPackageまとめ

2014-09-30

Sublime Textのブラウザを開くショートカットを設定する

Sublime Text

Sublime Text2のView in Browserのショートカットを割り当てました。
プライマリブラウザをDreamweaverと同じ”F12”で開くようにしました。
任意のタグで文章を囲むショートカットはcmd+eに設定しました。

Preference>KeyBindings - User　の値を変更するだけでした。

私は以下のとおりにしました。
supetはcommandのことです。

[

{[

{ "keys": [ "ctrl+shift+v" ], "command": "view_in_browser" },

{ "keys": [ "super+f12" ], "command": "view_in_browser", "args": { "browser": "firefox" } },

{ "keys": [ "f12" ], "command": "view_in_browser", "args": { "browser": "chrome" } },

{ "keys": [ "ctrl+shift+i" ], "command": "view_in_browser", "args": { "browser": "iexplore" } },

{ "keys": [ "ctrl+shift+s" ], "command": "view_in_browser", "args": { "browser": "safari" } },

 { "keys": ["super+e"], "command": "expand_as_you_type" }

]

2014-09-30

Sublime Textの設定を変更する

Sublime Text

SublimeText2の設定を変更してみました。
オートインデントやタブの挿入が嫌だったので、カスタムしたいなと思っていたところでした。

Preference>Settings - User　に設定を記入します。
こちらのサイトを参考にしました。
SublimeText - 【Sublime Text 3】導入から初期設定まで(自分用メモ) - Qiita

最後の文の最後は　,　は必要ないので注意。

現状、以下のようにしました。

  "close_windows_when_empty": true,          // 開いているファイルがなくなったらSublimeを終了するかどうか

  "draw_white_space": "all",                 // スペースやタブを可視化する

  "fallback_encoding": "UTF-8",              // 文字コードを自動判別できなかった時のデフォルト文字コード

  "highlight_line": true,                    // 現在行をハイライト

  "show_encoding": true,                     // 文字コードをステータスバーに表示

  "show_line_endings": true,                 // 改行コードをステータスバーに表

  "trim_trailing_white_space_on_save": true, // 保存時に空白を除去する

  "word_wrap": true,

  "rulers": [0,200],    // タブ&インデント

  "tab_size":           2,    // タブサイズ

  "translate_tabs_to_spaces":   true, // タブ->スペースに置き換えの有効

  "detect_indentation":       true,  // インデントを有効

  "auto_indent":          true,  // オートインデント

  "smart_indent":         true,  // スマートインデント

	"color_scheme": "Packages/Color Scheme - User/Xcode_default.tmTheme",

	"font_size": 16.0,

  "auto_match_enabled": true,  // 閉じ括弧などを補完する。

  "font_face": "Consolas", // フォント(人気なのは”Ricty”、”Consolas”、”Panic Sans”)

  "show_encoding": true // エンコーディングの文字コードを右下のステータスバーに表示

2014-09-30

Sublime Text のカラースキーマを変更する

Sublime Text

Sublime Textのカラースキーマを変更しました。

まずは、Package Controlを導入します。
Sublime Text 2 に Package Control を導入する - xykの日記

導入後は、Package Controlからカラースキーマ名を指定してインストールという流れになります。
カラースキーマは検索すれば、すぐ情報が入手できると思います。

シンタックスハイライトのカスタマイズも以下のようなサイトで可能なようです。
http://tmtheme-editor.herokuapp.com/#/theme/Monokai

2014-09-28

映画を観た。

タイトルの通り、映画を観た。
今回観たのは、スティーブ・ジョブズに関する下記の2作。
ソーシャルネットワークもレンタルしたのだが、まだ観ていない。

(1)スティーブ・ジョブズ 1995〜失われたインタビュー〜
映画『スティーブ・ジョブズ1995 〜失われたインタビュー〜』オフィシャルサイト | STEVE JOBS 1995
(2)スティーブ・ジョブズ　
 映画『スティーブ・ジョブズ』公式サイト

(1)こちらは彼がNeXT社にいた頃のインタビューである。
プログラミングについて、1970年当時の技術を見て何を思ったか、マイクロソフトについて、コンピュータと人間について、未来のコンピューターの世界について、などを語っている。
特に最後の項目に関して、インターネットとWebについて語っていた点が印象深かった。このインタビューによって、彼がどういう姿勢でコンピューターと向き合っていたかを理解できた気がする。

(2)アップル創業から近年までのストーリーで、彼がどの用に周囲と接し、製品に取り組んできたかの一部がイメージ出来た気がする。
スティーブ・ウォズニアック、マイク・マークラ、ジョナサン・アイブなど彼と深い関係の人物と共にアップルが出来上がっていったことがよく理解できた。

googleやfacebookはどういう思想なのかが気になってきた。

webサイト制作の勉強 | web-sync

webサイト制作の勉強を2014年8月後半から始めました。このページはその履歴を残すために作成しています。

PC用ブラウザでスマートフォン用サイトを閲覧する。

スマートフォン用サイト

(mac)Excelで改行

レンタルサーバーに登録

OS X Yosemite

梨の生産高

はてなダイアリーから、はてなブログへのインポート

Googleウェブマスターツール

CMS

Illustrator レイヤーごとにPNG形式で画像を出力する

Sublime Text ショートカットキー

Sublime Textのブラウザを開くショートカットを設定する

Sublime Textの設定を変更する

Sublime Text のカラースキーマを変更する

映画を観た。