Category: プログラミング

プログラミングをしていてこれは要メモ!と思ったことの覚え書き。その他お役立ちフレームワーク、書籍などの紹介

1

Google Fontsの使い方【2018年版】

2月もあっという間に折り返してしまい、え?え?うそ。。。となっているカテリーナです! Buongiorno! 今日は以前、読者さんのシノハラさんより質問を受けていた「グーグルフォントの使い方」についてザザーっと解説してみたいと思います。 上の無意味なスライド画像なんですが、なんとなくそこにいてもらいたいので動作が重くなろうが入れさせてもらいます。すみません! 1.使いたいフォントを決める とりあえず説明するのが面倒くさいので、シノハラさんは、HTMLやCSS、Google Fontsが何であるかはご存じである!という前提で始めたいと思います。ええ。   まずはGoogle Fontsに飛び、どのフォントを使うか決めます。 何せ800種類以上のフォントがひしめき合っていますので、これだけあると「どれをつっかおうかな~♪」とか迷うかと思いきや、自分の気に入っているフォントを毎回使ってしまうという馬鹿の一つ覚え状態。。。 2018年はもう少し冒険したいと思います。 今回シノハラさんにはわたしの馬鹿の一つ覚え状態の「Montserrat」と「Lobster」の2つのフォントを使っていただきましょうか(笑)。 こんな感じで選びます。   この要領で「Lobster」フォントも選んじゃいましょう。 その後、こういう画面を出します。 選んだ2つのフォントが並んで見えますね?   ここで、次の段階に進みます。 2.Google FontsのAPIをHTMLに埋め込む 字が小さくて少し見にくいので、下に大きく書いておきます。 <link href=”https://fonts.googleapis.com/css?family=Lobster|Montserrat” rel=”stylesheet”> これをHTMLコードのHEADタグの中に下のように入れます。 <!DOCTYPE html><html> <head> <meta charset=”utf-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>  <meta name=”viewport” content=”width=device-width, initial-scale=1″> <meta name=”author”...

Best Resources for Web Design and Development 0

Webサイト作成時によく使うサイト&サービス:Webデザインに役立つサイト編

どうも~ 火曜になってもやる気ゼロなカテリーナです!Buongiorno! 今回も昨日の続き「カテリーナがWebサイトを作っていて頻繁にお世話になるサイト&サービスのリスト」をご紹介します。   やはり自分用のリストなんですが(笑)。     今日はWebデザインをする上でカテリーナがよく使っているサイトの中でも 「アイコン」「画像作成アプリ」「ワイヤーフレーム」「プレースホルダー」「デザイン・アイディア」のカテゴリーをご紹介します。   ※ 基本的に全てのサイトは英語です。日本語の場合は注記します。 素材編Webデザインに役立つサイト コーディングに役立つサイトその他お役立ちサービス WEBサイトを作るときにお世話になっている便利なサイトリスト Webデザインに役立つサイト編 アイコン Font Awesome: ここはデザイナーから絶大な支持を誇るサイトだと思うんですが。バージョン5からSVGアイコンが出てきました。 iconmonstr:  Iconをダウンロードする方法と、Icon Fontとして使う方法があるんですが、わたしは後者です。正直言うとFont Awesomeしか使ってないです。 Ionicons: ここは最近見つけたんでまだ使ったことが無いんですけど、CDNがポーンと置いてあってアイコンが羅列してあるだけなので、ある程度慣れた人向けでしょう。すっきりしたアイコンなので、使いやすそうです。 Icon Works: こちらも慣れた人向けだと思います。ただ使い方が説明してあるページがあるので、それに従えば大丈夫だと思います。 色々アイコンのサイトはチェックしているんですけど、やっぱりFont Awesomeに出戻ってしまいます。 何と言っても使いやすいんですよねー 画像作成アプリ Photoscape X: オープンソースの画像作成・編集アプリなので当然タダです。でもかなり使いやすく、インターフェースもなかなかなので、手っ取り早く画像を何とかしたい人にはおすすめです。何かの嫌がらせなのか、ブックマーク出来ない設定がしてあるので、こうしてリストにぶち込んでやりますっ!! Tux Paint: めちゃめちゃ子供向けです!!!でも何か気に入っています(笑)。こちらもオープンソースなので当然タダです。 GIMP: こちらは非常に有名なアプリですが、やはりオープンソースなのでタダ。機能もとても充実しています。 Adobe...

Best Resources for Web Design and Development 4

Webサイトを作成時によくお世話になるサイト&サービス:素材編

