heroku へクレジットカード登録

heroku でアドオンを使うには、無料であっても本人確認のため
クレジットカードの登録が必要

登録するには Heroku にログインし

Account settings をクリック

heroku

次に Billing タブをクリックし、Add Credit Card をクリック

Screenshot from 2016-08-14 22:31:05

次にダイアログがでるので、カード情報を入力

Screenshot from 2016-08-14 22:32:50

そのままだと入力方法がわからないので

http://www.happyimport.info/how/address.php
を参考に入力方法を調べることに

Address Line 1 には番地と町名
Address Line 2 に建物名と部屋番号
City は 市または区
State/Province は都道府県
ZIP/Postal Code は郵便番号
Country が国
という意味でした

ちなみに部屋番号とかの書き方も調べたかったので
http://eigo-box.jp/others/address/
を参考に書き方を調べることに
部屋番号は#で書くとのことなので
201号室なら
#201
ということに

また、丁目、番地、号については- で書けばOK
5丁目6番7号
なら
5-6-7

都道府県名は省略可能
静岡なら
Shizuoka
というかんじ

これで入力ができたら
Save Details をクリックするとカード情報が登録されます


PDF
カテゴリー: heroku | コメントをどうぞ

ポートフォリオサイト作成その2

今回は自己紹介部分を作成します

今回は section タグを使用します

これについては
HTML5のお勉強 articleとsectionとか
を参考にしました

section を使うときには、このタグの中に h1 が必要になります

今回、letter-spacing を使うことで文字の間隔を調整しています

詳しくは
文字と文字の間隔を変更できるletter-spacingプロパティ
を参考に

では
div#container>section
として
この中に自己紹介を書いてみました

    <div class="container">
      <section>
        <h1>About</h1>
        <h3>自己紹介</h3>
        <p>メインマシンは Ubuntu 14.04 たまに Mac 使います</p>
        <p>Wordpress でブログ運営中(興味のある方は <a href="http://wp.developapp.net/">こちらを</a>)</p>
        <p>kindle で ubuntu の使い方を書いた本を出版しました(<a href="https://www.amazon.co.jp/%E3%81%8A%E8%A9%A6%E3%81%97-Ubuntu-%E3%81%99%E3%81%AE%E3%81%86%E3%81%BD%E3%83%BC%E3%82%8B-ebook/dp/B00WZQN7XO">お試し Ubuntu</a>)</p>
        <p>写真から位置情報を読み出し、ナビするアプリを作りました(<a href="https://play.google.com/store/apps/details?id=net.developapp.photonavi">PhotoNavi</a>)</p>
        <p>最近は ruby on rails の Web アプリを公開するべく学習中</p>
        <p>年末にはAndroid クライアントアプリ作成予定</p>
      </section>
    </div>

次に css で中央揃えと文字間隔を揃えます

section{
    text-align: center;
    letter-spacing: 0.15em;
}

また、ナビゲーション部分は現在作成中ということで

        <nav>
            <ul>
                <li><a href="index.html" class="selected>Home">Home</a></li>
                <li><a href="https://snowpooll.github.io/">Github</a></l>
                <li><a href="#">MyApp(作成中)</a></li>
            </ul>
        </nav>

と変更しました

これでプレビューをみると、以下のようになります

Screenshot from 2016-07-06 23:09:58


PDF
カテゴリー: Github Page | コメントをどうぞ

ポートフォリオサイトの作成

GithubPage でポートフォリオサイトを作っていこうと思います

とはいっても作成したことがないので、ざっくりつくり、今後カスタマイズすることで完成させていこうと思います

まずはベースとなるHTMLを作っておきます

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Snowpool | About</title>
    <!-- BootstrapのCSS読み込み -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <!-- jQuery読み込み -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- BootstrapのJS読み込み -->
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </head>
  <body>
    
  </body>
</html>

注意点としては jQuery を bootstrap 関連より先にいれることです
この順番を間違えて後にすると、動きのある jQuery プラグインなどが動作しないことがあります

次に
link:css を展開することで

<link rel="stylesheet" href="style.css">

を展開

次に header と footer の領域を作成

footer には copyright を作成し
header にはナビゲーションを配置します

    <footer>
      &copy 2016 Snowpool
    </footer>

としてコピーライトを作成

css は

footer{
    font-size: 93%;
    text-align: center;
}

として中央寄せに

画像については twitter で使っているものを使用するため
同じフォルダに配置

次に header にナビゲーションを配置

    <header>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html" class="selected">About</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </header>

として次に css の設定


nav{
    text-align: center;
    
}

nav ul li{
    margin: 0 20px;
    display: inline-block;
}

nav ul li a{
    text-decoration: none;
    font-weight: bold;
}

text-align:center で中央寄せ

text-decoration:none にして下線を削除
font-weight:bold で太字
display: inline-block; で要素を横並びに

