svg画像表示ツール

December 15,2017 12:03 AM
Category:[ツール]
Tag:[Tool]
Permalink

svg画像表示ツールを作りました。

1.はじめに

SVG画像はXMLで作成され、フォーマットのひとつとして次のように、symbol要素にid属性を付与する方法があります。

<svg>
  <symbol id="foo" viewBox="0 0 110 110">
    <path d="..."></path>
  </symbol>
  <symbol id="bar" viewBox="0 0 110 110">
    <path d="..."></path>
  </symbol>
</svg>

この場合、下記のようにuse要素でid属性を呼び出せば対応するsymbol要素に記述されたsvg画像が表示されます。

<svg title="test" role="img">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="sample.svg#foo"> </use>
</svg>

このようなフォーマットのsvg画像をすべて表示させたいと思い、ツールを作ってみました。

2.使い方

一番下にある「SVGファイルをドロップしてください」の部分にsvgファイルをドラッグ&ドロップすれば、下記のようにsvgファイルに含まれるすべての画像をid属性値とともに表示します。

SVGファイル

すべてのフォーマットに対応できていないかもしれないので予めご容赦ください。

SVGファイルをドロップしてください

Comments [0] | Trackbacks [0]

Chromeでcookieを確認する方法

December 13,2017 12:03 AM
Category:[Google Chrome]
Tag:[Chrome]
Permalink

Chromeでcookieを確認する方法を紹介します。

1.問題点

cookieを操作するスクリプトを作りました。

Chromeでcookieにデータが保存されていることを確認したいのですが、cookieを確認する方法が分かりません。

ということで、Chromeでcookieを確認する方法を紹介します。

2.Chromeでcookieを確認する

Chromeでcookieを確認するには、「Google Chromeの設定」アイコン→「設定」をクリック。

設定

ページの一番下にある「詳細設定」をクリック。

詳細設定

「コンテンツの設定」をクリック。

コンテンツの設定

「Cookie」をクリック。

Cookie

「すべての Cookie とサイトデータを表示」をクリック。

すべての Cookie とサイトデータを表示

ドメイン別にcookieが表示されます。ここでは「localhost」をクリック。

cookieの内容

ドメインに登録されているcookieの一覧が表示されます。

cookieの一覧

右側の▽をクリックすればcookieの内容が表示されます。

cookieの内容

3.cookieを更新する場合の注意

cookieを更新する場合、cookieを表示している画面でリロードしても更新されないようです。

ひとつ前の画面「すべての Cookie とサイトデータ」に戻って、リロードします。

Comments [0] | Trackbacks [0]

gdbでアドレス指定で値を出力する方法

December 5,2017 12:03 AM
Category:[C/C++]
Tag:[C/C++]
Permalink

gdbでアドレス指定で値を出力する方法を紹介します。

1.問題点

下記のサンプルプログラムを作りました。

#include <iostream>
#include <unistd.h>
 
int main() {
    int i;
    int *p;
    int j = 0;
    p = &j;
    for (i = 0; i < 10000; i++ ) {
        std::cout << "OK" << std::endl;
        sleep(1);
        j++;
    }
    return 0;
}

アドレス変数pのアドレスを出力し、そのアドレスをgdbで指定して、指定したアドレスの先の値を出力したいのですが方法が分かりません。

ということで、gdbでアドレス指定で値を出力する方法を紹介します。

2.gdbでアドレス指定で値を出力する

アドレス指定で値を出力するには、"x"を利用します。

サンプルファイルをビルドします。

% g++ -g test.cpp

gdbを起動します。

% gdb ./a.out
GNU gdb (GDB) Red Hat Enterprise Linux 7.6.1-94.el7
Copyright (C) 2013 Free Software Foundation, Inc.
License GPLv3+: GNU GPL version 3 or later <http://gnu.org/licenses/gpl.html>
This is free software: you are free to change and redistribute it.
There is NO WARRANTY, to the extent permitted by law.  Type "show copying"
and "show warranty" for details.
This GDB was configured as "ppc64-redhat-linux-gnu".
For bug reporting instructions, please see:
<http://www.gnu.org/software/gdb/bugs/>...
Reading sym
(gdb)bols from a.out...done.

ブレークポイントを指定します。ここでは12行目を指定します。

(gdb) b 12
Breakpoint 1 at 0x100009f0: file test.cpp, line 12.

スタートして12行目でブレークします。

(gdb) start
Temporary breakpoint 2 at 0x10000998: file test.cpp, line 7.
Starting program: ./a.out
 
Temporary breakpoint 2, main () at test.cpp:7
7           int j = 0;
Missing separate debuginfos, use: debuginfo-install glibc-2.17-157.el7.ppc64 libgcc-4.8.5-11.el7.ppc64 libstdc++-4.8.5-11.el7.ppc64

もう1回ループさせて変数jの値を更新します。

(gdb) c
Continuing.
OK
 
