seseragiseven

超軽量で奥ゆかしいCSSフレームワーク「sakura」

すごく今風かつシンプルなCSSフレームワークを見つけたので紹介。どれくらいシンプルかって言うと、タイトルにもあるようにクラスなんかを全く使わず、ベースのHTMLタグの見た目やマージンなどを調整しているだけ。という感じ。
自分でCSS書くそのベースとして、すごく良いのではと思います。本サイトにあるように、normalize.cssと併用して使うといいっぽい。ゴテゴテしたCSSも便利な時は便利だけど、こういうのは非常に助かりますね~。

おしゃれですね。
このサイトの色味と似ているので、同じようなものが好きなのかも知れないですね。

本サイト:sakura
デモ:sakura demo

Ionic2ことはじめ、個人的につまずいた点など

更新頻度についてはもはや触れないでいく。

最近Ionic2というものを使ってアプリを作ったりしている。最近は増えてきたとは言え、まだまだ歴史も浅く、日本語の文献も少なく試行錯誤してきたので、自分用に備忘録を残してみようと思う。このサイトの本来の使い方である。なお、Ionic2のバージョンは執筆時点で最新版の3.4を使用しているが、すべてが最新版ではないので細かな挙動の違いとかはあるかもしれない。参考程度に。

global packages:
    @ionic/cli-utils : 1.4.0
    Cordova CLI      : 7.0.1
    Ionic CLI        : 3.4.0

local packages:
    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-cordova       : 1.4.0
    @ionic/cli-plugin-ionic-angular : 1.3.1
    Cordova Platforms               : android 6.2.3 browser 4.1.0 ios 4.4.0
    Ionic Framework                 : ionic-angular 3.0.1

System:
    Node       : v7.10.0
    OS         : Windows 7
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed
    npm        : 4.2.0

Ionic2とは

読み方は「アイオニックツー」で正しいと思う。cordovaとAngular2を使ったフレームワーク。
cordovaはざっくり言うとHTMLでアプリが作れるというフレームワーク(swiftやJavaを覚えなくて良い)。
Angular2は、JavaScriptを大規模開発用に整えていろいろ便利な機能を追加したりした「モダンなWeb」のためのフレームワーク。基本TypeScriptを使って書く。

もう全部フレームワーク。フレームワークとフレームワークを合体させたフレームワーク。
役割的には、
cordova:
HTMLアプリの基本的な動きの実装、カメラとかのデバイスネイティブ機能を使える機能を提供。
プラグインのインストールとかはやるけど基本内部で動くのであんまり意識することはない。
Angular2:
基本これで処理を書いていくTypeScriptなので拡張子は「.ts」。これとHTMLとSCSSで基本作っていく。
Ionic2:
上記2つを含んだフレームワーク。デザインや動きまで完成された「リスト」や「モーダル」なんかを簡単に作っていける。Angular2は処理だけだけど、見た目も全部含めて1つのパーツにしてくれてるから、基本の動きだけであればコピペするだけで完成する。Ionic2のコンポーネントで作った要素以外の動きをTypeScriptで別途書いていくという感じ。

Ionic2の何がいいのか

まず何と言っても「Webの知識を使ってネイティブアプリが(割と簡単に)作れる」というところ。しかもiOSとAndroidとWeb、それぞれを意識せずにハイブリッドアプリが作れる。
また、cordovaやAngular2をバラで使うといろいろめんどくさいけど、Ionic2を使って書くとデザインや細かい処理をぜ~んぶ内部で上手いことやってくれる。なので気に入らない部分だけ修正したりするだけでOK。
TypeScriptとかやってなかったら最初は覚えることも多いけど、これでアプリ作れるなら安いものってくらいには簡単に作れます。

続きを読む

Googleマップをサイトに表示する_Part2「ストリートビューとの連動、ルートの表示」

前の記事

Googleマップをサイトに表示する_Part1「基本とかマーカー画像とか」

というわけでPart2。前回は目的の場所を中心に地図を表示し、マーカーを画像で表示したりした。
前回までの地図はこんな感じ。

コード

< !DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8"/>
  <title>Google Maps テスト|SESERAGISEVEN</title>
  <link rel="stylesheet" href="css/style.css"/>
</head>
<body>

<div class="wrapper">
  <div id="map"></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="//maps.google.com/maps/api/js"></script>
<script>
$(function(){ // jQuery

var map;
var origin = new google.maps.LatLng( 33.590513, 130.421213 ); // 博多駅

map = new google.maps.Map( document.getElementById('map'), {
        zoom: 18,                                 // ズームレベル。大きいほどズームする
        center: origin,                           // 地図の中心点
        mapTypeId: google.maps.MapTypeId.ROADMAP, // 地図タイプ
        scrollwheel: false,                       // マウスホイールでの拡大縮小を許可するか
        scaleControl: true,                       // 縮尺を表示するか
      });

new google.maps.Marker({
    position: origin,         // マーカーを立てる場所の緯度・経度
    map: map,                 // マーカーを配置する地図オブジェクト
    icon: 'img/marker_1.png', // 使用するアイコン画像のパス
    title: '博多駅',          // アイコンにオンマウスした時に表示される文字列
});

});
</script>
</body>
</html>

表示

6

今回まずやりたいのは、上記の地図とストリートビューを連動させること。
仕組みは覚えてしまえば簡単。

続きを読む

Googleマップをサイトに表示する_Part1「基本とかマーカー画像とか」

サイトにGoogleマップを載せているところも今ではたくさんあるけど、そのやり方については結構高度な印象があって、Google公式ドキュメントを見てもブログサイトを見ても初心者には分かりづらかったので勉強してみた。それを備忘録として、自分なりに分かりやすく書いていこうと思う。備忘録って言葉を久しぶりに使った。このサイトのコンセプトなのにね。

なお、この記事はJavaScript、jQueryをある程度使える人を対象として書いていますが、コピペからちょっといじったりして使えたりすると思うので、好きにいじってみてください。

GoogleMapsAPIを読み込む

なにはともあれAPIを読み込む。これを読み込むだけでMapの機能が使える。ありがとうGoogle。

<script src="//maps.google.com/maps/api/js"></script>

この時、APIキーというものが必要になる。キーの取得やAPIの使用はすべて無料。勝手にAPI使わずに申請してねってことで取得しましょう。Googleのデータやリソースを全力で使わせてもらう感じになるので、キーはちゃんと取得しておく。でもこのサイトの説明が分かりやすいから丸投げする。

こうやって取得したキーをさっきのスクリプトに書き込む。

<script src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXX"></script>

ちょっと前まではキーの設定と一緒に「sensor」という設定が必要だったんだけど、今は必要ない。どうやら不要→必要→不要という流れらしい。ブレブレ。
これでGoogleMapsが使えるようになった。

続きを読む

1 2 3 4 次へ

カテゴリー

人気の記事