次に、アイコンをはりつける領域を作成
nav の下へ

        <div id="logo">
          <img src="Snowpooll.jpeg" alt="">
          <h1>Snowpool</h1>
        </div>

として、css の設定

#logo{
    text-align: center;
}

#logo img{
    max-width:300px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
}

#logo h1{
    letter-spacing: 0.15em;
}

#logo に対して
text-align:center にすることで
画像と名前を中央寄せに

なお、画像に対して
border-radius:100% にすると丸くなります

letter-spacing: は文字間隔の設定

ここまでで以下のような画面になります

Screenshot from 2016-07-06 01:00:31

次回はもう少し自己紹介文などを追加していきます


PDF
カテゴリー: Github Page | コメントをどうぞ

GithubPage の作成

GithubPage を作成し、ポートフォリオサイトにしてみようということで
まずはリポジトリを作成

ただし、リポジトリ名を間違えたため、一度リポジトリを削除します

Github でのリポジトリの削除は
リポジトリの画面で Setting タブをクリックします

Screenshot from 2016-07-05 01:05:17

次に、下にスクロールさせて Delete this repository をクリックします

Screenshot from 2016-07-05 01:06:53

そして、リポジトリ名を入力し

Screenshot from 2016-07-05 01:07:56

I understand the conceqenses delete this repository
をクリックすれば削除できます

これで新しくリポジトリを作り直します

New repository をクリックし、新しく作成します

Screenshot from 2016-07-05 01:10:59

作成するときに気をつけることは、リポジトリ名を
ユーザ名.github.io
となるようにすることです

あとは public を指定して、Create Repository をクリックすればリポジトリを作成できます

Screenshot from 2016-07-05 01:12:46

私の場合、Snowpooll.github.io とするのを snowpool.github.io としたため
githubPage が存在しませんとなってしまい、作りなおすことになりました


PDF
カテゴリー: 未分類 | コメントをどうぞ

git のリモートリポジトリの修正

Github Page をつくるのに cloud9 を使おうとしたけど
cloud9 の端末操作でURLのコピペができなかったため、
手打ちですべてやったため、URLの間違いが発生

本来なら、

git remote add origin https://github.com/Snowpooll/snowpool.github.io.git

とするはずが

git remote rm https://github.com/Snowpool/snowpool.github.io.git

と1文字違いで登録してしまい、これが原因で修正することになりました

そのままリポジトリ登録すればいいかなと思っても

fatal: remote origin already exists.

となってしまうため、一度 origin を削除する必要があります

このため

git remote rm origin

を実行し、origin を削除

次に

git remote add origin https://github.com/Snowpooll/snowpool.github.io.git

で再度登録

git push origin master 

とすることで解決しました


PDF
カテゴリー: git | コメントをどうぞ

Misoca (ミソカ) で請求書作成

請求書を作成することになったのですが、
いままで請求書など作ったこともないため、どうしようかなと
考えていた時に紹介されたのが
Misoca でした

今回は、このMisoca の登録方法についてになります

https://www.misoca.jp/

にアクセスし

まずはアカウントを作成します

Facebook か Twitter アカウントでの登録も可能です

今回はweb で新規登録をしてみます

misoca

次にメールアドレスとパスワードをいれて
登録するをクリックします

なお、パスワードは フリーソフトのKeepassX で作成しました

misoca2

これで
さっそく使ってみるをクリックすると
請求書作成のチュートリアルがでますので
請求書を新しくつくるをクリックします

misoca3

misoca4

すると、請求書の作成画面がでてくるので、
請求先名称
担当者
件名などを入力していき、できたら保存すればOKです

misoca5

なお、作成した請求書は、発行をクリックし
印刷、
PDFでのダウンロード、
郵送手続き、
メール送信など
さまざまな方法が使えます

misoca6


PDF
カテゴリー: misoca | コメントをどうぞ

ruby on rails で bootstrap

手軽に導入できる!Ruby on RailsでBootStrapを使う方法【初心者向け】

に載っていた内容に興味があったので
せっかくなので、過去にドットインストールで ruby on rails で作成したものを改造することに

まず

cd heroku/mymemo/

でプロジェクトに移動

次に

 vim app/views/memos/index.html.erb 

でファイルを開き、ボタンのコードに class 設定を追加

あまり改造するとわかりにくくなるので

<td><%= link_to 'Show', memo %></td>

の部分を

<td><%= link_to 'Show', memo ,class: "btn btn-lg btn-primary" %></td>

として保存

次に

 vim Gemfile

で Gemfile の最終行に追記します

ちなみに、バージョンが古いかな?と調べてみたら
Rails 4 で Twitter Bootstrap と Font Awesome を利用する手順


Font Awesome の入れ方も書いてあったので、こちらも追加することにします

gem 'bootstrap-sass', '~> 3.2.0'
gem 'font-awesome-sass'

を最終行に追記します
そしてGemfile を読み込むため

bundle install

を実行します