Breakpoint 1, main () at test.cpp:12
12              j++;

ポインタ変数pを出力します。

(gdb) p p
$2 = (int *) 0x3ffffffff080

これでアドレス0x3ffffffff080を指定して値を出力します。

(gdb) x 0x3ffffffff080
0x3ffffffff080: 0x00000000

もう一度繰り返してアドレスの値を出力すれば、値がインクリメントされていることが分かります。

(gdb) c
Continuing.
OK
 
Breakpoint 1, main () at test.cpp:12
12              j++;
(gdb) x 0x3ffffffff080
0x3ffffffff080: 0x00000001

ちなみに、xの後ろに"/回数"を付与すれば、指定回数分のメモリを出力することができます。

(gdb) x/10 0x3ffffffff080
0x3ffffffff080: 0x00000001      0xb7ff0d48      0x00003fff      0xb7fef938
0x3ffffffff090: 0x00000000      0x00000000      0x00000000      0x00000000
0x3ffffffff0a0: 0x00003fff      0xfffff370
Comments [0] | Trackbacks [0]

WixCodeの使い方(その5:インデックスページの作成)

November 30,2017 12:03 AM
Category:[Wix]
Tag:[Wix]
Permalink

「WixCodeの使い方(その4:ダイナミックページの作成)」でダイナミックページを作成する手順を説明しました。

ですが、ダイナミックページを作成しただけではブログのページからリンクされていません。

本エントリーではインデックスページを作成し、ダイナミックページへのリンクを設定する手順を説明します。

1.インデックスページの作成

画面上の「ページ:ブログ」をクリック。

ページ:ブログ

ダイアログが表示されるので「新しいページ」をクリック。

新しいページ

「ページ」をクリック。

ページ

ページタイトル編集に切り替わるので、ここでは「商品一覧」と入力して「完了」をクリック。

ページタイトル編集

この段階でページに「商品一覧」というリンクが自動的に表示されます。

商品一覧

2.ページタイトルの配置

インデックスページにタイトル部分を配置します。「追加」→「テキスト」→「ページタイトル」を選択してページ上にドラッグ。

ページタイトル

編集して「商品一覧」と入力します。

商品一覧

2.商品一覧の配置

次にダイナミックページの一覧になるテーブルを配置します。

「追加」→「ユーザー入力」をクリックして、下の方にある任意のテーブルをページにドラッグします。

ユーザー入力

このような感じで配置します。

配置

関連付けるためのデータセットをページに追加します。「追加」→「Database」→「データセット」をクリック。

データセット

これでデータセットがページに追加されました。

データセットがページに追加

データセットの「Manage Dataset」をクリック。

Manage Dataset

データセット設定ダイアログが開きます。

データセット設定ダイアログ

「コレクションを接続」のプルダウンから「Products」を選択。

コレクションを接続

「Dataset name」に「Products dataset」が設定されたことを確認してダイアログを閉じます。

Dataset name

データセットアイコンの名称が「Products dataset」になりました。

Products dataset

テーブルをクリックして、右上のデータベースアイコンをクリック。

テーブル

「Connect Table」ダイアログが開きます。

「Connect Table」ダイアログ

「Connect a dataset」のプルダウンから「Products dataset」を選択。

Test dataset

選択すると、その下に「Connection Options」の項目が表示されます。

「Connection Options」の項目

ダイナミックページへのリンクを設定します。「Product Name(Text)」の右側にあるリンクアイコンをクリック。

リンクアイコン

その下の「Product Name column links to」のプルダウンをクリックして、「Dynamic pages」→「Products(Product Name)」を選択。

Product Name column links to

このような設定になります。ダイアログはこのまま閉じます。

ダイアログ

テーブルの表示がProductsデータベースの内容になりました。

テーブル

3.テーブルの管理

テーブルヘッダに表示するテキストや順番の入れ替え、項目を減らしたい場合は、「テーブルを管理」をクリック。ここではヘッダの名称を変更してみます。

テーブル

「テーブルを管理」ダイアログが開きます。

テーブルを管理

項目の右側にある「...」をクリック。

項目の右側にある「...」

「ラベルを編集」をクリック。

ラベルを編集

「商品名」に変更して「Done」をクリック。

「商品名」に変更

他の項目も同様に変更します。

他の項目も同様に変更

これでテーブルのヘッダ表示が変わりました。

テーブル

2.インデックスページのプレビューと公開

設定が完了したら、右上の「プレビュー」をクリック。

プレビュー

インデックスページのプレビューが行なえます。テーブルにデータベースの内容が表示されました。

インデックスページのプレビュー

商品名のタイトルがリンクになっていることを確認します。クリックすればダイナミックページにジャンプします(商品一覧ページに戻るには上部リストの「商品一覧」をクリック)。

タイトルリンク

「エディタに戻る」をクリックすれば、インデックスページの編集画面に戻ります。

エディタに戻る

右上の「公開」をクリック。