どうも~ 恒例の月曜やる気ゼロなカテリーナです!Buongiorno! 今回は「カテリーナがWebサイトを作っていて頻繁にお世話になるサイト&サービスのリスト」をご紹介します。   ぶっちゃけ自分用のリストなんですが(笑)。   あんだけしょっちゅう使うのに、何故かブックマークもせず使うたびに検索してるサービスもあったりして何やってんだわたし、みたいな。 とにかく一同に全てのリソースが集まっていると結構便利なんですよね。 かなり長いリストなので、画像も何も入れないシンプルなものにし、かつ「素材編」「Webデザインに役立つサイト編」「コーディングに役立つサイト編」「その他お役立ちサービス編」の4回に分けます。 前もってお断りしておきますが、ほとんど全てのサイトは英語です。日本語の場合は注記します。 素材編Webデザインに役立つサイト コーディングに役立つサイトその他お役立ちサービス WEBサイトを作るときにお世話になっている便利なサイトリスト 素材編 フォント Google Fonts: これはもうCSSのスタイリングなどでは必須というか。約800種類のフォントがあるので色々と遊べます。 Creative Blog: Webデザイナーだけでなく、グラフィック、DTPデザイナーなど全てのデザイナーにとって使える無料フォントのリスト。結構更新されてます。 Font Pair: Google Fontsから「こんなフォントの組み合わせはどう?」と提案してくれるサイト。 色々デザインしていると、お決まりのフォントの組み合わせばかり使うようになってくるので、こういう提案型サイトは刺激をもらえるというか。 Google Web Fonts Inspiration: ここもGoogle Fontsのペアリング提案サイトなんですが、何と言っても見ているだけで美しいサイトです。 Typogui.de: タイポグラフィの基本がここを読めば分かります。 Font Reach: ネット上に実際に公開されているサイトで、どのフォントがどの位使われているのかを表示するサイト。ここを見ると、どのフォントが今のトレンドなのかが一目瞭然です。 WhatTheFont!: 手持ちの画像の中の文字が何のフォントか分からない時に、アップロードして検索が出来る非常に便利なサイト。 カラー Palettes |...

coding in the future 2

プログラマー&クリエイターの未来図 ~ これからの時代に求められるスキルセット

ロンドンからBuongiorno(こんにちは)!  いや~今朝はいきなり衝撃的なものを読みました、ええ。   カテリーナの一日は、軽くストレッチをして、イタリア語の勉強を30分ぐらいして、その後ミルクティーを飲みながらTwitterを徘徊して、役に立ちそう&面白そうな話題をピックアップして……という感じで始まるんですが、昨日今日と2日続けて衝撃的な記事を読んで、再びコーディングもポートフォリオもそっちのけで色々とリサーチしていました。 衝撃的な記事とはこちら。 グーグル、プログラミングが出来なくてもAI(人工知能)ツールを作れる「Auto MLα版」の提供開始 Web制作の自動化が進む! 画像から自動コーディングする深層学習プログラムが公開 え、もう何、コーディングの勉強しても無駄ってこと? とかって思いましたからね、ホントに。   特に2番目の記事は、デザインデータ(普通こんなWebサイト作りたいって、完成品の絵みたいなの作るでしょ? そういう画像)を深層学習プログラムに   はい!こんな感じでよろしく!!   って渡すと、プログラムがダダダ~ッと自分で学習を始めながらガンガンとHTMLやCSSコードを書いていくんですが、250回目時点ではまだガタガタな見た目だったのが、550回目ではプログラムに渡したデザインデータとほぼ同じなものがコーディングされていました。  そしてプログラムがコーディングしている場面の動画があるんですが、マジで恐ろしいスピードです。 もうこれ絶対みなさんに見てもらいたいので、版元のFloydHub Blogさんからパクッてきます! ほんっとに恐ろしいですね~。 AI(人工知能)が世の中に浸透していくにつれて、この世の中から消え去っていく職業がたくさんあるのは、普通に考えても分かるんですが、 プログラミングやコーディング関係の仕事は大丈夫じゃね?なんてちょっと思ってたらこのザマですよ!!   読みが甘い!自分!!!   上のリンクでもご紹介したようにグーグルは既にプログラミング知識がゼロでもAIツールが作れる便利なものをリリースしましたし、記事内では既にDisney社が実際に使うと書いてある。 そ こ で! 我々人間にしか出来ないこととは何かに目を付けてみる   AIや深層学習プログラムにわざとバグをいっぱい仕込んでおく!! しかも電気が無いと使い物にならないじゃん!   というのは冗談ですが、これってコンピューター全般のアキレス腱だと思うんですけど。 コンピューターは何でも出来るし、しかも速くて正確。...

Return the string with the first letter of each word capitalized. (the rest of the word is in lower case.) 0

【JS】各単語の1文字目を大文字に変えたストリングを返す方法

ロンドンからBuongiorno(こんにちは)!  今日の内容はお遊びJavaScript、見た目的にはちょっと試験的な投稿になります。   ご紹介するコードは、例えば「i liVE iN loNDoN」のような大文字小文字がむちゃくちゃな文章を「I Live In London」という風に各単語の1文字目だけ大文字に変えて返すというものです。   ちょっとお断りしておきたいのですが、 前回の記事のHTMLコードが非常に小さく見にくいので、一番読みやすいテンプレートとシンタックス・ハイライターの組み合わせが見つかるまで、ガンガン試行錯誤していくつもりでいます。 もし何かご意見やご提案などありましたらどしどしお知らせください。 お遊びコードはこちら function titleCase(str) { var word = str.split(” “); var newArray = [];   for(var i = 0; i <...