次に、Bootstrap と Font Awesome を適用するため
application.css に追記します

vim app/assets/stylesheets/application.css 

でファイルを開き

@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";

をファイル末尾に追記します

これで動作すると思ったのですが、反映されないため
bootstrap に関しては
https://github.com/twbs/bootstrap-sass

Font Awesome に関しては

http://fortawesome.github.io/Font-Awesome/get-started/

を参考にすることにしました
まず

 vim Gemfile

でファイルを開き

gem 'sass-rails', '>= 3.2'

を追加し、再度

 bundle install

を実行
しかし、

[!] There was an error parsing `Gemfile`: You cannot specify the same gem twice with different version requirements.
You specified: sass-rails (~> 5.0) and sass-rails (>= 3.2). Bundler cannot continue.

 #  from /home/snowpool/dotinstall/heroku/mymemo/Gemfile:52
 #  -------------------------------------------
 #  
 >  gem 'sass-rails', '>= 3.2'
 #  -------------------------------------------

となるため、すでにインストール済みとのこと
次に

 vim app/assets/stylesheets/application.scss

でファイルを作成し

@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";

を記述し、保存
これだけだと反映されないため、

cd app/assets/stylesheets/
cp application.css application.css_bak
rm application.css

として、application.css を削除したところ
無事に反映されました

なお、Font Awesome も反映されるか確かめたかったので

vim app/views/memos/index.html.erb 

でファイルを開き

<i class="fa fa-home"></i>

を追記してから

rails s

で起動

これでブラウザで確認したところ、無事に変更が反映されていました

rails-tw


PDF
カテゴリー: ruby on rails | コメントをどうぞ

ubuntu の https 対応

ubuntu 14.04 を https 対応させるように設定をします

すでに apache2 はインストール済みなので
ssl モジュールとバーチャルホストを有効化します

sudo a2enmod ssl
sudo a2ensite default-ssl

設定反映のため apache2 を再起動します

sudo service apache2 restart

次にポートの待ち受け443 があるかを調べます

ss -lnt

LISTEN     0      128                      :::443                     :::*   

という行があればOKです

ちなみに、ubuntu の場合apache2 インストール時点で
サンプルのSSL証明書が自動的に作成され
利用可能な状態になっているため、外部公開などにせず
サーバの練習などを行うのなら
そのままアクセスするだけですでに https 対応になります

念の為、openssl でサンプルの証明書をみておきましょう

 openssl x509 -in /etc/ssl/certs/ssl-cert-snakeoil.pem -noout -text -fingerprint -sha256

ちなみに、公開するサーバーの場合
正規のSSL証明書の購入をすることになります

これで設定ができたので、試しに
https://localhost でアクセスします

すると警告がでますが、気にせずに詳細をクリックします
これは正規のSSL証明書でないのが原因です

https

次に localhost にアクセスする(安全ではありません)
をクリックします

https2
すると
https になったページにアクセスできるようになります

https3


PDF
カテゴリー: ubuntu | コメントをどうぞ

atom で html プレビュー

Atom エディタでコードを書きながら HTML プレビューをみたいので
パッケージを追加します

開発環境は Ubuntu 14.04 になります

まず Atom を起動し
Ctrl + , で設定画面をだします

次に、 install をクリックし、
atom-html-preview
で検索し
インストールをクリックします

atom-html

これで有効化されるので
html コードを書いたら
ctrl + shit + h で画面右側にプレビューを表示できます

atom-prev

もう一度
ctrl + shift + h を押すとプレビューを閉じることができます

最大のメリットはchrome とかで確認するときに
リロードしないと更新されませんが、
このパッケージの場合、コードをリアルタイムで反映してくれるので
HTMLの練習には最適です

このパッケージの詳細については
https://atom.io/packages/atom-html-preview
にかかれています


PDF
カテゴリー: Atom | コメントをどうぞ

owncloud client のインストール

owncloud のURLを更新し、MacBookAir ではアクセスできたので
次に ubuntu のデスクトップクライアントから設定しようとしたら
エラー 資格情報が間違っています
と表示されるので、原因究明のため検索

ownclient

どうやらversion 1.5 と古いのが原因のようなので
新しいものをインストールすることに

https://owncloud.org/install/
にアクセスし

Desktop Clients をクリック

ownlient3

どのOSか聞かれるので、Linux を選択

ownlient4

次にディストリビューションを選べるので
Ubuntu を選択

ownlient5

するとインストール方法が表示されるので
それに従いコマンドを実行することでインストールできます

今回は Ubuntu 14.04 のを実行します

ownlient6

sudo sh -c "echo 'deb http://download.opensuse.org/repositories/isv:/ownCloud:/desktop/Ubuntu_14.04/ /' >> /etc/apt/sources.list.d/owncloud-client.list"
sudo apt-get update
sudo apt-get install owncloud-client

PDF
カテゴリー: ownCloud | コメントをどうぞ