公開

これでインデックスページが公開されました。「おめでとうございます!」というダイアログが表示されまるので、そのまま閉じます。

おめでとうございます!

Comments [0] | Trackbacks [0]

WixCodeの使い方(その4:ダイナミックページの作成)

November 29,2017 12:03 AM
Category:[Wix]
Tag:[Wix]
Permalink

本エントリーでは、「WixCodeの使い方(その2:データベース作成とデータの設定)」および「WixCodeの使い方(その3:サンドボックスデータとライブデータについて)」で公開したデータをもとに、ダイナミックページを作成する方法を説明します。

1.ダイナミックページの作成とURL設定

左サイドバーの「Collections」→「Products」の右側にあるギアアイコンをクリックして「Add a Dynamic Page」をクリック。

Add a Dynamic Page

「動的ページのタイプを選択」ダイアログが表示されるので「Item」を選択して「Next」をクリック。

(クリックで拡大、以下同様)
動的ページのタイプを選択

「Set Up Your Dynamic Item Page」ダイアログが表示されるので、ダイナミックページのURLを指定します。

Set Up Your Dynamic Item Page

今回のサンプルでは、URLの末尾はデフォルトで「Products(データベース名)/ProductName(キーとなるフィールド名)」になっていて、"ProductName"が可変データとなります。ちなみにデータベース作成時のカラム名「Title」がそのままであれば、「Title」がURLの末尾になります。

URL右側の「Add Field」をクリックすれば、データベースの任意のフィールドをURLのキーとして選択できます。

URLは直接編集することも可能です。

URL直接編集

編集が終わったら右下の「Create Page」をクリック。ここではデフォルトの「Products/ProductName」のままで説明を進めます。

Create Page

「Create Page」をクリックすると、ダイナミックページの編集画面に遷移し、左サイドバーには、

Products Page(Data)
 Products(Product Name)

が表示されます。

ダイナミックページの編集画面に遷移

また、ダイナミックページの編集画面には「Products Item」というアイコンが表示されます。

ダイナミックページの編集画面に遷移

2.ダイナミックページの編集とデータベースの連携

次にダイナミックページを編集します。

ダイナミックページ編集画面で、データベースの「Product Name」に該当するテキストを配置します。

「追加」→「テキスト」→「ページタイトル」を選択してページ上にドラッグ。

ページタイトル

表示はこのようになります。

表示

次に、ページタイトルとデータベースの「Product Name」を連携させます。

「ページタイトル」をクリックして、右上のデータベースアイコンをクリック。

データベースアイコン

「Connect Text」というダイアログが開きます。

Connect Text

「Connect a dataset」から「Products Item」、「Connection Options」の「Text connections to」の項目から「Product Name(Text)」を選択します。

選択

選択後の表示です。

選択後の表示

関連付けたあと、データベースアイコンが緑色で表示されます。

データベースアイコン

同じ手順で「Price」「Image」に該当するオブジェクトを配置、関連づけます。「Price」は「追加」→「テキスト」→「段落」を選択します。

Price

データベースの「Price(Number)」と関連づけます。

Price

画像は、「追加」→「画像」→「アップロード」をクリック。

アップロード

任意の画像を選択して「ページに追加」をクリック。

画像選択

このように表示されます。

表示

データベースの「Image(Image)」と関連づけます。

表示

関連づけたオブジェクトの全体のレイアウトはつぎのようになります。

全体のレイアウト

3.ダイナミックページのプレビューと公開

データの関連づけが完了したら、右上の「プレビュー」をクリック。

プレビュー

各ダイナミックページのプレビューが行なえます。

ダイナミックページのプレビュー

別のダイナミックページをプレビューしたい場合は、右上の<または>をクリック。

ダイナミックページのプレビュー

「エディタに戻る」をクリックすれば、ダイナミックページの編集画面に戻ります。

エディタに戻る

公開するには、右上の「公開」をクリック。

公開

これでダイナミックページが公開されました。「おめでとうございます!」というダイアログが表示されるのでそのまま閉じます。

おめでとうございます!

Comments [0] | Trackbacks [0]

WixCodeの使い方(その3:サンドボックスデータとライブデータについて)

November 28,2017 12:03 AM
Category:[Wix]
Tag:[]
Permalink

「WixCodeの使い方(その2:データベース作成とデータの設定)」で新たなコレクション(データベース)を作成し、データを入力・保存しました。

が、この状態では入力データは「サンドボックスデータ」となっていて、まだ公開される状態になっていません。

実はコレクションには、「サンドボックスデータ」と「ライブデータ」と呼ばれる2つのバージョンがあり、データを公開するにはサンドボックスデータをライブデータにする必要があります。

本エントリーでは2つのバージョンの概要と、サンドボックスデータをライブデータにする手順について解説します。

1.サンドボックスデータ

サンドボックスデータは、サイトを開発する際に使用するいわゆるテストデータで、サイトを開発する際のデータとしてページが適切に動作することを確認することができます。

サンドボックスデータはライブデータと同じように動作しますが、外部からサンドボックスデータを参照することはできません。

したがって、サイトを公開する前のプレビューはサンドボックスデータを使用します。

サンドボックスデータは、対応するライブデータにコピーまたは同期しない限り、外部サイトに影響しません。

2.ライブデータ

対して、ライブデータはサイトの公開時にユーザーが操作するデータになります。公開されたサイトはライブデータで動作します。

3.サンドボックスデータをライブデータにする

「WixCodeの使い方(その2:データベース作成とデータの設定)」で入力・保存したデータはサンドボックスデータとして保存されています。

サンドボックスデータ
サンドボックスデータ

ちなみにサンドボックスデータを保存した状態で「Live」に切り替えると、「This Collection Isn’t Available(このコレクションは利用できません)」が表示されるだけです。

Sandbox

サンドボックスデータをライブデータに反映(=スキーマをコピー)させるには、右上の「公開」をクリック。

公開

これで「Live」に切り替えると、データが表示されます。これでサンドボックスデータをライブデータとして扱うことができます。

ライブデータ
「Live」に切り替え

4.サンドボックスデータとライブデータの同期

公開後のテストで新たに追加したサンドボックスデータをライブデータに反映させる場合などは、データを同期させるには、「Sync」→「Copy all items to Live」をクリック。

Sandbox

Comments [0] | Trackbacks [0]

WixCodeの使い方(その2:データベース作成とデータの設定)

November 27,2017 12:03 AM
Category:[Wix]
Tag:[Wix]
Permalink

本エントリーでは、Wixブログに新しいデータベースを作成し、作成したデータベースに値を設定する手順を説明します。

手順の前に「Wixブログの作り方」の手順でブログを作成し、「マイアプリ」が表示されている画面左上の「サイトを管理」をクリック。

サイトを管理

左側にある「サイトを編集」をクリック。これでテンプレート編集画面に遷移します。

サイトを編集

1.データベースの作成

左サイドバーの「Collections」のリンクをクリック。

Collections

展開されたツリーの「新しいコレクションを追加」をクリック。

新しいコレクションを追加

「Start Creating」をクリック。

(クリックで拡大、以下同様)
Start Creating

データベース名を設定する「Give this database collection a name」フィールドが表示されます。

Give this database collection a name

ここでは「Products」と入力します。

Products

「What’s this database collection for?」の右側にあるアイコンをクリック。

What’s this database collection for?

データベースの種類を選択します。

データベースの種類を選択

選択する種類によってデータベースにアクセスする権限が異なるようです。

  • Site Content:誰でも参照可能
  • Form Input:誰でも設定可能
  • User-Generated Content:誰でも参照可能、メンバーのみ設定可能
  • Content for Members:メンバーのみ参照可能
  • Form Input from Members:メンバーのみ設定可能
  • Private Data:管理者のみアクセス可能
  • Custom Use:権限をカスタマイズ可能

ここでは誰でも参照可能な「Site Content」を選択します。

Site Content

「Create Collection」をクリック。

Create Collection

これでデータベースの作成が終わり、テーブル作成画面に切り替わります。

データベースのテーブル作成画面

2.データベースカラムの作成

次にデータベースカラムの作成を行います。

データベース作成直後には「Title」というカラムがデフォルトで用意されています。

まずはこのカラムの名称を変更し、そのあと新しいカラムを追加します。

「Title」の部分にカーソルをあてると、右側に設定用のアイコンが表示されます。

設定用のアイコン

設定用のアイコンをクリックして、「Edit Properties」をクリック。

Edit Properties

カラムの編集画面が表示されます。

カラムの編集画面""

Column Name欄の「Title」を「Product Name」に変更して「Update」をクリック。

Update

これで変更されました。

変更

カラムを追加する場合はデフォルトカラム右側の+をクリック。

カラムを追加

カラムの編集画面が表示されるので、ここでは名前に「Price」を設定します。

名前に「Price」を設定

「Data Type」をクリックして、データの型を「Number」に変更します。

データの型を「Number」に変更

「Add」をクリック。

Add

これでカラムが追加されました。

カラム追加

同じ要領で画像用のカラムも追加します。

画像用のカラムも追加

画像用のカラムも追加

3.データの入力

最後に、作成したカラムにデータを設定します。

テキストデータはカラムをダブルクリックすれば入力できます。

データの入力

任意のデータを入力します。

任意のデータを入力

画像はカラムに表示された「+」をクリックします。

「+」をクリック

「画像をアップロード」をクリックして画像をアップロードします。

画像をアップロード

アップロード後、「画像を追加」をクリック。

画像を追加

画像が追加されました。

画像が追加

データベース左の「+」をクリックして、同じ要領でデータを入力します。

データベース左の「+」をクリック

データを追加したところです。

データを追加したところ

4.レコードの挿入

データを挿入したい場合は、挿入したい直前のレコードを選択して「+」または「Add Row」をクリックします。たとえば1と2の間にデータを挿入したい場合は、1のレコードを選択して「+」または「Add Row」をクリック。

レコードの挿入

これで挿入されました。

レコードの挿入

5.レコードの削除

不要なレコードは、数字の部分で右クリックして「delete」を選択します。

レコードの削除

6.データベースの保存

入力したデータを保存するため、右上にある「保存」をクリックします。

保存

これで作成したデータが保存されます。

Comments [0] | Trackbacks [0]

gdbを一時停止/強制停止させる方法

November 15,2017 12:03 AM
Category:[C/C++]
Tag:[C/C++]
Permalink

gdbを一時停止/強制停止させる方法を紹介します。

1.問題点

次のサンプルプログラムを作りました。

test.cpp

#include <iostream>
#include <unistd.h>
 
int main() {
    int i;
    int j = 0;
    for (i = 0; i < 10000; i++ ) {
        std::cout << "OK" << std::endl;
        sleep(1);
        j++;
    }
    return 0;
}

このプログラムをgdbで実行させたあと、プログラムを一旦停止させてからブレークポイントを設定したいのですが、方法が分かりません。

ということで、gdbを一時停止/強制停止させる方法を紹介します。

2.gdbを一時停止/強制停止させる

gdbを一時停止/強制停止させるには、"Ctrl-c"を利用します。

gdbでプロセスが動作しているときに"Ctrl-c"を入力すると、制御がgdbに移るので、この状態でブレークポイントを設定することができます。

前述のサンプルでの手順を下記に示します。

まずビルドします。

# g++ -g test.cpp

gdbでプログラムを起動します。

# gdb ./a.out
GNU gdb (GDB) Red Hat Enterprise Linux 7.6.1-94.el7
Copyright (C) 2013 Free Software Foundation, Inc.
License GPLv3+: GNU GPL version 3 or later <http://gnu.org/licenses/gpl.html>
This is free software: you are free to change and redistribute it.
There is NO WARRANTY, to the extent permitted by law.  Type "show copying"
and "show warranty" for details.
This GDB was configured as "ppc64-redhat-linux-gnu".
For bug reporting instructions, please see:
<http://www.gnu.org/software/gdb/bugs/>...
Reading symbols from /home/foo/a.out...done.

実行します。

(gdb) run
Starting program: /home/foo/./a.out
OK
OK
OK

ここでCtrl-cを入力します。

^C
Program received signal SIGINT, Interrupt.
0x00003fffb7b74dc8 in __nanosleep_nocancel () from /lib64/libc.so.6
Missing separate debuginfos, use: debuginfo-install glibc-2.17-157.el7.ppc64 libgcc-4.8.5-11.el7.ppc64 libstdc++-4.8.5-11.el7.ppc64

プロセスが停止してgdbに制御が戻ってプロンプトが表示されるので、ブレークポイントを設定します。

(gdb) break test.cpp:10
Breakpoint 1 at 0x100009e0: file test.cpp, line 10.

再開させるには"continue"を入力。

(gdb) continue
Continuing.
 
Breakpoint 1, main () at test.cpp:10
10              j++;

ブレークポイントで停止したのでjの値を表示させます。

(gdb) print j
$1 = 2
Comments [0] | Trackbacks [0]

Linuxで実行中プロセスのフルパスを取得する方法

November 9,2017 12:03 AM
Category:[Linux]
Tag:[Linux]
Permalink

Linuxで実行中プロセスのフルパスを取得する方法を紹介します。

1.問題点

Linuxサーバをシャットダウン→再起動したあと、httpdを起動させたのですが、アクセスしたページが「Not Found」になってしまいました。

おそらくApacheが複数インストールされていて、いつも使っていないバイナリを起動させてしまったようです。

いくつかあるうちのどれかを起動すれば解消すると思います。

で、色々試しているうちに解消したのですが、結局どのhttpdが起動しているのか分からなくなりました。

psコマンドでは次のような相対パス表示なので絶対パス(フルパス)が分かりません。

# ps -ef |grep httpd
root      3033     1  0 14:24 ?        00:00:00 ./httpd
daemon    3034  3033  0 14:24 ?        00:00:00 ./httpd
daemon    3035  3033  0 14:24 ?        00:00:00 ./httpd
daemon    3036  3033  0 14:24 ?        00:00:00 ./httpd
daemon    3037  3033  0 14:24 ?        00:00:00 ./httpd
daemon    3128  3033  0 14:25 ?        00:00:00 ./httpd
root      3265  2696  0 14:31 pts/1    00:00:00 grep httpd

2.実行中プロセスのフルパスを取得する

実行中プロセスのフルパスを取得するには

/proc/[PID]/exe

を利用します。

前述のpsコマンドでhttpdのプロセスIDは3033なので

/proc/3033/exe

のシンボリックリンクに、実行ファイルのパス(/usr/local/apache2/bin/httpd)が表示されます。

# ls -l /proc/3033/exe
lrwxrwxrwx. 1 root root 0 11月  2 14:32 2017 /proc/3033/exe -> /usr/local/apache2/bin/httpd
Comments [0] | Trackbacks [0]

vimを終了させる方法

November 8,2017 12:03 AM
Category:[Linux]
Tag:[]
Permalink

vimを終了させる方法についてまとめました。

注:いずれも実行前にESCを押下し、コマンドモードに切り替えてください

:q

終了。内容が変更されている場合は「E37: 最後の変更が保存されていません (! を追加で変更を破棄)」というメッセージが表示されます。これは「:quit」の短縮形です。

:q!

変更した内容を保存せず終了。これは「:quit!」の短縮形です。

:wq

書き込み&終了

:wq!

強制書き込み&終了(ファイルに書き込み権限がなくても強制書き込み)

:x

書き込み&終了(「:wq」と同様)

:exit

書き込み&終了(「:wq」と同様)

:qa

すべて終了。内容が変更されている場合は「E162: バッファ "..." の変更は保存されていません」というメッセージが表示されます。これは「:quitall」の短縮形です。

ZZ

書き込み&終了(ファイルに書き込み権限がなくても強制書き込み)

ZQ

終了(内容が変更されている場合でも強制終了)

Comments [0] | Trackbacks [0]

Wix新製品「Wix Code」について(その1:概要)

November 2,2017 12:03 AM
Category:[Wix]
Tag:[Wix]
Permalink

Wix新製品「Wix Code」について紹介致します。

1.はじめに

以前、「Wixブログの作り方」という記事を書きましたが、無料ホームページサービスのWix.comより、開発者向けの新プロダクト「Wix Code」がローンチされました。

Wix Code
Wix Code

「Wix Code」を使用することで、サーバレスでデータベースやデータベースコレクションの設定、コンテンツリッチWebサイトの作成、カスタムフォームの追加によるWebサイトを簡単に構築することができます。

すべての操作は、Wix Editorのビジュアルコンポーネントからアクセスできます。

ということで、数回に分けてWix新製品「Wix Code」について紹介したいと思います。

Wix Codeでできることは大きく次の5つの機能に分けられます。

  • データベース
  • ダイナミックページ
  • ユーザー入力
  • カスタムインタラクション
  • WixコードAPI

以下、それぞれの機能について簡単に説明します。

2.データベース

サイトに表示するコンテンツをデータベースで管理することができます。データ量の制限はありません。

データベース

データベースを利用するには「コレクション」を作成します。

作成したコレクションに任意の型のカラム(フィールド)を追加することができます。

作成したデータベースに各レコードを保存することができます。

サイト上でどのようにデータベースを使用するかを選択し、ユーザによって追加・編集・表示の権限を制御することもできます。

サイトのコンテンツをデータベースに保存することで、サイトのデザインと別に管理することが可能になります。

ユーザは、ルック・アンド・フィールに影響を与えることなく、データベース内のすべてのテキストとイメージを追加および編集することができます。

3.ダイナミックページ

データベースに保存したデータから、それぞれがカスタムURLと固有のコンテンツを持つページを動的に作成することができます。

ダイナミックページ

データベースのコンテンツを更新することで動的ページに反映されます。

また動的ページはカテゴリ別に整理することができ、項目のグループを表示することができます。

ダイナミックページでは、アイテム(=データベースの1レコード)単位に表示する「ダイナミックアイテムページ」とカテゴリ別に分けられた「ダイナミックカテゴリページ」、そしてダイナミックアイテムページへのリンクを表示するための「インデックスページ」を作成することができます。

4.ユーザー入力

入力フォームを作成することで、ユーザーはサイトからフォーム経由でデータベースの入力が可能になります。

ユーザー入力

フォームは、ページに各要素をドラッグ&ドロップすることで簡単に作成することができます。

フォームで送信されたデータは自動的にデータベースに保存されます。

5.カスタムインタラクション

ページ要素にJavaScriptコードを追加して、ページの動作をカスタマイズすることができます。

カスタムインタラクション

たとえば、ボタンをクリックすることによる要素の表示・非表示や要素の折りたたみ、マウスポイントによるふきだしや画像のハイライト表示など、ユーザー操作によるインタラクションを作成します。

JavaScriptが分からなくても設定することができます。

6.WixコードAPI

Wix Code APIを使用すれば、サイトの機能を制御することができ、ページ要素・サイトのデータベースコンテンツ・外部サービスと対話することができます。

WixコードAPI

例えば下記のものを操作することが可能です。

  • サイトのコンポーネント
  • サイトのデータベースコレクション
  • データセットを通じてサイトのデータベースコレクション
  • サードパーティのリソース取得

サードパーティのリソース取得でAPIキーを公開できないなど、セキュリティ上問題がある場合は、バックエンドWebモジュールからサービスを呼び出すことができます。

以上です。

次回はデータベースコレクションの作成について具体的な手順を紹介する予定です。

Comments [0] | Trackbacks [0]

LinuxとC/C++によるソケット通信サンプル

October 31,2017 12:03 AM
Category:[C/C++]
Tag:[C/C++, Linux]
Permalink

C/C++によるソケット通信サンプルを紹介します。

1.はじめに

Linux上で動作する、C++のソケット通信サンプルを作ってみました。

使い方は、サーバ・クライアントそれぞれのプログラムをビルドし、2つのターミナルを使ってサーバ→クライアントの順で起動すると、クライアントからサーバに簡単な文字列を送信し、サーバからクライアントにその文字をそのまま返送し、それぞれのターミナルに実行状況を表示します。

2.サーバプログラム(server.cpp)

#include <stdio.h>
#include <string.h>
#include <sys/types.h>
#include <sys/socket.h>
#include <netinet/in.h>
#include <unistd.h>
 
int main() {
    int sockfd;
    int client_sockfd;
    struct sockaddr_in addr;
 
    socklen_t len = sizeof( struct sockaddr_in );
    struct sockaddr_in from_addr;
 
    char buf[1024];
 
    // 受信バッファ初期化
    memset( buf, 0, sizeof( buf ) );
 
    // ソケット生成
    if( ( sockfd = socket( AF_INET, SOCK_STREAM, 0 ) ) < 0 ) {
        perror( "socket" );
    }
 
    // 待ち受け用IP・ポート番号設定
    addr.sin_family = AF_INET;
    addr.sin_port = htons( 1234 );
    addr.sin_addr.s_addr = INADDR_ANY;
 
    // バインド
    if( bind( sockfd, (struct sockaddr *)&addr, sizeof( addr ) ) < 0 ) {
        perror( "bind" );
    }
 
    // 受信待ち
    if( listen( sockfd, SOMAXCONN ) < 0 ) {
        perror( "listen" );
    }
 
    // クライアントからのコネクト要求待ち
    if( ( client_sockfd = accept( sockfd, (struct sockaddr *)&from_addr, &len ) ) < 0 ) {
        perror( "accept" );
    }
 
    // 受信
    int rsize;
    while( 1 ) {
        rsize = recv( client_sockfd, buf, sizeof( buf ), 0 );
 
        if ( rsize == 0 ) {
            break;
        } else if ( rsize == -1 ) {
            perror( "recv" );
        } else {
            printf( "receive:%s\n", buf );
            sleep( 1 );
 
            // 応答
            printf( "send:%s\n", buf );
            write( client_sockfd, buf, rsize );
        }
    }
 
    // ソケットクローズ
    close( client_sockfd );
    close( sockfd );
 
    return 0;
}

3.クライアントプログラム(client.cpp)

#include <stdio.h>
#include <sys/types.h>
#include <sys/socket.h>
#include <netinet/in.h>
#include <arpa/inet.h>
#include <unistd.h>
 
int main() {
    int sockfd;
    struct sockaddr_in addr;
 
    // ソケット生成
    if( (sockfd = socket( AF_INET, SOCK_STREAM, 0) ) < 0 ) {
        perror( "socket" );
    }
 
    // 送信先アドレス・ポート番号設定
    addr.sin_family = AF_INET;
    addr.sin_port = htons( 1234 );
    addr.sin_addr.s_addr = inet_addr( "127.0.0.1" );
 
    // サーバ接続
    connect( sockfd, (struct sockaddr *)&addr, sizeof( struct sockaddr_in ) );
 
    // データ送信
    char send_str[10];
    char receive_str[10];
    for ( int i = 0; i < 10; i++ ){
        sprintf( send_str, "%d", i );
        printf( "send:%d\n", i );
        if( send( sockfd, send_str, 10, 0 ) < 0 ) {
            perror( "send" );
        } else {
            recv( sockfd, receive_str, 10, 0 );
            printf( "receive:%s\n", receive_str );
        }
        sleep( 1 );
    }
 
    // ソケットクローズ
    close( sockfd );
 
    return 0;
}

4.プログラムのビルド

% g++ -o server server.cpp
% g++ -o client client.cpp

5.プログラムの実行

% ./server
% ./client
Comments [0] | Trackbacks [0]

iMacrosでiframe要素にアクセスする方法

October 26,2017 12:03 AM
Category:[iMacros]
Tag:[iMacros]
Permalink

iMacrosでiframe要素にアクセスする方法を紹介します。

1.問題点

次のようなiframe要素のあるHTMLがあります。

index.html

<html>
<body>
<iframe src="sample.html" height="300" width="500" />
</body>
</html>

sample.html

<html>
<body>
<form name="test">
<input type="text" value="" />
</form>
</body>
</html>

index.htmlにアクセスして、iframe要素にあるフォームのテキストフィールドに値を設定したいのですが、そもそもiframe要素にアクセスする方法がわかりません。

ということで、iMacrosでiframe要素にアクセスする方法を紹介します。

2.iMacrosでiframe要素にアクセスする

iMacrosでiframe要素にアクセスするには「FRAME」を利用します。

VERSION BUILD=844 RECORDER=CR
URL GOTO=http://user-domain/index.html
FRAME F=1
TAG POS=1 TYPE=INPUT:TEXT FORM=NAME:test ATTR=* CONTENT=aaa

FRAMEのフォーマットはつぎのようになっています。

FRAME (F=n|NAME=id)

"F"はページ内のiframe要素の出現順位、NAMEはiframe要素のname属性値です。

いずれかを指定すればiframe要素にアクセスすることができます。

サンプルの場合、index.htmlの中でiframeが1番目(1つしかありませんが)に出現しているので、

FRAME F=1

となります。

またiframe要素に、

<iframe name="hoge" src="sample.html" height="300" width="500" />

という風にname属性が指定されていれば、

FRAME NAME=hoge

と書くこともできます。

Comments [0] | Trackbacks [0]

Firefoxのスクリーンショットで新機能追加

October 19,2017 12:03 AM
Category:[Firefox]
Tag:[Firefox]
Permalink

すでにご存じの方も多いと思いますが、Firefoxのスクリーンショットで新機能が追加されてましたので紹介します。

いつものようにコンテキストメニューの「要素を調査」で開発者用ウィンドウからスクリーンショットを取得しようとしたところ、「スクリーンショットを撮る」というメニューが表示されるようになっていました。

スクリーンショットを撮る

メニューを選択すると、ベータ版でスクリーンショットを撮る機能が新たに提供されましたというイントロダクション。

(クリックで拡大、以下同様)
イントロダクション

必要な部分だけをFirefox上で選択できるようです。

必要な部分だけをFirefox上で選択

スクリーンショットはPCへのダウンロードはもちろんですが、ウェブ上への保存も可能なようです。

ウェブ上への保存も可能

ということで試してみました。

「スクリーンショットを撮る」というメニューを選択すると、全体がオーバーレイされ、「ページをドラッグまたはクリックして範囲を選択してください。ESCキーを押すとキャンセルできます」という文字が表示されます。

スクリーンショットを撮る

マウスでポイントすれば特定範囲の矩形選択ができます。

矩形選択

この状態でクリックすると白抜き表示に変わり、この部分がスクリーンショット対象になります。右下のボタンはあとで説明します。

白抜き表示

任意の範囲をドラッグすれば上と同じように白抜きでキャプチャ範囲が表示されます。

任意の範囲をドラッグ

ドラッグをやめると右下にボタンが3つ表示されます。×はキャンセル、↓はダウンロード、「保存」はウェブ上への保存です。再ドラッグで範囲の変更や、選択範囲全体の移動も可能です。

右下にボタンが3つ

「保存」をクリックするとウェブ上への保存が開始します。ウェブ上には14日間保存されるようです。

ウェブ上への保存開始

保存が完了すると次の画面が表示されます。ここからダウンロードすることも可能です。

保存が完了

ファイル名は「Screenshot-YYYY-MM-DD サイト名.png」となります。

ファイル名

保存が完了画面左上の「自分のショット」のリンクをブックマークしておけば、そこから他のスクリーンショットの一覧にアクセスできます。

スクリーンショットの一覧

今までどおり、開発者ツールからの全体スクリーンショットも可能です。

開発者ツールからの全体スクリーンショット

Comments [0] | Trackbacks [0]

iPhoneをPCに接続して「このデバイス上に新しい画像とビデオが見つかりませんでした。」と表示された場合の対処

October 17,2017 12:03 AM
Category:[iPhone]
Tag:[]
Permalink

iPhoneをPCに接続して「このデバイス上に新しい画像とビデオが見つかりませんでした。」と表示された場合の対処方法について紹介します。

1.問題点

iPhoneで撮った画像をWindowsのPCに取り込むとき、該当デバイスの「Internal Storage」→「DCIM」とフォルダのツリーを開くのですが、ある日、いつものように接続すると「このデバイス上に新しい画像とビデオが見つかりませんでした。」というダイアログが表示されました。

このデバイス上に新しい画像とビデオが見つかりませんでした。

また、エクスプローラーを開いても、「Internal Storage」までしかツリーが開きません。

エクスプローラー

ということで、「このデバイス上に新しい画像とビデオが見つかりませんでした。」と表示された場合の対処方法について紹介します。

2.対処方法

わかればなんてことはないのですが、iPhoneを再起動したあと、再接続することで解決しました。

またiPhoneを接続したときに「このコンピュータを信頼しますか」といったメッセージが出るので、「信頼する」をタップしましょう。

Comments [0] | Trackbacks [0]
 1  |  2  |  3  |  4  |  5  | All pages